ehscan-react-components 0.1.18 → 0.1.20

package/dist/TextArea.js

@@ -40,5 +40,5 @@ export const TextArea = ({ id, tabIndex, label, value, editable = true, required
             textareaRef.current.style.height = "auto";
         }
     }, [onChange]);
-    return (_jsxs("div", { className: "ext-textarea-wrapper", children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("button", { type: "button", className: "form-container-clear", onClick: clear, "aria-label": `Clear ${label !== null && label !== void 0 ? label : "text area"}`, children: "clear" }))] })] })), _jsx("div", { className: "ext-textarea-box", children: _jsx("textarea", { id: textareaId, tabIndex: tabIndex, ref: textareaRef, value: value !== null && value !== void 0 ? value : "", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "...", maxLength: maxLength, onChange: handleInputChange, onFocus: handleFocus, onBlur: setHeight, className: `ext-textarea${required && value === "" ? " highlight" : ""}`, rows: 1, spellCheck: false, readOnly: !editable, "aria-required": required, "aria-label": label }) })] }));
+    return (_jsxs("div", { className: "ext-textarea-wrapper", children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("div", { className: "ext-textarea-svg-close", onClick: clear, "aria-label": `Clear ${label !== null && label !== void 0 ? label : "text area"}`, children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "8", y1: "8", x2: "16", y2: "16", stroke: "#333", "stroke-width": "2", "stroke-linecap": "round" }), _jsx("line", { x1: "16", y1: "8", x2: "8", y2: "16", stroke: "#333", "stroke-width": "2", "stroke-linecap": "round" })] }) }))] })] })), _jsx("div", { className: "ext-textarea-box", children: _jsx("textarea", { id: textareaId, tabIndex: tabIndex, ref: textareaRef, value: value !== null && value !== void 0 ? value : "", placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "...", maxLength: maxLength, onChange: handleInputChange, onFocus: handleFocus, onBlur: setHeight, className: `ext-textarea${required && value === "" ? " highlight" : ""}`, rows: 1, spellCheck: false, readOnly: !editable, "aria-required": required, "aria-label": label }) })] }));
 };

package/dist/style/input.css

@@ -25,7 +25,7 @@
 }
 
 .ext-textarea-box {
-    background-color: blueviolet;
+    background-color: var(--ext-textarea-box-bck-color, transparent);
     border-radius: 10px;
     display: flex;
     position: relative;
@@ -54,16 +54,6 @@ textarea::placeholder {
     padding: 0
 }
 
-input[type="text"],
-input[type="email"],
-textarea {
-    color: var(--input-clr);
-    text-align: var(--input-align);
-    background-color: var(--d-input-bck-clr);
-    outline: none;
-    border: none;
-}
-
 textarea {
     resize: none;
     overflow: hidden;
@@ -83,16 +73,17 @@ input:-webkit-autofill:active {
 
 /* 🌐 Wrapper */
 .ext-textarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 }
 
 /* 🏷️ Label Area */
 .ext-textarea-label {
-  display: flex;
-  justify-content: center;
-  align-items:center;
+    display: flex;
+    justify-content: center;
+    align-items:center;
+    height: 22px;
 }
 
 /* 🏷️ Label Title */
@@ -104,42 +95,43 @@ input:-webkit-autofill:active {
 
 /* ⚙️ Label Controls (counter + clear) */
 .ext-textarea-label-btns {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
 /* 🔢 Character Count */
 .form-container-count {
-  font-size: 0.85rem;
-  color: #666;
+    font-size: 0.85rem;
+    color: #666;
 }
 
 /* ❌ Clear Button */
 .form-container-clear {
-  border: none;
-  background: none;
-  color: #007aff;
-  cursor: pointer;
-  font-size: 0.85rem;
+    border: none;
+    background: none;
+    color: #007aff;
+    cursor: pointer;
+    font-size: 0.85rem;
 }
 
 /* ✏️ Textarea Box */
 .ext-textarea-box {
-  width: 100%;
+    width: 100%;
 }
 
 .ext-textarea {
-    font-size: var(--input-txt-size);
+    font-size: var(--ext-textarea-input-txt-size, 14px);
+    background-color: var(--ext-textarea-input-bck-clr, darkblue);
+    color: var(--ext-textarea-input-clr, red);
+    font-weight: var(--ext-textarea-d-font-weight, 400);
+    border-radius: var(--ext-textarea-border-radius, 20px);
     border: none;
     outline: none;
     width: 100%;
-    font-weight: var(--d-font-weight);
     display: grid;
     justify-content: left;
     align-items: center;
-    background-color: transparent;
-    color: var(--input-clr);
     box-sizing: border-box;
     resize: none;
     overflow: hidden;
@@ -147,9 +139,42 @@ input:-webkit-autofill:active {
     line-height: 1.5;
 }
 
-/* Required Highlight */
+.ext-textarea:focus{
+    background-color: var(--ext-textarea-focus-bck-clr);
+    border-radius: var(--ext-textarea-border-radius);
+}
+
+input[type="text"],
+input[type="email"],
+textarea {
+    color: var(--ext-textarea-input-clr);
+    text-align: left;
+    background-color: var(--ext-textarea-input-bck-clr);
+    outline: none;
+    border: none;
+}
+
 .ext-textarea.highlight {
-    border-color: green;
-    border-width: 3px;
-    border-style: solid;
+  border: 1px solid #ccc;       /* normal border */
+  outline: none;                /* remove default focus outline */
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+/* Highlight on focus */
+.ext-textarea.highlight:focus {
+  border-color: #4A90E2;        /* optional: change border color */
+  box-shadow: 0 0 8px rgba(74, 144, 226, 0.6);  /* glow effect */
+}
+
+.ext-textarea-svg-close{
+    background-color: #007aff;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ext-textarea-svg-close:hover{
+    cursor: pointer;
+    background-color: aquamarine;
 }

package/dist/style/window.css

@@ -25,9 +25,10 @@
 /* Header */
 .ext-window-header {
   border-radius: var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px) 0 0;
-  background-color: var(--ext-window-header-bck-color, white);
+  background-color: var(--ext-window-header-bck-color, transparent);
   height: var(--ext-window-header-height, 50px);
   cursor: pointer;
+  display: flex;
 }
 
 /* Body */
@@ -41,6 +42,7 @@
 .ext-window-footer {
   background-color: var(--ext-window-footer-bck, transparent);
   height: var(--ext-window-footer-height, 50px);
+  border-radius: 0 0 var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px);
 }
 
 /* Scrollbars for WebKit */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",