opus-toolkit-components 0.3.3 → 0.3.4

package/lib/{main.5f4fb2e84b8e3334491d.js → main.83972011c52c05c2a738.js}

@@ -779,22 +779,38 @@ const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
     errorMessage = `${label} is required`,
     onChange,
     className = '',
-    value
+    value,
+    Icon,
+    // Icon component
+    iconPosition = 'left',
+    // Icon position: left or right
+    isAnimated = false // Add animation class when focused
   } = _ref;
-  const inputClasses = `${className} rounded-md bg-white border border-greyLight500 px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-greyLight500' : 'border-utilRed1000'}`;
+  const inputClasses = `${className} flex items-center rounded-md bg-white border ${isValid ? 'border-greyLight500' : 'border-utilRed1000'} px-4 text-md font-normal text-gray-900`;
+  const iconClasses = `h-5 w-5 ${isAnimated ? 'transition-transform duration-200 group-focus-within:scale-125' : ''} text-gray-400`;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
   }, /*#__PURE__*/external_react_default().createElement("label", {
-    className: "text-greyLight1000"
-  }, label), /*#__PURE__*/external_react_default().createElement("input", {
+    className: "text-greyLight1000 mb-1"
+  }, label), /*#__PURE__*/external_react_default().createElement("div", {
+    className: `${inputClasses} relative`
+  }, Icon && iconPosition === 'left' && /*#__PURE__*/external_react_default().createElement("span", {
+    className: "absolute left-3 flex items-center pointer-events-none"
+  }, /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: iconClasses
+  })), /*#__PURE__*/external_react_default().createElement("input", {
     ref: ref,
-    className: inputClasses,
+    className: `w-full ${Icon ? iconPosition === 'left' ? 'pl-10' : 'pr-10' : ''} bg-transparent border-none focus:ring-0`,
     type: type,
     name: name,
     placeholder: placeholder,
     onChange: onChange,
     value: value
-  }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
+  }), Icon && iconPosition === 'right' && /*#__PURE__*/external_react_default().createElement("span", {
+    className: "absolute right-3 flex items-center pointer-events-none"
+  }, /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: iconClasses
+  }))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-utilRed1000 text-sm"
   }, errorMessage));
 });
@@ -9146,4 +9162,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.5f4fb2e84b8e3334491d.js.map
+//# sourceMappingURL=main.83972011c52c05c2a738.js.map