opus-toolkit-components 1.9.5 → 1.9.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Forms/Inputs/index.d.ts +1 -0
- package/lib/main.js +6 -2
- package/lib/main.js.map +1 -1
- package/package.json +1 -1
|
@@ -29,6 +29,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
|
|
|
29
29
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
30
30
|
className?: string;
|
|
31
31
|
outerClassName?: string;
|
|
32
|
+
innerClassName?: string;
|
|
32
33
|
value?: string | number;
|
|
33
34
|
Icon?: IconComponent;
|
|
34
35
|
iconPosition?: "left" | "right";
|
package/lib/main.js
CHANGED
|
@@ -2304,6 +2304,9 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
2304
2304
|
* Extra class names applied to the outer container.
|
|
2305
2305
|
* Passing an mb-* class overrides the default mb-4 spacing.
|
|
2306
2306
|
*
|
|
2307
|
+
* @property {string} [innerClassName]
|
|
2308
|
+
* Extra class names applied directly to the native input element.
|
|
2309
|
+
*
|
|
2307
2310
|
* @property {string|number} [value]
|
|
2308
2311
|
*
|
|
2309
2312
|
* @property {IconComponent} [Icon]
|
|
@@ -2351,6 +2354,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
|
|
|
2351
2354
|
onChange,
|
|
2352
2355
|
className = "",
|
|
2353
2356
|
outerClassName = "",
|
|
2357
|
+
innerClassName = "",
|
|
2354
2358
|
value,
|
|
2355
2359
|
Icon,
|
|
2356
2360
|
// Icon component
|
|
@@ -2376,7 +2380,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
|
|
|
2376
2380
|
const resolvedErrorMessage = errorMessage || (hasLabel ? `${label} is required` : "This field is required");
|
|
2377
2381
|
const hasCustomBottomMargin = /\b(?:[a-z]+:)*mb-/.test(outerClassName);
|
|
2378
2382
|
const outerClasses = `${hasCustomBottomMargin ? "" : "mb-4"} flex flex-col ${outerClassName}`.trim();
|
|
2379
|
-
const inputClasses = `${className} flex items-center rounded-md
|
|
2383
|
+
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" : ""}`;
|
|
2380
2384
|
const iconClasses = `h-5 w-5 ${isAnimated ? "transition-transform duration-200 group-focus-within:scale-125" : ""} text-[--color-text-weak]`;
|
|
2381
2385
|
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
|
|
2382
2386
|
className: outerClasses,
|
|
@@ -2401,7 +2405,7 @@ const Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((_r
|
|
|
2401
2405
|
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input", {
|
|
2402
2406
|
id: name,
|
|
2403
2407
|
ref: ref,
|
|
2404
|
-
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`,
|
|
2408
|
+
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}`,
|
|
2405
2409
|
type: type,
|
|
2406
2410
|
name: name,
|
|
2407
2411
|
placeholder: placeholder,
|