@placeslayer/sdk-react-native 1.0.0

package/dist/index.cjs

@@ -0,0 +1,357 @@
+"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_react_native = require("react-native");
+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)(() => {
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(search, delay);
+    return () => {
+      if (timerRef.current !== void 0) 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,
+  placeholder = "Search cities...",
+  baseUrl,
+  theme,
+  style,
+  inputStyle
+}) {
+  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 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;
+  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 t = theme ?? {};
+  const borderColor = t.borderColor ?? "#d1d5db";
+  const borderRadius = t.borderRadius ?? 6;
+  const background = t.background ?? "#fff";
+  const textColor = t.textColor ?? "#111827";
+  const secondaryTextColor = t.secondaryTextColor ?? "#6b7280";
+  const activeBackground = t.activeBackground ?? "#f3f4f6";
+  const fontSize = t.fontSize ?? 14;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.TextInput,
+      {
+        value: query,
+        onChangeText: (text) => {
+          setQuery(text);
+          setOpen(true);
+        },
+        onFocus: () => {
+          if (query.trim()) setOpen(true);
+        },
+        placeholder,
+        placeholderTextColor: secondaryTextColor,
+        style: [
+          styles.input,
+          {
+            borderColor,
+            borderRadius,
+            backgroundColor: background,
+            color: textColor,
+            fontSize
+          },
+          inputStyle
+        ],
+        accessibilityRole: "search"
+      }
+    ),
+    open && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.View,
+      {
+        style: [
+          styles.list,
+          { borderColor, borderRadius, backgroundColor: background }
+        ],
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_native.FlatList,
+          {
+            data: filtered,
+            keyExtractor: (item) => item.code,
+            keyboardShouldPersistTaps: "handled",
+            renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_react_native.Pressable,
+              {
+                style: ({ pressed }) => [
+                  styles.item,
+                  pressed && { backgroundColor: activeBackground }
+                ],
+                onPress: () => handleSelect(item),
+                accessibilityRole: "button",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_native.Text,
+                    {
+                      style: [styles.name, { color: textColor, fontSize }],
+                      numberOfLines: 1,
+                      children: item.name
+                    }
+                  ),
+                  item.province_name && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_native.Text,
+                    {
+                      style: [styles.province, { color: secondaryTextColor }],
+                      numberOfLines: 1,
+                      children: item.province_name
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    ),
+    open && loading && filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react_native.View,
+      {
+        style: [
+          styles.status,
+          { borderColor, borderRadius, backgroundColor: background }
+        ],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ActivityIndicator, { size: "small", color: secondaryTextColor }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_native.Text,
+            {
+              style: [
+                styles.statusText,
+                { color: secondaryTextColor, fontSize }
+              ],
+              children: "Loading..."
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var styles = import_react_native.StyleSheet.create({
+  container: {
+    position: "relative",
+    width: "100%"
+  },
+  input: {
+    width: "100%",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderWidth: 1
+  },
+  list: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 4,
+    borderWidth: 1,
+    maxHeight: 240,
+    zIndex: 50,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 4,
+    overflow: "hidden"
+  },
+  item: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  name: {
+    fontWeight: "500",
+    flexShrink: 1
+  },
+  province: {
+    fontSize: 12,
+    marginLeft: 8
+  },
+  status: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 4,
+    borderWidth: 1,
+    padding: 10,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  statusText: {
+    marginLeft: 8
+  }
+});
+
+// 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 { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  ActivityIndicator,\n  FlatList,\n  Pressable,\n  StyleSheet,\n  Text,\n  TextInput,\n  View,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport {\n  PlacesLayerClient,\n  type AutocompleteResult,\n  type CityDetail,\n} from \"@placeslayer/sdk\";\nimport { useAutocomplete } from \"./hooks/useAutocomplete\";\n\nexport interface CitiesDropdownTheme {\n  /** Input/list border color (default: \"#d1d5db\") */\n  borderColor?: string;\n  /** Input/list border radius (default: 6) */\n  borderRadius?: number;\n  /** Dropdown background color (default: \"#fff\") */\n  background?: string;\n  /** Main text color (default: \"#111827\") */\n  textColor?: string;\n  /** Secondary text color for province labels (default: \"#6b7280\") */\n  secondaryTextColor?: string;\n  /** Active/pressed item background (default: \"#f3f4f6\") */\n  activeBackground?: string;\n  /** Input font size (default: 14) */\n  fontSize?: number;\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  baseUrl?: string;\n  /** Customize dropdown colors and appearance */\n  theme?: CitiesDropdownTheme;\n  /** Custom container style */\n  style?: StyleProp<ViewStyle>;\n  /** Custom input style (merged on top of theme) */\n  inputStyle?: StyleProp<TextStyle>;\n}\n\nexport function CitiesDropdown({\n  apiKey,\n  country,\n  province,\n  onSelect,\n  limit = 10,\n  placeholder = \"Search cities...\",\n  baseUrl,\n  theme,\n  style,\n  inputStyle,\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\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  const handleSelect = useCallback(\n    async (result: AutocompleteResult) => {\n      setQuery(result.name);\n      setOpen(false);\n      const detail = await client.city(result.country_code, result.code);\n      onSelect(detail);\n    },\n    [client, onSelect]\n  );\n\n  const t = theme ?? {};\n  const borderColor = t.borderColor ?? \"#d1d5db\";\n  const borderRadius = t.borderRadius ?? 6;\n  const background = t.background ?? \"#fff\";\n  const textColor = t.textColor ?? \"#111827\";\n  const secondaryTextColor = t.secondaryTextColor ?? \"#6b7280\";\n  const activeBackground = t.activeBackground ?? \"#f3f4f6\";\n  const fontSize = t.fontSize ?? 14;\n\n  return (\n    <View style={[styles.container, style]}>\n      <TextInput\n        value={query}\n        onChangeText={(text) => {\n          setQuery(text);\n          setOpen(true);\n        }}\n        onFocus={() => {\n          if (query.trim()) setOpen(true);\n        }}\n        placeholder={placeholder}\n        placeholderTextColor={secondaryTextColor}\n        style={[\n          styles.input,\n          {\n            borderColor,\n            borderRadius,\n            backgroundColor: background,\n            color: textColor,\n            fontSize,\n          },\n          inputStyle,\n        ]}\n        accessibilityRole=\"search\"\n      />\n      {open && filtered.length > 0 && (\n        <View\n          style={[\n            styles.list,\n            { borderColor, borderRadius, backgroundColor: background },\n          ]}\n        >\n          <FlatList\n            data={filtered}\n            keyExtractor={(item) => item.code}\n            keyboardShouldPersistTaps=\"handled\"\n            renderItem={({ item }) => (\n              <Pressable\n                style={({ pressed }) => [\n                  styles.item,\n                  pressed && { backgroundColor: activeBackground },\n                ]}\n                onPress={() => handleSelect(item)}\n                accessibilityRole=\"button\"\n              >\n                <Text\n                  style={[styles.name, { color: textColor, fontSize }]}\n                  numberOfLines={1}\n                >\n                  {item.name}\n                </Text>\n                {item.province_name && (\n                  <Text\n                    style={[styles.province, { color: secondaryTextColor }]}\n                    numberOfLines={1}\n                  >\n                    {item.province_name}\n                  </Text>\n                )}\n              </Pressable>\n            )}\n          />\n        </View>\n      )}\n      {open && loading && filtered.length === 0 && (\n        <View\n          style={[\n            styles.status,\n            { borderColor, borderRadius, backgroundColor: background },\n          ]}\n        >\n          <ActivityIndicator size=\"small\" color={secondaryTextColor} />\n          <Text\n            style={[\n              styles.statusText,\n              { color: secondaryTextColor, fontSize },\n            ]}\n          >\n            Loading...\n          </Text>\n        </View>\n      )}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: \"relative\",\n    width: \"100%\",\n  },\n  input: {\n    width: \"100%\",\n    paddingVertical: 10,\n    paddingHorizontal: 12,\n    borderWidth: 1,\n  },\n  list: {\n    position: \"absolute\",\n    top: \"100%\",\n    left: 0,\n    right: 0,\n    marginTop: 4,\n    borderWidth: 1,\n    maxHeight: 240,\n    zIndex: 50,\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 4,\n    overflow: \"hidden\",\n  },\n  item: {\n    paddingVertical: 10,\n    paddingHorizontal: 12,\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  name: {\n    fontWeight: \"500\",\n    flexShrink: 1,\n  },\n  province: {\n    fontSize: 12,\n    marginLeft: 8,\n  },\n  status: {\n    position: \"absolute\",\n    top: \"100%\",\n    left: 0,\n    right: 0,\n    marginTop: 4,\n    borderWidth: 1,\n    padding: 10,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  statusText: {\n    marginLeft: 8,\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    if (timerRef.current !== undefined) clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(search, delay);\n    return () => {\n      if (timerRef.current !== undefined) clearTimeout(timerRef.current);\n    };\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":"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","names":["import_react","import_react","import_sdk","import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,68 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { CityDetail, PlacesLayerConfig, PlacesLayerClient, Country, Province, City, AutocompleteResult } from '@placeslayer/sdk';
+
+interface CitiesDropdownTheme {
+    /** Input/list border color (default: "#d1d5db") */
+    borderColor?: string;
+    /** Input/list border radius (default: 6) */
+    borderRadius?: number;
+    /** Dropdown background color (default: "#fff") */
+    background?: string;
+    /** Main text color (default: "#111827") */
+    textColor?: string;
+    /** Secondary text color for province labels (default: "#6b7280") */
+    secondaryTextColor?: string;
+    /** Active/pressed item background (default: "#f3f4f6") */
+    activeBackground?: string;
+    /** Input font size (default: 14) */
+    fontSize?: number;
+}
+interface CitiesDropdownProps {
+    apiKey: string;
+    country: string;
+    province?: string;
+    onSelect: (city: CityDetail) => void;
+    limit?: number;
+    lang?: "default" | "native";
+    placeholder?: string;
+    baseUrl?: string;
+    /** Customize dropdown colors and appearance */
+    theme?: CitiesDropdownTheme;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom input style (merged on top of theme) */
+    inputStyle?: StyleProp<TextStyle>;
+}
+declare function CitiesDropdown({ apiKey, country, province, onSelect, limit, placeholder, baseUrl, theme, style, inputStyle, }: 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,68 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { CityDetail, PlacesLayerConfig, PlacesLayerClient, Country, Province, City, AutocompleteResult } from '@placeslayer/sdk';
+
+interface CitiesDropdownTheme {
+    /** Input/list border color (default: "#d1d5db") */
+    borderColor?: string;
+    /** Input/list border radius (default: 6) */
+    borderRadius?: number;
+    /** Dropdown background color (default: "#fff") */
+    background?: string;
+    /** Main text color (default: "#111827") */
+    textColor?: string;
+    /** Secondary text color for province labels (default: "#6b7280") */
+    secondaryTextColor?: string;
+    /** Active/pressed item background (default: "#f3f4f6") */
+    activeBackground?: string;
+    /** Input font size (default: 14) */
+    fontSize?: number;
+}
+interface CitiesDropdownProps {
+    apiKey: string;
+    country: string;
+    province?: string;
+    onSelect: (city: CityDetail) => void;
+    limit?: number;
+    lang?: "default" | "native";
+    placeholder?: string;
+    baseUrl?: string;
+    /** Customize dropdown colors and appearance */
+    theme?: CitiesDropdownTheme;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom input style (merged on top of theme) */
+    inputStyle?: StyleProp<TextStyle>;
+}
+declare function CitiesDropdown({ apiKey, country, province, onSelect, limit, placeholder, baseUrl, theme, style, inputStyle, }: 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.js

@@ -0,0 +1,335 @@
+// src/CitiesDropdown.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View
+} from "react-native";
+import {
+  PlacesLayerClient
+} from "@placeslayer/sdk";
+
+// src/hooks/useAutocomplete.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var DEBOUNCE_MS = 300;
+function useAutocomplete(client, countryCode, query, opts) {
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const version = useRef(0);
+  const timerRef = useRef(void 0);
+  const delay = opts?.debounceMs ?? DEBOUNCE_MS;
+  const search = 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]);
+  useEffect(() => {
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(search, delay);
+    return () => {
+      if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    };
+  }, [search, delay]);
+  return { results, loading, error };
+}
+
+// src/CitiesDropdown.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CitiesDropdown({
+  apiKey,
+  country,
+  province,
+  onSelect,
+  limit = 10,
+  placeholder = "Search cities...",
+  baseUrl,
+  theme,
+  style,
+  inputStyle
+}) {
+  const clientRef = useRef2(null);
+  if (!clientRef.current || clientRef.current.apiKey !== apiKey) {
+    clientRef.current = new PlacesLayerClient({ apiKey, baseUrl });
+  }
+  const client = clientRef.current;
+  const [query, setQuery] = useState2("");
+  const [open, setOpen] = useState2(false);
+  const prevCountry = useRef2(country);
+  const prevProvince = useRef2(province);
+  useEffect2(() => {
+    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;
+  const handleSelect = useCallback2(
+    async (result) => {
+      setQuery(result.name);
+      setOpen(false);
+      const detail = await client.city(result.country_code, result.code);
+      onSelect(detail);
+    },
+    [client, onSelect]
+  );
+  const t = theme ?? {};
+  const borderColor = t.borderColor ?? "#d1d5db";
+  const borderRadius = t.borderRadius ?? 6;
+  const background = t.background ?? "#fff";
+  const textColor = t.textColor ?? "#111827";
+  const secondaryTextColor = t.secondaryTextColor ?? "#6b7280";
+  const activeBackground = t.activeBackground ?? "#f3f4f6";
+  const fontSize = t.fontSize ?? 14;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.container, style], children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        value: query,
+        onChangeText: (text) => {
+          setQuery(text);
+          setOpen(true);
+        },
+        onFocus: () => {
+          if (query.trim()) setOpen(true);
+        },
+        placeholder,
+        placeholderTextColor: secondaryTextColor,
+        style: [
+          styles.input,
+          {
+            borderColor,
+            borderRadius,
+            backgroundColor: background,
+            color: textColor,
+            fontSize
+          },
+          inputStyle
+        ],
+        accessibilityRole: "search"
+      }
+    ),
+    open && filtered.length > 0 && /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.list,
+          { borderColor, borderRadius, backgroundColor: background }
+        ],
+        children: /* @__PURE__ */ jsx(
+          FlatList,
+          {
+            data: filtered,
+            keyExtractor: (item) => item.code,
+            keyboardShouldPersistTaps: "handled",
+            renderItem: ({ item }) => /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                style: ({ pressed }) => [
+                  styles.item,
+                  pressed && { backgroundColor: activeBackground }
+                ],
+                onPress: () => handleSelect(item),
+                accessibilityRole: "button",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [styles.name, { color: textColor, fontSize }],
+                      numberOfLines: 1,
+                      children: item.name
+                    }
+                  ),
+                  item.province_name && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [styles.province, { color: secondaryTextColor }],
+                      numberOfLines: 1,
+                      children: item.province_name
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    ),
+    open && loading && filtered.length === 0 && /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.status,
+          { borderColor, borderRadius, backgroundColor: background }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: secondaryTextColor }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles.statusText,
+                { color: secondaryTextColor, fontSize }
+              ],
+              children: "Loading..."
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var styles = StyleSheet.create({
+  container: {
+    position: "relative",
+    width: "100%"
+  },
+  input: {
+    width: "100%",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderWidth: 1
+  },
+  list: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 4,
+    borderWidth: 1,
+    maxHeight: 240,
+    zIndex: 50,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 4,
+    overflow: "hidden"
+  },
+  item: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  name: {
+    fontWeight: "500",
+    flexShrink: 1
+  },
+  province: {
+    fontSize: 12,
+    marginLeft: 8
+  },
+  status: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 4,
+    borderWidth: 1,
+    padding: 10,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  statusText: {
+    marginLeft: 8
+  }
+});
+
+// src/hooks/usePlacesLayer.ts
+import { useRef as useRef3 } from "react";
+import { PlacesLayerClient as PlacesLayerClient2 } from "@placeslayer/sdk";
+function usePlacesLayerClient(config) {
+  const ref = useRef3(null);
+  if (!ref.current || ref.current.apiKey !== config.apiKey) {
+    ref.current = new PlacesLayerClient2(config);
+  }
+  return ref.current;
+}
+
+// src/hooks/useAsync.ts
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+function useAsync(fn, deps) {
+  const [data, setData] = useState3(null);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const version = useRef4(0);
+  const execute = useCallback3(() => {
+    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);
+  useEffect3(() => {
+    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]
+  );
+}
+export {
+  CitiesDropdown,
+  useAutocomplete,
+  useCities,
+  useCountries,
+  usePlacesLayerClient,
+  useProvinces
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../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":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  ActivityIndicator,\n  FlatList,\n  Pressable,\n  StyleSheet,\n  Text,\n  TextInput,\n  View,\n  type StyleProp,\n  type TextStyle,\n  type ViewStyle,\n} from \"react-native\";\nimport {\n  PlacesLayerClient,\n  type AutocompleteResult,\n  type CityDetail,\n} from \"@placeslayer/sdk\";\nimport { useAutocomplete } from \"./hooks/useAutocomplete\";\n\nexport interface CitiesDropdownTheme {\n  /** Input/list border color (default: \"#d1d5db\") */\n  borderColor?: string;\n  /** Input/list border radius (default: 6) */\n  borderRadius?: number;\n  /** Dropdown background color (default: \"#fff\") */\n  background?: string;\n  /** Main text color (default: \"#111827\") */\n  textColor?: string;\n  /** Secondary text color for province labels (default: \"#6b7280\") */\n  secondaryTextColor?: string;\n  /** Active/pressed item background (default: \"#f3f4f6\") */\n  activeBackground?: string;\n  /** Input font size (default: 14) */\n  fontSize?: number;\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  baseUrl?: string;\n  /** Customize dropdown colors and appearance */\n  theme?: CitiesDropdownTheme;\n  /** Custom container style */\n  style?: StyleProp<ViewStyle>;\n  /** Custom input style (merged on top of theme) */\n  inputStyle?: StyleProp<TextStyle>;\n}\n\nexport function CitiesDropdown({\n  apiKey,\n  country,\n  province,\n  onSelect,\n  limit = 10,\n  placeholder = \"Search cities...\",\n  baseUrl,\n  theme,\n  style,\n  inputStyle,\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\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  const handleSelect = useCallback(\n    async (result: AutocompleteResult) => {\n      setQuery(result.name);\n      setOpen(false);\n      const detail = await client.city(result.country_code, result.code);\n      onSelect(detail);\n    },\n    [client, onSelect]\n  );\n\n  const t = theme ?? {};\n  const borderColor = t.borderColor ?? \"#d1d5db\";\n  const borderRadius = t.borderRadius ?? 6;\n  const background = t.background ?? \"#fff\";\n  const textColor = t.textColor ?? \"#111827\";\n  const secondaryTextColor = t.secondaryTextColor ?? \"#6b7280\";\n  const activeBackground = t.activeBackground ?? \"#f3f4f6\";\n  const fontSize = t.fontSize ?? 14;\n\n  return (\n    <View style={[styles.container, style]}>\n      <TextInput\n        value={query}\n        onChangeText={(text) => {\n          setQuery(text);\n          setOpen(true);\n        }}\n        onFocus={() => {\n          if (query.trim()) setOpen(true);\n        }}\n        placeholder={placeholder}\n        placeholderTextColor={secondaryTextColor}\n        style={[\n          styles.input,\n          {\n            borderColor,\n            borderRadius,\n            backgroundColor: background,\n            color: textColor,\n            fontSize,\n          },\n          inputStyle,\n        ]}\n        accessibilityRole=\"search\"\n      />\n      {open && filtered.length > 0 && (\n        <View\n          style={[\n            styles.list,\n            { borderColor, borderRadius, backgroundColor: background },\n          ]}\n        >\n          <FlatList\n            data={filtered}\n            keyExtractor={(item) => item.code}\n            keyboardShouldPersistTaps=\"handled\"\n            renderItem={({ item }) => (\n              <Pressable\n                style={({ pressed }) => [\n                  styles.item,\n                  pressed && { backgroundColor: activeBackground },\n                ]}\n                onPress={() => handleSelect(item)}\n                accessibilityRole=\"button\"\n              >\n                <Text\n                  style={[styles.name, { color: textColor, fontSize }]}\n                  numberOfLines={1}\n                >\n                  {item.name}\n                </Text>\n                {item.province_name && (\n                  <Text\n                    style={[styles.province, { color: secondaryTextColor }]}\n                    numberOfLines={1}\n                  >\n                    {item.province_name}\n                  </Text>\n                )}\n              </Pressable>\n            )}\n          />\n        </View>\n      )}\n      {open && loading && filtered.length === 0 && (\n        <View\n          style={[\n            styles.status,\n            { borderColor, borderRadius, backgroundColor: background },\n          ]}\n        >\n          <ActivityIndicator size=\"small\" color={secondaryTextColor} />\n          <Text\n            style={[\n              styles.statusText,\n              { color: secondaryTextColor, fontSize },\n            ]}\n          >\n            Loading...\n          </Text>\n        </View>\n      )}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: \"relative\",\n    width: \"100%\",\n  },\n  input: {\n    width: \"100%\",\n    paddingVertical: 10,\n    paddingHorizontal: 12,\n    borderWidth: 1,\n  },\n  list: {\n    position: \"absolute\",\n    top: \"100%\",\n    left: 0,\n    right: 0,\n    marginTop: 4,\n    borderWidth: 1,\n    maxHeight: 240,\n    zIndex: 50,\n    shadowColor: \"#000\",\n    shadowOffset: { width: 0, height: 2 },\n    shadowOpacity: 0.1,\n    shadowRadius: 4,\n    elevation: 4,\n    overflow: \"hidden\",\n  },\n  item: {\n    paddingVertical: 10,\n    paddingHorizontal: 12,\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  name: {\n    fontWeight: \"500\",\n    flexShrink: 1,\n  },\n  province: {\n    fontSize: 12,\n    marginLeft: 8,\n  },\n  status: {\n    position: \"absolute\",\n    top: \"100%\",\n    left: 0,\n    right: 0,\n    marginTop: 4,\n    borderWidth: 1,\n    padding: 10,\n    flexDirection: \"row\",\n    alignItems: \"center\",\n  },\n  statusText: {\n    marginLeft: 8,\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    if (timerRef.current !== undefined) clearTimeout(timerRef.current);\n    timerRef.current = setTimeout(search, delay);\n    return () => {\n      if (timerRef.current !== undefined) clearTimeout(timerRef.current);\n    };\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":"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","names":["useCallback","useEffect","useRef","useState","useRef","useState","useEffect","useCallback","useRef","PlacesLayerClient","useCallback","useEffect","useRef","useState"]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@placeslayer/sdk-react-native",
+  "version": "1.0.0",
+  "description": "React Native components and hooks for PlacesLayer",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "react-native": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@placeslayer/sdk": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.71"
+  },
+  "keywords": [
+    "placeslayer",
+    "react-native",
+    "geography",
+    "cities",
+    "countries",
+    "provinces",
+    "hooks"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hexar/placeslayer-sdk"
+  }
+}