opus-toolkit-components 1.9.5 → 1.9.6

package/lib/components/Forms/Inputs/index.d.ts

@@ -29,6 +29,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   className?: string;
   outerClassName?: string;
+  innerClassName?: string;
   value?: string | number;
   Icon?: IconComponent;
   iconPosition?: "left" | "right";

package/lib/main.js

@@ -2304,6 +2304,9 @@ __webpack_require__.r(__webpack_exports__);
  *   Extra class names applied to the outer container.
  *   Passing an mb-* class overrides the default mb-4 spacing.
  *
+ * @property {string} [innerClassName]
+ *   Extra class names applied directly to the native input element.
+ *
  * @property {string|number} [value]
  *
  * @property {IconComponent} [Icon]
@@ -2351,6 +2354,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
     onChange,
     className = "",
     outerClassName = "",
+    innerClassName = "",
     value,
     Icon,
     // Icon component
@@ -2376,7 +2380,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
   const resolvedErrorMessage = errorMessage || (hasLabel ? `${label} is required` : "This field is required");
   const hasCustomBottomMargin = /\b(?:[a-z]+:)*mb-/.test(outerClassName);
   const outerClasses = `${hasCustomBottomMargin ? "" : "mb-4"} flex flex-col ${outerClassName}`.trim();
-  const inputClasses = `${className} flex items-center rounded-md bg-[--color-input-bg] border ${isValid ? "border-[--color-stroke]" : "border-utilRed1000"} text-md font-normal text-[--color-text-strong] ${disabled ? "opacity-50 cursor-not-allowed" : ""}`;
+  const inputClasses = `${className} flex items-center rounded-md border ${isValid ? "border-[--color-stroke]" : "border-utilRed1000"} text-md font-normal text-[--color-text-strong] ${disabled ? "opacity-50 cursor-not-allowed" : ""}`;
   const iconClasses = `h-5 w-5 ${isAnimated ? "transition-transform duration-200 group-focus-within:scale-125" : ""} text-[--color-text-weak]`;
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
     className: outerClasses,
@@ -2401,7 +2405,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", {
         id: name,
         ref: ref,
-        className: `w-full ${Icon ? iconPosition === "left" ? "pl-10" : "pr-10" : ""} rounded-md border-none bg-[--color-input-bg] px-3 py-2 focus:outline-none focus:ring-0`,
+        className: `w-full ${Icon ? iconPosition === "left" ? "pl-10" : "pr-10" : ""} rounded-md border-none bg-[--color-input-bg] px-3 py-2 focus:outline-none focus:ring-0 ${innerClassName}`,
         type: type,
         name: name,
         placeholder: placeholder,