@rufous/ui 0.2.0-beta.0 → 0.2.0-beta.1

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

package/dist/{chunk-WNZLBFLQ.js → chunk-HMG3FW2Q.js}

@@ -1,6 +1,6 @@
 import {
   APP_THEMES
-} from "./chunk-QGXXOQJF.js";
+} from "./chunk-YXPBXCY5.js";
 
 // lib/Contexts/rufousThemeProvider.tsx
 import React, {
@@ -23,26 +23,45 @@ var RufousThemeProvider = ({ children }) => {
   const themeVars = useMemo(() => {
     const config = APP_THEMES[colorScheme][mode];
     return {
+      "--rufous-primary-color": config.primary,
+      "--rufous-secondary-color": config.secondary,
+      "--rufous-background-color": config.background,
+      "--rufous-surface-color": config.surface,
+      "--rufous-text-color": config.text,
+      "--rufous-text-secondary": config.textSecondary,
+      "--rufous-border-color": config.border,
+      "--rufous-hover-color": config.hover,
+      "--rufous-selection-color": config.selection,
+      "--rufous-icon-color": config.icon,
+      // Keep legacy variables for backward compatibility during transition
       "--primary-color": config.primary,
-      "--secondary-color": config.secondary,
       "--background-color": config.background,
-      "--surface-color": config.surface,
       "--text-color": config.text,
-      "--text-secondary": config.textSecondary,
       "--border-color": config.border,
-      "--hover-color": config.hover,
-      "--selection-color": config.selection,
-      "--icon-color": config.icon
+      "--surface-color": config.surface
     };
   }, [colorScheme, mode]);
   const toggleMode = () => {
     const newMode = mode === "light" ? "dark" : "light";
     setMode(newMode);
-    localStorage.setItem("themeMode", newMode);
   };
   const changeScheme = (scheme) => {
-    setColorScheme(scheme);
-    localStorage.setItem("colorScheme", scheme);
+    if (APP_THEMES[scheme]) {
+      setColorScheme(scheme);
+    }
+  };
+  const saveTheme = () => {
+    localStorage.setItem("colorScheme", colorScheme);
+    localStorage.setItem("themeMode", mode);
+  };
+  const updateSettings = (settings) => {
+    if (!settings) return;
+    if (settings.theme && APP_THEMES[settings.theme]) {
+      setColorScheme(settings.theme);
+    }
+    if (settings.mode) {
+      setMode(settings.mode);
+    }
   };
   return /* @__PURE__ */ React.createElement(
     RufousThemeContext.Provider,
@@ -52,6 +71,11 @@ var RufousThemeProvider = ({ children }) => {
         mode,
         toggleMode,
         changeScheme,
+        previewTheme: changeScheme,
+        updateSettings,
+        saveTheme,
+        theme: APP_THEMES[colorScheme][mode],
+        // Direct access to current theme config
         themeConfig: APP_THEMES[colorScheme][mode]
       }
     },

package/dist/{chunk-X357WQOT.js → chunk-NEGQXBQV.js}

@@ -1,4 +1,4 @@
-// lib/CheckBoxes/CheckBox.jsx
+// lib/CheckBoxes/CheckBox.tsx
 import React from "react";
 var Checkbox = ({
   id,

package/dist/{chunk-QGXXOQJF.js → chunk-YXPBXCY5.js}

@@ -12,7 +12,14 @@ var APP_THEMES = {
       border: "#e0e0e0",
       hover: "#fff5f5",
       selection: "#fce4ec",
-      icon: "#a41b06"
+      icon: "#a41b06",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     },
     dark: {
       primary: "#dc2626",
@@ -24,7 +31,14 @@ var APP_THEMES = {
       border: "#333333",
       hover: "#2d1a1a",
       selection: "#4a1212",
-      icon: "#dc2626"
+      icon: "#dc2626",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     }
   },
   slate: {
@@ -39,7 +53,14 @@ var APP_THEMES = {
       border: "#e2e8f0",
       hover: "#f1f5f9",
       selection: "#e0f2fe",
-      icon: "#334155"
+      icon: "#334155",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     },
     dark: {
       primary: "#94a3b8",
@@ -51,7 +72,14 @@ var APP_THEMES = {
       border: "#334155",
       hover: "#1e293b",
       selection: "#0c4a6e",
-      icon: "#94a3b8"
+      icon: "#94a3b8",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     }
   }
 };

package/dist/icons/index.js

@@ -1,4 +1,7 @@
 import "../chunk-E5RTHYCU.js";
+import {
+  unsubscribeIcon_default
+} from "../chunk-EZI3QGYJ.js";
 import {
   uploadIcon_default
 } from "../chunk-QTGVW36I.js";
@@ -11,6 +14,9 @@ import {
 import {
   workItemIcon_default
 } from "../chunk-QJPQC544.js";
+import {
+  softSkillsIcon_default
+} from "../chunk-3Y6QBRGD.js";
 import {
   subscribeIcon_default
 } from "../chunk-JVN6QVET.js";
@@ -33,8 +39,8 @@ import {
   unArchivedIcon_default
 } from "../chunk-ZJAV3FEQ.js";
 import {
-  unsubscribeIcon_default
-} from "../chunk-EZI3QGYJ.js";
+  questionTypeSingleIcon_default
+} from "../chunk-Q4DHI3B5.js";
 import {
   refreshIcon_default
 } from "../chunk-YTVUM76D.js";
@@ -57,8 +63,8 @@ import {
   sidebarIcon_default
 } from "../chunk-DK3DA5LH.js";
 import {
-  softSkillsIcon_default
-} from "../chunk-3Y6QBRGD.js";
+  qualificationsIcon_default
+} from "../chunk-UTBCFDOX.js";
 import {
   questionStatusAllIcon_default
 } from "../chunk-4Y7SQ5EP.js";
@@ -81,8 +87,8 @@ import {
   questionTypeMultipleIcon_default
 } from "../chunk-Z7USRFM2.js";
 import {
-  questionTypeSingleIcon_default
-} from "../chunk-Q4DHI3B5.js";
+  industryIcon_default
+} from "../chunk-4BTXGP7U.js";
 import {
   invoiceIcon_default
 } from "../chunk-6SUKO6QW.js";
@@ -105,8 +111,8 @@ import {
   projectIcon_default
 } from "../chunk-DLJHWFNG.js";
 import {
-  qualificationsIcon_default
-} from "../chunk-UTBCFDOX.js";
+  editChatIcon_default
+} from "../chunk-XCE3QE6Q.js";
 import {
   editIcon_default
 } from "../chunk-H372BAXA.js";
@@ -126,8 +132,8 @@ import {
   inactiveGroupIcon_default
 } from "../chunk-77QDKDFI.js";
 import {
-  industryIcon_default
-} from "../chunk-4BTXGP7U.js";
+  copyIcon_default
+} from "../chunk-6FEUS4CQ.js";
 import {
   difficultyAllIcon_default
 } from "../chunk-5XKFPQLH.js";
@@ -149,9 +155,6 @@ import {
 import {
   downloadPdfIcon_default
 } from "../chunk-N26C33E6.js";
-import {
-  editChatIcon_default
-} from "../chunk-XCE3QE6Q.js";
 import {
   activateUserIcon_default
 } from "../chunk-AH6RCYDL.js";
@@ -164,9 +167,6 @@ import {
 import {
   closeIcon_default
 } from "../chunk-Q5XKCUE3.js";
-import {
-  copyIcon_default
-} from "../chunk-6FEUS4CQ.js";
 import "../chunk-LI4N7JWK.js";
 export {
   activateUserIcon_default as ActivateUserIcon,