@rufous/ui 0.1.63 → 0.2.0-beta.1

package/dist/Editors/index.d.cts

@@ -0,0 +1,2 @@
+export { MentionItem, default as RichTextEditor, RichTextEditorProps } from './RichTextEditor.cjs';
+import 'react';

package/dist/Editors/index.d.ts

@@ -0,0 +1,2 @@
+export { MentionItem, default as RichTextEditor, RichTextEditorProps } from './RichTextEditor.js';
+import 'react';

package/dist/Editors/index.js

@@ -0,0 +1,8 @@
+import "../chunk-GJGRMMAQ.js";
+import {
+  RichTextEditor
+} from "../chunk-66HHM7VI.js";
+import "../chunk-LI4N7JWK.js";
+export {
+  RichTextEditor
+};

package/dist/Progress/circularProgress.cjs

@@ -33,7 +33,7 @@ __export(circularProgress_exports, {
 });
 module.exports = __toCommonJS(circularProgress_exports);
 var React = __toESM(require("react"), 1);
-var CircularProgess = ({
+var CircularProgress = ({
   size = 50,
   color = "#a81c08",
   ...props
@@ -57,4 +57,4 @@ var CircularProgess = ({
     ))
   );
 };
-var circularProgress_default = CircularProgess;
+var circularProgress_default = CircularProgress;

package/dist/Progress/circularProgress.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-interface CircularProgessProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: number;
     color?: string;
 }
-declare const CircularProgess: React.FC<CircularProgessProps>;
+declare const CircularProgress: React.FC<CircularProgressProps>;
 
-export { type CircularProgessProps, CircularProgess as default };
+export { type CircularProgressProps, CircularProgress as default };

package/dist/Progress/circularProgress.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-interface CircularProgessProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: number;
     color?: string;
 }
-declare const CircularProgess: React.FC<CircularProgessProps>;
+declare const CircularProgress: React.FC<CircularProgressProps>;
 
-export { type CircularProgessProps, CircularProgess as default };
+export { type CircularProgressProps, CircularProgress as default };

package/dist/Progress/circularProgress.js

@@ -1,6 +1,7 @@
 import {
   circularProgress_default
-} from "../chunk-YRFUVQDN.js";
+} from "../chunk-CTBYVXFP.js";
+import "../chunk-LI4N7JWK.js";
 export {
   circularProgress_default as default
 };

package/dist/TextFields/AddressLookup.cjs

@@ -0,0 +1,390 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// lib/TextFields/AddressLookup.tsx
+var AddressLookup_exports = {};
+__export(AddressLookup_exports, {
+  default: () => AddressLookup_default
+});
+module.exports = __toCommonJS(AddressLookup_exports);
+var import_react3 = __toESM(require("react"), 1);
+var import_axios = __toESM(require("axios"), 1);
+
+// lib/Contexts/rufousThemeProvider.tsx
+var import_react = __toESM(require("react"), 1);
+var RufousThemeContext = (0, import_react.createContext)(null);
+var useRufousTheme = () => (0, import_react.useContext)(RufousThemeContext);
+
+// lib/TextFields/AddressLookup.tsx
+var import_country_state_city = require("country-state-city");
+
+// lib/TextFields/FloatingInput.tsx
+var import_react2 = __toESM(require("react"), 1);
+var FloatingInput = ({
+  label,
+  name,
+  id,
+  type = "text",
+  value,
+  onChange,
+  required = false,
+  placeholder,
+  className = "",
+  style,
+  ...props
+}) => {
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: `form__group field ${className}`, style }, /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type,
+      className: "form__field",
+      placeholder: " ",
+      name,
+      id: id || name,
+      value,
+      onChange,
+      required,
+      ...props
+    }
+  ), /* @__PURE__ */ import_react2.default.createElement("label", { htmlFor: id || name, className: "form__label" }, label));
+};
+
+// lib/Progress/circularProgress.tsx
+var React3 = __toESM(require("react"), 1);
+var CircularProgress = ({
+  size = 50,
+  color = "#a81c08",
+  ...props
+}) => {
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      className: "rufous-loader",
+      style: { width: size, height: size },
+      ...props
+    },
+    /* @__PURE__ */ React3.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React3.createElement(
+      "circle",
+      {
+        className: "rufous-loader-circle",
+        cx: "50",
+        cy: "50",
+        r: "45",
+        stroke: color
+      }
+    ))
+  );
+};
+var circularProgress_default = CircularProgress;
+
+// lib/TextFields/AddressLookup.tsx
+var AddressLookup = ({
+  value = {},
+  onChange = () => {
+  },
+  label = "Address",
+  error = {},
+  size = "medium",
+  sx = {},
+  layout = "stack",
+  required = false,
+  token = ""
+}) => {
+  const { theme } = useRufousTheme();
+  const [suggestions, setSuggestions] = (0, import_react3.useState)([]);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [showSuggestions, setShowSuggestions] = (0, import_react3.useState)(false);
+  const [googleFields, setGoogleFields] = (0, import_react3.useState)({
+    country: false,
+    state: false,
+    city: false,
+    pincode: false
+  });
+  const debounceTimeout = (0, import_react3.useRef)(null);
+  const containerRef = (0, import_react3.useRef)(null);
+  const apiKey = token || "";
+  const countries = import_country_state_city.Country.getAllCountries();
+  const [states, setStates] = (0, import_react3.useState)([]);
+  const [cities, setCities] = (0, import_react3.useState)([]);
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (value.country || value.state || value.city || value.pincode) {
+      setGoogleFields({
+        country: !!value.country,
+        state: !!value.state,
+        city: !!value.city,
+        pincode: !!value.pincode
+      });
+    }
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (value.country) {
+      const country = countries.find((c) => c.name === value.country);
+      if (country) {
+        const stateList = import_country_state_city.State.getStatesOfCountry(country.isoCode);
+        setStates(stateList);
+      } else {
+        setStates([]);
+      }
+    } else {
+      setStates([]);
+    }
+  }, [value.country]);
+  (0, import_react3.useEffect)(() => {
+    if (value.state && value.country) {
+      const country = countries.find((c) => c.name === value.country);
+      if (country) {
+        const state = import_country_state_city.State.getStatesOfCountry(country.isoCode).find((s) => s.name === value.state);
+        if (state) {
+          const cityList = import_country_state_city.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 import_axios.default.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 import_axios.default.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__ */ import_react3.default.createElement("div", { className: "address-lookup-container", style: sx, ref: containerRef }, /* @__PURE__ */ import_react3.default.createElement("div", { className: `address-lookup-grid address-lookup-grid-${layout}` }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "address-lookup-grid-item col-l1" }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("div", { className: "loading-indicator" }, /* @__PURE__ */ import_react3.default.createElement(circularProgress_default, { size: 20 })), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ import_react3.default.createElement("div", { className: "autocomplete-dropdown" }, suggestions.map((option, idx) => /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      key: idx,
+      className: "autocomplete-option",
+      onClick: () => {
+        const mainText = option?.placePrediction?.structuredFormat?.mainText?.text || "";
+        handleChange("addressLine1", mainText);
+        fetchPlaceDetails(option.placePrediction.placeId, mainText);
+      }
+    },
+    /* @__PURE__ */ import_react3.default.createElement("div", { className: "autocomplete-main-text" }, option?.placePrediction?.structuredFormat?.mainText?.text),
+    /* @__PURE__ */ import_react3.default.createElement("div", { className: "autocomplete-secondary-text" }, option?.placePrediction?.structuredFormat?.secondaryText?.text)
+  ))), error.addressLine1 && /* @__PURE__ */ import_react3.default.createElement("div", { className: "field-error-text" }, error.addressLine1)), layout === "compact" && /* @__PURE__ */ import_react3.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react3.default.createElement(
+    FloatingInput,
+    {
+      label: "Address Line 2",
+      name: "addressLine2",
+      value: value.addressLine2 || "",
+      onChange: (e) => handleChange("addressLine2", e.target.value)
+    }
+  )), layout !== "compact" && /* @__PURE__ */ import_react3.default.createElement("div", { className: "address-lookup-grid-item col-l2" }, /* @__PURE__ */ import_react3.default.createElement(
+    FloatingInput,
+    {
+      label: "Address Line 2",
+      name: "addressLine2",
+      value: value.addressLine2 || "",
+      onChange: (e) => handleChange("addressLine2", e.target.value)
+    }
+  )), /* @__PURE__ */ import_react3.default.createElement("div", { className: "address-lookup-grid-item col-country" }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("datalist", { id: "countries-list" }, countries.map((c) => /* @__PURE__ */ import_react3.default.createElement("option", { key: c.isoCode, value: c.name }))), error.country && /* @__PURE__ */ import_react3.default.createElement("div", { className: "field-error-text" }, error.country)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "address-lookup-grid-item col-state" }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("datalist", { id: "states-list" }, states.map((s) => /* @__PURE__ */ import_react3.default.createElement("option", { key: s.isoCode, value: s.name }))), error.state && /* @__PURE__ */ import_react3.default.createElement("div", { className: "field-error-text" }, error.state)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "address-lookup-grid-item col-city" }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("datalist", { id: "cities-list" }, cities.map((c, i) => /* @__PURE__ */ import_react3.default.createElement("option", { key: i, value: c.name }))), error.city && /* @__PURE__ */ import_react3.default.createElement("div", { className: "field-error-text" }, error.city)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "address-lookup-grid-item col-pin" }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("div", { className: "field-error-text" }, error.pincode))));
+};
+var AddressLookup_default = AddressLookup;

package/dist/TextFields/AddressLookup.d.cts

@@ -0,0 +1,49 @@
+import React__default, { CSSProperties } from 'react';
+
+interface AddressValue {
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    state?: string;
+    country?: string;
+    pincode?: string;
+}
+interface AddressError {
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    state?: string;
+    country?: string;
+    pincode?: string;
+}
+interface AddressLookupProps {
+    /** Current address value object */
+    value?: AddressValue;
+    /** Callback fired when any address field changes */
+    onChange?: (value: AddressValue) => void;
+    /** Label for the primary address search field */
+    label?: string;
+    /** Validation error messages per field */
+    error?: AddressError;
+    /** Size variant */
+    size?: "small" | "medium" | "large";
+    /** Inline style overrides for the container */
+    sx?: CSSProperties;
+    /** Layout mode: "stack" | "compact" | "grid" */
+    layout?: "stack" | "compact" | "grid";
+    /** Whether address fields are required */
+    required?: boolean;
+    /** Google Places API Key */
+    token?: string;
+}
+/**
+ * AddressLookup Component (MUI-Free Version)
+ * @param value - { addressLine1, addressLine2, city, state, country, pincode }
+ * @param onChange - Returns the full updated object
+ * @param layout - "stack" | "compact" | "grid"
+ * @param sx - Style overrides for the container
+ * @param token - Google Places API Key
+ */
+declare const AddressLookup: ({ value, onChange, label, error, size, sx, layout, required, token, }: AddressLookupProps) => React__default.JSX.Element;
+
+export { type AddressError, type AddressLookupProps, type AddressValue, AddressLookup as default };

package/dist/TextFields/AddressLookup.d.ts

@@ -0,0 +1,49 @@
+import React__default, { CSSProperties } from 'react';
+
+interface AddressValue {
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    state?: string;
+    country?: string;
+    pincode?: string;
+}
+interface AddressError {
+    addressLine1?: string;
+    addressLine2?: string;
+    city?: string;
+    state?: string;
+    country?: string;
+    pincode?: string;
+}
+interface AddressLookupProps {
+    /** Current address value object */
+    value?: AddressValue;
+    /** Callback fired when any address field changes */
+    onChange?: (value: AddressValue) => void;
+    /** Label for the primary address search field */
+    label?: string;
+    /** Validation error messages per field */
+    error?: AddressError;
+    /** Size variant */
+    size?: "small" | "medium" | "large";
+    /** Inline style overrides for the container */
+    sx?: CSSProperties;
+    /** Layout mode: "stack" | "compact" | "grid" */
+    layout?: "stack" | "compact" | "grid";
+    /** Whether address fields are required */
+    required?: boolean;
+    /** Google Places API Key */
+    token?: string;
+}
+/**
+ * AddressLookup Component (MUI-Free Version)
+ * @param value - { addressLine1, addressLine2, city, state, country, pincode }
+ * @param onChange - Returns the full updated object
+ * @param layout - "stack" | "compact" | "grid"
+ * @param sx - Style overrides for the container
+ * @param token - Google Places API Key
+ */
+declare const AddressLookup: ({ value, onChange, label, error, size, sx, layout, required, token, }: AddressLookupProps) => React__default.JSX.Element;
+
+export { type AddressError, type AddressLookupProps, type AddressValue, AddressLookup as default };

package/dist/TextFields/AddressLookup.js

@@ -0,0 +1,11 @@
+import {
+  AddressLookup_default
+} from "../chunk-5QEWUCKT.js";
+import "../chunk-UPCMMCPQ.js";
+import "../chunk-HMG3FW2Q.js";
+import "../chunk-YXPBXCY5.js";
+import "../chunk-CTBYVXFP.js";
+import "../chunk-LI4N7JWK.js";
+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 };