@rufous/ui 0.1.63 → 0.2.0-beta.1

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
 };

package/dist/{chunk-AQXTOTWY.js → chunk-5DAOQ2V5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-Q5XKCUE3.js";
 import {
   useRufousTheme
-} from "./chunk-BCGCLMKA.js";
+} from "./chunk-HMG3FW2Q.js";
 
 // lib/Dialogs/BaseDialog.tsx
 import * as React from "react";
@@ -17,8 +17,8 @@ var BaseDialog = ({
   minWidth,
   minHeight,
   customButtons,
-  cancelText = "Cancel",
-  confirmText = "Ok",
+  cancelText = "CANCEL",
+  confirmText = "SUBMIT",
   submitText = "Submit",
   title = "",
   isLoading = false,
@@ -31,9 +31,10 @@ var BaseDialog = ({
   formatTitle = true,
   fullWidth = false,
   className,
-  dialogBodyStyle = {}
+  dialogBodyStyle = {},
+  size
 }) => {
-  const { theme } = useRufousTheme();
+  const { themeConfig } = useRufousTheme();
   const successBtnRef = useRef(null);
   if (!open) return null;
   const renderButtons = () => /* @__PURE__ */ React.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React.createElement(
@@ -58,17 +59,23 @@ var BaseDialog = ({
     },
     loading ? /* @__PURE__ */ React.createElement("span", { className: "spinner" }) : /* @__PURE__ */ React.createElement("span", null, confirmText)
   ));
-  return /* @__PURE__ */ React.createElement("div", { className: `dialog-overlay ${fullScreen ? "fullscreen" : ""}` }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `dialog-container ${className || ""}`,
+      className: `dialog-container ${size ? `size-${size}` : ""}  ${className || ""}`,
       style: {
-        minWidth: minWidth || (fullScreen ? "100%" : "685px"),
-        minHeight,
-        width: fullWidth ? "100%" : "auto"
+        minWidth,
+        minHeight
       }
     },
-    /* @__PURE__ */ React.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase() : title), showCloseButton && /* @__PURE__ */ React.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React.createElement(closeIcon_default, { color: theme?.customStyles?.iconColor || "#707070" }))),
+    /* @__PURE__ */ React.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1) : title), showCloseButton && /* @__PURE__ */ React.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React.createElement(
+      closeIcon_default,
+      {
+        width: 20,
+        height: 20,
+        color: themeConfig?.icon || "#666666"
+      }
+    ))),
     /* @__PURE__ */ React.createElement("div", { className: "dialog-divider" }),
     /* @__PURE__ */ React.createElement(
       "div",
@@ -81,6 +88,7 @@ var BaseDialog = ({
       },
       children
     ),
+    /* @__PURE__ */ React.createElement("div", { className: "dialog-divider" }),
     customButtons || renderButtons()
   ));
 };

package/dist/chunk-5QEWUCKT.js

@@ -0,0 +1,303 @@
+import {
+  FloatingInput
+} from "./chunk-UPCMMCPQ.js";
+import {
+  useRufousTheme
+} from "./chunk-HMG3FW2Q.js";
+import {
+  circularProgress_default
+} from "./chunk-CTBYVXFP.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
+};