@rufous/ui 0.1.63 → 0.2.0-beta.0

package/dist/TextFields/AddressLookup.js

@@ -0,0 +1,304 @@
+import {
+  FloatingInput
+} from "../chunk-UPCMMCPQ.js";
+import {
+  circularProgress_default
+} from "../chunk-CTBYVXFP.js";
+import {
+  useRufousTheme
+} from "../chunk-WNZLBFLQ.js";
+import "../chunk-QGXXOQJF.js";
+import "../chunk-LI4N7JWK.js";
+
+// lib/TextFields/AddressLookup.tsx
+import React, { useState, useRef, useEffect } from "react";
+import Axios from "axios";
+import { Country, State, City } from "country-state-city";
+var AddressLookup = ({
+  value = {},
+  onChange = () => {
+  },
+  label = "Address",
+  error = {},
+  size = "medium",
+  sx = {},
+  layout = "stack",
+  required = false,
+  token = ""
+}) => {
+  const { theme } = useRufousTheme();
+  const [suggestions, setSuggestions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [googleFields, setGoogleFields] = useState({
+    country: false,
+    state: false,
+    city: false,
+    pincode: false
+  });
+  const debounceTimeout = useRef(null);
+  const containerRef = useRef(null);
+  const apiKey = token || "";
+  const countries = Country.getAllCountries();
+  const [states, setStates] = useState([]);
+  const [cities, setCities] = useState([]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (value.country || value.state || value.city || value.pincode) {
+      setGoogleFields({
+        country: !!value.country,
+        state: !!value.state,
+        city: !!value.city,
+        pincode: !!value.pincode
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (value.country) {
+      const country = countries.find((c) => c.name === value.country);
+      if (country) {
+        const stateList = State.getStatesOfCountry(country.isoCode);
+        setStates(stateList);
+      } else {
+        setStates([]);
+      }
+    } else {
+      setStates([]);
+    }
+  }, [value.country]);
+  useEffect(() => {
+    if (value.state && value.country) {
+      const country = countries.find((c) => c.name === value.country);
+      if (country) {
+        const state = State.getStatesOfCountry(country.isoCode).find((s) => s.name === value.state);
+        if (state) {
+          const cityList = City.getCitiesOfState(country.isoCode, state.isoCode);
+          setCities(cityList);
+        } else {
+          setCities([]);
+        }
+      } else {
+        setCities([]);
+      }
+    } else {
+      setCities([]);
+    }
+  }, [value.state, value.country]);
+  const handleChange = (field, newVal) => {
+    onChange({
+      ...value,
+      [field]: newVal
+    });
+  };
+  const fetchPlaceDetails = async (placeId, mainText = "") => {
+    if (!apiKey) {
+      console.warn("Google Places API Key (token) is missing.");
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await Axios.get(
+        `https://places.googleapis.com/v1/places/${placeId}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Goog-Api-Key": apiKey,
+            "X-Goog-FieldMask": "addressComponents,formattedAddress"
+          }
+        }
+      );
+      const comps = res.data.addressComponents || [];
+      const findComp = (type) => comps.find((c) => c.types.includes(type))?.longText || "";
+      const city = findComp("locality") || findComp("sublocality_level_1");
+      const state = findComp("administrative_area_level_1");
+      const country = findComp("country");
+      const pincode = findComp("postal_code");
+      setGoogleFields({
+        country: !!country,
+        state: !!state,
+        city: !!city,
+        pincode: !!pincode
+      });
+      const updatedData = {
+        ...value,
+        addressLine1: mainText || value.addressLine1,
+        addressLine2: res.data.formattedAddress || value.addressLine2,
+        city,
+        state,
+        country,
+        pincode
+      };
+      onChange(updatedData);
+      setShowSuggestions(false);
+    } catch (err) {
+      console.error("Error fetching place details:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleQuerySuggestions = async (query) => {
+    if (!apiKey || !query || query.length < 3) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await Axios.post(
+        `https://places.googleapis.com/v1/places:autocomplete`,
+        { input: query },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Goog-Api-Key": apiKey
+          }
+        }
+      );
+      setSuggestions(res.data.suggestions || []);
+      setShowSuggestions(true);
+    } catch (err) {
+      console.error("Autocomplete Error:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleCountryChange = (newCountry) => {
+    onChange({
+      ...value,
+      country: newCountry,
+      state: "",
+      city: ""
+    });
+    setGoogleFields({ ...googleFields, country: false, state: false, city: false });
+  };
+  const handleStateChange = (newState) => {
+    onChange({
+      ...value,
+      state: newState,
+      city: ""
+    });
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ React.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ React.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ React.createElement(
+    FloatingInput,
+    {
+      label,
+      name: "addressLine1",
+      value: value.addressLine1 || "",
+      required,
+      autoComplete: "off",
+      onChange: (e) => {
+        const val = e.target.value;
+        handleChange("addressLine1", val);
+        if (!val) {
+          onChange({
+            ...value,
+            addressLine1: "",
+            city: "",
+            state: "",
+            country: "",
+            pincode: ""
+          });
+          setSuggestions([]);
+          setShowSuggestions(false);
+          setGoogleFields({ country: false, state: false, city: false, pincode: false });
+        } else {
+          if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+          debounceTimeout.current = setTimeout(() => {
+            handleQuerySuggestions(val);
+          }, 500);
+        }
+      },
+      onFocus: () => suggestions.length > 0 && setShowSuggestions(true)
+    }
+  ), loading && /* @__PURE__ */ React.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ React.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: idx,
+      className: "autocomplete-option",
+      onClick: () => {
+        const mainText = option?.placePrediction?.structuredFormat?.mainText?.text || "";
+        handleChange("addressLine1", mainText);
+        fetchPlaceDetails(option.placePrediction.placeId, mainText);
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
+    /* @__PURE__ */ React.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
+  ))), error.addressLine1 && /* @__PURE__ */ React.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ React.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React.createElement(
+    FloatingInput,
+    {
+      label: "Address Line 2",
+      name: "addressLine2",
+      value: value.addressLine2 || "",
+      onChange: (e) => handleChange("addressLine2", e.target.value)
+    }
+  )), layout !== "compact" && /* @__PURE__ */ React.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ React.createElement(
+    FloatingInput,
+    {
+      label: "Address Line 2",
+      name: "addressLine2",
+      value: value.addressLine2 || "",
+      onChange: (e) => handleChange("addressLine2", e.target.value)
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ React.createElement(
+    FloatingInput,
+    {
+      label: "Country",
+      name: "country",
+      value: value.country || "",
+      required,
+      className: googleFields.country && value.country ? "field-disabled" : "",
+      readOnly: googleFields.country && !!value.country,
+      onChange: (e) => handleCountryChange(e.target.value),
+      list: "countries-list"
+    }
+  ), /* @__PURE__ */ React.createElement("datalist", { id: "countries-list" }, countries.map((c) => /* @__PURE__ */ React.createElement("option", { key: c.isoCode, value: c.name }))), error.country && /* @__PURE__ */ React.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ React.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ React.createElement(
+    FloatingInput,
+    {
+      label: "State",
+      name: "state",
+      value: value.state || "",
+      required,
+      disabled: !value.country,
+      className: googleFields.state && value.state ? "field-disabled" : "",
+      readOnly: googleFields.state && !!value.state,
+      onChange: (e) => handleStateChange(e.target.value),
+      list: "states-list"
+    }
+  ), /* @__PURE__ */ React.createElement("datalist", { id: "states-list" }, states.map((s) => /* @__PURE__ */ React.createElement("option", { key: s.isoCode, value: s.name }))), error.state && /* @__PURE__ */ React.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ React.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ React.createElement(
+    FloatingInput,
+    {
+      label: "City",
+      name: "city",
+      value: value.city || "",
+      required,
+      disabled: !value.state,
+      className: googleFields.city && value.city ? "field-disabled" : "",
+      readOnly: googleFields.city && !!value.city,
+      onChange: (e) => handleChange("city", e.target.value),
+      list: "cities-list"
+    }
+  ), /* @__PURE__ */ React.createElement("datalist", { id: "cities-list" }, cities.map((c, i) => /* @__PURE__ */ React.createElement("option", { key: i, value: c.name }))), error.city && /* @__PURE__ */ React.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ React.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ React.createElement(
+    FloatingInput,
+    {
+      label: "Pincode",
+      name: "pincode",
+      value: value.pincode || "",
+      required,
+      className: googleFields.pincode && value.pincode ? "field-disabled" : "",
+      readOnly: googleFields.pincode && !!value.pincode,
+      onChange: (e) => handleChange("pincode", e.target.value)
+    }
+  ), error.pincode && /* @__PURE__ */ React.createElement("div", { className: "field-error-text" }, error.pincode))));
+};
+var AddressLookup_default = AddressLookup;
+export {
+  AddressLookup_default as default
+};

package/dist/TextFields/FloatingInput.cjs

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// lib/TextFields/FloatingInput.jsx
+// lib/TextFields/FloatingInput.tsx
 var FloatingInput_exports = {};
 __export(FloatingInput_exports, {
   FloatingInput: () => FloatingInput
@@ -43,19 +43,21 @@ var FloatingInput = ({
   required = false,
   placeholder,
   className = "",
+  style,
   ...props
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `form__group field ${className}`, ...props }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `form__group field ${className}`, style }, /* @__PURE__ */ import_react.default.createElement(
     "input",
     {
       type,
       className: "form__field",
-      placeholder: placeholder || label,
+      placeholder: " ",
       name,
       id: id || name,
       value,
       onChange,
-      required
+      required,
+      ...props
     }
   ), /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: id || name, className: "form__label" }, label));
 };

package/dist/TextFields/FloatingInput.d.cts

@@ -1,23 +1,17 @@
-import * as React from 'react';
+import React__default, { InputHTMLAttributes, CSSProperties } from 'react';
 
-interface FloatingInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  /** Label text shown above the input */
-  label: string;
-
-  /** Name attribute for the input (used for forms) */
-  name: string;
-
-  /** ID for the input and label (defaults to `name` if not provided) */
-  id?: string;
-
-  /** Placeholder text (defaults to label if not provided) */
-  placeholder?: string;
-
-  /** Optional class name to apply to the outer wrapper */
-  className?: string;
+interface FloatingInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Label text shown above the input */
+    label: string;
+    /** Name attribute for the input (used for forms) */
+    name: string;
+    /** ID for the input and label (defaults to `name` if not provided) */
+    id?: string;
+    /** Optional class name to apply to the outer wrapper */
+    className?: string;
+    /** Inline style overrides for the wrapper */
+    style?: CSSProperties;
 }
-
-declare const FloatingInput: React.FC<FloatingInputProps>;
+declare const FloatingInput: React__default.FC<FloatingInputProps>;
 
 export { FloatingInput, type FloatingInputProps };

package/dist/TextFields/FloatingInput.d.ts

@@ -1,23 +1,17 @@
-import * as React from 'react';
+import React__default, { InputHTMLAttributes, CSSProperties } from 'react';
 
-interface FloatingInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  /** Label text shown above the input */
-  label: string;
-
-  /** Name attribute for the input (used for forms) */
-  name: string;
-
-  /** ID for the input and label (defaults to `name` if not provided) */
-  id?: string;
-
-  /** Placeholder text (defaults to label if not provided) */
-  placeholder?: string;
-
-  /** Optional class name to apply to the outer wrapper */
-  className?: string;
+interface FloatingInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Label text shown above the input */
+    label: string;
+    /** Name attribute for the input (used for forms) */
+    name: string;
+    /** ID for the input and label (defaults to `name` if not provided) */
+    id?: string;
+    /** Optional class name to apply to the outer wrapper */
+    className?: string;
+    /** Inline style overrides for the wrapper */
+    style?: CSSProperties;
 }
-
-declare const FloatingInput: React.FC<FloatingInputProps>;
+declare const FloatingInput: React__default.FC<FloatingInputProps>;
 
 export { FloatingInput, type FloatingInputProps };

package/dist/TextFields/FloatingInput.js

@@ -1,31 +1,7 @@
-// lib/TextFields/FloatingInput.jsx
-import React from "react";
-var FloatingInput = ({
-  label,
-  name,
-  id,
-  type = "text",
-  value,
-  onChange,
-  required = false,
-  placeholder,
-  className = "",
-  ...props
-}) => {
-  return /* @__PURE__ */ React.createElement("div", { className: `form__group field ${className}`, ...props }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type,
-      className: "form__field",
-      placeholder: placeholder || label,
-      name,
-      id: id || name,
-      value,
-      onChange,
-      required
-    }
-  ), /* @__PURE__ */ React.createElement("label", { htmlFor: id || name, className: "form__label" }, label));
-};
+import {
+  FloatingInput
+} from "../chunk-UPCMMCPQ.js";
+import "../chunk-LI4N7JWK.js";
 export {
   FloatingInput
 };