@rufous/ui 0.1.63 → 0.1.64

package/dist/chunk-MGFGSPHM.js

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

@@ -3,7 +3,7 @@ import {
 } from "./chunk-Q5XKCUE3.js";
 import {
   useRufousTheme
-} from "./chunk-BCGCLMKA.js";
+} from "./chunk-CSQGNUVU.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-S7BNFVQO.js

@@ -0,0 +1,156 @@
+// lib/utils/constants.ts
+var APP_THEMES = {
+  default: {
+    name: "Default",
+    light: {
+      primary: "#707070",
+      secondary: "#e0e0e0",
+      background: "#f5f5f5",
+      surface: "#ffffff",
+      text: "#2d2d2d",
+      textSecondary: "#6f6f6f",
+      border: "#dcdcdc",
+      hover: "#d4d4d4",
+      selection: "#5a5a5a",
+      icon: "#707070",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
+    },
+    dark: {
+      primary: "#94a3b8",
+      secondary: "#475569",
+      background: "#0f172a",
+      surface: "#1e293b",
+      text: "#f1f5f9",
+      textSecondary: "#94a3b8",
+      border: "#334155",
+      hover: "#1e293b",
+      selection: "#334155",
+      icon: "#94a3b8",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
+    },
+    // Keep user's extra properties if they were intended for specific components
+    button: {
+      background: "#707070",
+      text: "#ffffff",
+      hoverBackground: "#5f5f5f",
+      disabledBackground: "#cfcfcf"
+    },
+    input: {
+      background: "#ffffff",
+      text: "#2d2d2d",
+      border: "#ccc",
+      placeholder: "#999",
+      focusBorder: "#707070"
+    },
+    card: {
+      background: "#ffffff",
+      shadow: "0 1px 3px rgba(0,0,0,0.1)"
+    },
+    sidebar: {
+      background: "#e8e8e8",
+      text: "#2d2d2d",
+      hover: "#dcdcdc"
+    },
+    success: "#4CAF50",
+    warning: "#FFC107",
+    error: "#F44336"
+  },
+  rufous: {
+    name: "Rufous",
+    light: {
+      primary: "#a41b06",
+      secondary: "#8b1605",
+      background: "#ffffff",
+      surface: "#ffffff",
+      text: "#2d2d2d",
+      textSecondary: "#666666",
+      border: "#e0e0e0",
+      hover: "#fff5f5",
+      selection: "#fce4ec",
+      icon: "#a41b06",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
+    },
+    dark: {
+      primary: "#dc2626",
+      secondary: "#a41b06",
+      background: "#121212",
+      surface: "#1e1e1e",
+      text: "#f5f5f5",
+      textSecondary: "#b0b0b0",
+      border: "#333333",
+      hover: "#2d1a1a",
+      selection: "#4a1212",
+      icon: "#dc2626",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
+    }
+  }
+  // slate: {
+  //   name: "Slate",
+  //   light: {
+  //     primary: "#334155",
+  //     secondary: "#475569",
+  //     background: "#f8fafc",
+  //     surface: "#ffffff",
+  //     text: "#0f172a",
+  //     textSecondary: "#64748b",
+  //     border: "#e2e8f0",
+  //     hover: "#f1f5f9",
+  //     selection: "#e0f2fe",
+  //     icon: "#334155",
+  //     get customStyles() {
+  //       return {
+  //         iconColor: this.icon,
+  //         primaryColor: this.primary,
+  //         secondaryColor: this.secondary,
+  //       };
+  //     },
+  //   },
+  //   dark: {
+  //     primary: "#94a3b8",
+  //     secondary: "#64748b",
+  //     background: "#0f172a",
+  //     surface: "#1e293b",
+  //     text: "#f1f5f9",
+  //     textSecondary: "#94a3b8",
+  //     border: "#334155",
+  //     hover: "#1e293b",
+  //     selection: "#0c4a6e",
+  //     icon: "#94a3b8",
+  //     get customStyles() {
+  //       return {
+  //         iconColor: this.icon,
+  //         primaryColor: this.primary,
+  //         secondaryColor: this.secondary,
+  //       };
+  //     },
+  //   },
+  // },
+};
+
+export {
+  APP_THEMES
+};

package/dist/chunk-UPCMMCPQ.js

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

package/dist/chunk-X357WQOT.js

@@ -0,0 +1,29 @@
+// lib/CheckBoxes/CheckBox.jsx
+import React from "react";
+var Checkbox = ({
+  id,
+  label,
+  checked,
+  onChange,
+  disabled = false,
+  className = "",
+  style
+}) => {
+  const handleChange = (e) => {
+    if (onChange) onChange(e.target.checked);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "checkbox-wrapper-13" }, /* @__PURE__ */ React.createElement("label", { className: `${className}`, style }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      id,
+      type: "checkbox",
+      checked,
+      onChange: handleChange,
+      disabled
+    }
+  ), label && /* @__PURE__ */ React.createElement("span", { className: "checkbox-label" }, label)));
+};
+
+export {
+  Checkbox
+};

package/dist/{chunk-7YKG3WYS.js → chunk-YRLN3TBF.js}

@@ -1,6 +1,6 @@
 import {
   circularProgress_default
-} from "./chunk-YRFUVQDN.js";
+} from "./chunk-CTBYVXFP.js";
 
 // lib/Buttons/submitButton.tsx
 import * as React from "react";