bianic-ui 2.5.0 → 2.5.1-beta.1

package/dist/cjs/types/components/Forms/TextArea/index.d.ts

@@ -13,8 +13,9 @@ export interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'> {
     value?: string;
     readOnly?: boolean;
     autoComplete?: string;
+    isValid?: boolean | null;
 }
-declare function TextArea({ descText, disabled, id, size, label, placeholder, required, rows, maxLength, value, readOnly, autoComplete, ...props }: TextAreaProps): React.JSX.Element;
+declare function TextArea({ descText, disabled, id, size, label, placeholder, required, rows, maxLength, value, readOnly, autoComplete, isValid, ...props }: TextAreaProps): React.JSX.Element;
 declare namespace TextArea {
     var defaultProps: {
         disabled: boolean;

package/dist/esm/index.js

@@ -1550,10 +1550,10 @@ var ContextualButton = forwardRef(function (_a, ref) {
             : 'text-primary-white'
         : textColorConfig[variant];
     var stateColor = stateColorConfig[isSelected ? 'selected' : 'default'];
-    return (React.createElement("button", __assign({ ref: ref, className: "bianic-contextual-button box-border flex flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
+    return (React.createElement("button", __assign({ ref: ref, className: "bianic-contextual-button box-border flex min-h-[22px] flex-row items-center rounded-radius-sm border border-transparent p-[1px] outline-none ".concat(stateColor, " ").concat(textColor) }, props, { disabled: disabled }),
         icon,
-        label && (React.createElement("div", { className: "label flex max-h-[46px] items-center px-[5px] text-[12px] leading-none" },
-            React.createElement("span", { className: "mr-0.5" }, label),
+        label && (React.createElement("div", { className: "label flex max-h-[46px] items-center gap-x-0.5 px-[5px] text-[12px] leading-none" },
+            React.createElement("span", null, label),
             actionElement))));
 });
 
@@ -2238,7 +2238,7 @@ var styleConfig = {
         iconStyle: '',
     },
     text: {
-        fieldStyle: 'pe-8',
+        fieldStyle: '',
         iconStyle: 'pointer-events-none',
     },
     number: {
@@ -2299,9 +2299,13 @@ var TextInput = forwardRef(function (_a, ref) {
     return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container group/form flex w-full flex-col gap-y-2 text-bia-black" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "relative w-full ".concat(disabledClass) },
-            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:cursor-not-allowed disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref, style: { paddingRight: "".concat(10 + Number(iconSize), "px") } }, props)),
-            React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
-        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 whitespace-nowrap text-xs ".concat(descColor) },
+            React.createElement("input", __assign({ className: "bianic-text-input bianic-fgc-target w-full rounded read-only:pointer-events-none read-only:border-bia-grey-light-50 hover:rounded-b-none focus:rounded-b-none focus-visible:outline-none disabled:cursor-not-allowed disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength, autoComplete: autoComplete, ref: ref, style: {
+                    paddingRight: iconElement
+                        ? "".concat(10 + Number(iconSize), "px")
+                        : undefined,
+                } }, props)),
+            iconElement && (React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement))),
+        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs ".concat(descColor) },
             React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
@@ -2378,17 +2382,31 @@ var sizeConfig$a = {
 };
 
 function TextArea(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, required = _a.required, rows = _a.rows, _e = _a.maxLength, maxLength = _e === void 0 ? undefined : _e, value = _a.value, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value", "readOnly", "autoComplete"]);
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.placeholder, placeholder = _d === void 0 ? '' : _d, required = _a.required, rows = _a.rows, _e = _a.maxLength, maxLength = _e === void 0 ? undefined : _e, value = _a.value, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.autoComplete, autoComplete = _g === void 0 ? 'off' : _g, _h = _a.isValid, isValid = _h === void 0 ? null : _h, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value", "readOnly", "autoComplete", "isValid"]);
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
     var inputClass = sizeConfig$a[size].inputClass;
     var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
+    var isExistValidation = isValid !== null;
+    var descColor = 'text-primary-cool';
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
+    var bottomBorderColor = 'enabled:hover:border-b-bia-blue enabled:focus:border-b-bia-blue';
+    if (!disabled && isExistValidation && isValid)
+        bottomBorderColor =
+            'enabled:hover:border-b-bia-green enabled:focus:border-b-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        bottomBorderColor =
+            'enabled:hover:border-b-bia-red enabled:focus:border-b-bia-red';
     var disabledClass = disabled ? 'cursor-not-allowed' : '';
+    var extendedInputClassName = "".concat(inputClass, " ").concat(bottomBorderColor);
     return (React.createElement("div", { className: "field-group group/form flex w-full flex-col gap-y-2" },
         label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
         React.createElement("div", { className: "relative h-fit w-full min-w-[250px] ".concat(disabledClass) },
             React.createElement(ResizeIcon, { className: "absolute bottom-[11px] right-[5px]" }),
-            React.createElement("textarea", __assign({ className: "field bianic-text-area w-full  rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value, autoComplete: autoComplete, readOnly: readOnly }, props))),
-        React.createElement("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
+            React.createElement("textarea", __assign({ className: "field bianic-text-area w-full  rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 read-only:pointer-events-none focus-visible:outline-none enabled:hover:rounded-b-none enabled:focus:rounded-b-none disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(extendedInputClassName), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value, autoComplete: autoComplete, readOnly: readOnly }, props))),
+        React.createElement("div", { className: "desc flex justify-between gap-1 text-xs ".concat(descColor) },
             descText && React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
@@ -3649,8 +3667,8 @@ var colorConfig$1 = {
 };
 var sizeConfig$3 = {
     container: 'min-h-fit p-5 text-wrap',
-    'form-sm': 'h-[30px] whitespace-nowrap px-2.5',
-    'form-md': 'h-10 whitespace-nowrap px-2.5',
+    'form-sm': 'min-h-[30px] h-fit whitespace-nowrap p-[7px]',
+    'form-md': 'min-h-[40px] h-fit whitespace-nowrap px-2.5 py-[9.5px]',
 };
 
 var InfoPanel = function (_a) {