@megha-ui/react 1.2.676 → 1.2.677

package/dist/components/text-input/index.d.ts

@@ -44,6 +44,8 @@ interface TextInputProps {
     isClear?: boolean;
     clearIcon?: React.ReactNode;
     clearId?: string;
+    compactDisplay?: boolean;
+    ultraCompactDisplay?: boolean;
 }
 declare const TextInput: React.FC<TextInputProps>;
 export default TextInput;

package/dist/components/text-input/index.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { MdClose } from "react-icons/md";
-const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = () => { }, onBlur = () => { }, placeholder = "", type = "text", className = "", disabled = false, width = "100%", padding = "0.5rem", borderRadius = 4, fontSize = "0.85rem", height = "2.5rem", autoComplete = "off", maxLength, readOnly = false, required, isNumber, marginTop, marginRight, marginBottom, marginLeft, label, border = "1px solid var(--form-border-color, #dbdfe9)", backgroundColor = "transparent", icon, iconPosition = "left", asteriskColor = "red", labelFontSize, labelFontWeight, labelMarginBottom, isValid, validationErrorColor = "red", validationSuccessColor = "green", extraWrapperStyle = {}, extraInputStyle = {}, onSubmit, timeBoundBlur, wrapperClass, isClear = true, clearIcon, clearId }) => {
+import { useDensity } from "../../context/DensityContext";
+const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = () => { }, onBlur = () => { }, placeholder = "", type = "text", className = "", disabled = false, width = "100%", padding = "0.5rem", borderRadius = 4, fontSize = "0.85rem", height = "2.5rem", autoComplete = "off", maxLength, readOnly = false, required, isNumber, marginTop, marginRight, marginBottom, marginLeft, label, border = "1px solid var(--form-border-color, #dbdfe9)", backgroundColor = "transparent", icon, iconPosition = "left", asteriskColor = "red", labelFontSize, labelFontWeight, labelMarginBottom, isValid, validationErrorColor = "red", validationSuccessColor = "green", extraWrapperStyle = {}, extraInputStyle = {}, onSubmit, timeBoundBlur, wrapperClass, isClear = true, compactDisplay = false, ultraCompactDisplay = false, clearIcon, clearId, }) => {
+    const { density } = useDensity();
     const [focused, setFocused] = useState(false);
     const [error, setError] = useState(null);
     const [timeoutId, setTimeoutId] = useState(null);
@@ -14,17 +16,17 @@ const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = ()
         const newTimeoutId = setTimeout(() => {
             var _a;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-            console.log('Timebound unfocusing...');
+            console.log("Timebound unfocusing...");
         }, typingDuration);
         setTimeoutId(newTimeoutId);
     };
     useEffect(() => {
         var _a;
         if (inputRef.current && timeBoundBlur) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', handleKeyTimebound);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleKeyTimebound);
             return () => {
                 var _a;
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyTimebound);
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyTimebound);
                 if (timeoutId) {
                     clearTimeout(timeoutId); // Clean up the timeout when component is unmounted
                 }
@@ -75,9 +77,15 @@ const TextInput = ({ value = "", name, id, onChange = () => { }, onKeyDown = ()
         onChange(event);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const textInputWrapperStyle = Object.assign(Object.assign({ display: "flex", alignItems: "center", width,
-        height,
-        backgroundColor, border: error && !focused
+    const textInputWrapperStyle = Object.assign(Object.assign({ display: "flex", alignItems: "center", width, minHeight: `var(--control-min-height, ${ultraCompactDisplay
+            ? "1.5rem"
+            : compactDisplay
+                ? "2rem"
+                : density === "ultraCompact"
+                    ? "1.5rem"
+                    : density === "compact"
+                        ? "2rem"
+                        : "2.5rem"})`, backgroundColor, border: error && !focused
             ? `1px solid ${validationErrorColor}`
             : isValid
                 ? `1px solid ${validationSuccessColor}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megha-ui/react",
-  "version": "1.2.676",
+  "version": "1.2.677",
   "description": "A collection of reusable UI components for React applications, built with TypeScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",