bianic-ui 1.2.0-beta → 1.3.0-beta

package/dist/cjs/index.js

@@ -1550,13 +1550,14 @@ function PasswordIcon(_a) {
 }
 
 function TextInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? false : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? '' : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange"]);
-    var _m = React.useState(false), isShow = _m[0], setIsShow = _m[1];
-    var _o = styleConfig[variant], fieldStyle = _o.fieldStyle, iconStyle = _o.iconStyle;
-    var _p = sizeConfig$a[size], iconSize = _p.iconSize, fieldSize = _p.fieldSize, iconPosition = _p.iconPosition;
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, icon = _a.icon, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.isValid, isValid = _e === void 0 ? false : _e, label = _a.label, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.variant, variant = _j === void 0 ? 'text' : _j, _k = _a.value, value = _k === void 0 ? '' : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength"]);
+    var _o = React.useState(false), isShow = _o[0], setIsShow = _o[1];
+    var _p = styleConfig[variant], fieldStyle = _p.fieldStyle, iconStyle = _p.iconStyle;
+    var _q = sizeConfig$a[size], iconSize = _q.iconSize, fieldSize = _q.fieldSize, iconPosition = _q.iconPosition;
     var typeVariant = variant;
     if (variant === 'password')
         typeVariant = isShow ? 'text' : 'password';
+    var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
     var isExistValidation = isValid !== null;
     var descColor = 'text-primary-cool';
     if (!disabled && isExistValidation && isValid)
@@ -1581,9 +1582,15 @@ function TextInput(_a) {
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "relative w-full" },
-            React.createElement("input", __assign({ className: "field w-full rounded  border border-bia-grey-dark-10 bg-primary-white 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:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); } }, props)),
+            React.createElement("input", __assign({ className: "field w-full rounded  border border-bia-grey-dark-10 bg-primary-white 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:border-bia-grey-dark-10 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor), disabled: disabled, id: id, placeholder: placeholder || label, readOnly: readOnly, required: required, type: typeVariant, value: value, onChange: function (e) { return onChange(e); }, maxLength: maxLength }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconStyle, " ").concat(iconPosition) }, iconElement)),
-        descText && (React.createElement("span", { className: "desc text-xs ".concat(descColor) }, descText))));
+        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,
+                "/",
+                maxLength,
+                ' ')))));
 }
 TextInput.defaultProps = {
     descText: '',
@@ -1642,16 +1649,23 @@ var sizeConfig$8 = {
 };
 
 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, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows"]);
+    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, props = __rest(_a, ["descText", "disabled", "id", "size", "label", "placeholder", "required", "rows", "maxLength", "value"]);
     var inputRow = rows !== null && rows !== void 0 ? rows : 4;
     var inputClass = sizeConfig$8[size].inputClass;
-    return (React.createElement("div", { className: "field-group w-full flex flex-col" },
-        React.createElement("label", { htmlFor: id, className: "label text-xs pb-2 font-semibold" },
+    var remainWords = maxLength ? maxLength - (value ? value.length : 0) : 0;
+    return (React.createElement("div", { className: "field-group flex w-full flex-col" },
+        React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             label,
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
-        React.createElement("div", { className: "min-w-[250px] w-full h-full" },
-            React.createElement("textarea", __assign({ className: "field bg-primary-white disabled:bg-bia-grey-light-80  disabled:text-bia-grey-active read-only:pointe r-events-none p-2.5 w-full border border-bia-grey-dark-10 enabled:hover:border-b-bia-blue enabled:hover:rounded-b-none enabled:focus:border-b-bia-blue enabled:focus:rounded-b-none focus-visible:outline-none rounded ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled }, props))),
-        React.createElement("span", { className: "desc text-primary-cool text-xs" }, descText)));
+        React.createElement("div", { className: "h-full w-full min-w-[250px]" },
+            React.createElement("textarea", __assign({ className: "field read-only:pointe r-events-none  w-full rounded border border-bia-grey-dark-10 bg-primary-white p-2.5 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:bg-bia-grey-light-80 disabled:text-bia-grey-active ".concat(inputClass), rows: inputRow, id: id, placeholder: placeholder, disabled: disabled, maxLength: maxLength, value: value }, props))),
+        React.createElement("div", { className: "desc flex justify-between gap-1 text-xs text-primary-cool" },
+            descText && React.createElement("span", null, descText),
+            maxLength && (React.createElement("span", null,
+                remainWords,
+                "/",
+                maxLength,
+                ' ')))));
 }
 TextArea.defaultProps = {
     disabled: false,
@@ -1662,6 +1676,8 @@ TextArea.defaultProps = {
     placeholder: 'Write here ...',
     required: false,
     rows: 4,
+    maxLength: undefined,
+    value: '',
 };
 
 var sizeConfig$7 = {
@@ -1919,16 +1935,16 @@ var roundedConfig = {
     tn: 'first:rounded-l-radius-tn last:rounded-r-radius-tn',
 };
 var sizeConfig$2 = {
-    lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px]',
-    md: 'text-size-base leading-[21px] px-[11px] py-[9px]',
-    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px]',
-    tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px]',
+    lg: 'text-size-md leading-[23.94px] px-[13px] py-[10.5px] min-w-[112px]',
+    md: 'text-size-base leading-[21px] px-[11px] py-[9px] min-w-[96px]',
+    sm: 'text-size-sm leading-[15.96px] px-[7px] py-[5px] min-w-[72px]',
+    tn: 'text-size-sm leading-[15.96px] px-[4px] py-[2px] min-w-[64px]',
 };
 
 function SegmentButtonItem(_a) {
     var _b = _a.selected, selected = _b === void 0 ? false : _b, size = _a.size, children = _a.children, disabled = _a.disabled, onClick = _a.onClick;
     var isSelected = selected ? 'selected' : 'notSelected';
-    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "focus-visible:z-50 focus-visible:outline focus-visible:-outline-offset-1 focus-visible:outline-[3px] focus-visible:outline-bia-blue-light-50 border-[1px] border-l-0 first:border-l-[1px] border-bia-grey-dark-10 group:last:border-l-0 disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 disabled:cursor-not-allowed ".concat(isSelectedConfig[isSelected], " ").concat(roundedConfig[size], " ").concat(sizeConfig$2[size]) }, children));
+    return (React.createElement("button", { type: "button", onClick: onClick, disabled: disabled, className: "group:last:border-l-0 border-[1px] border-l-0 border-bia-grey-dark-10 first:border-l-[1px] focus-visible:z-50 focus-visible:outline focus-visible:outline-[3px] focus-visible:-outline-offset-1 focus-visible:outline-bia-blue-light-50 disabled:cursor-not-allowed disabled:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 ".concat(isSelectedConfig[isSelected], " ").concat(roundedConfig[size], " ").concat(sizeConfig$2[size]) }, children));
 }
 
 function SegmentButtonGroup(_a) {
@@ -2273,7 +2289,7 @@ function Tab(_a) {
         React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "-mb-[1px] flex items-stretch justify-between ".concat(card && cardColor, " ").concat(mode === 'horizontal' ? 'flex-col' : 'w-full flex-row', " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
             React.createElement("div", { className: "flex items-center justify-center ".concat(size === 'sm' ? " pt-[10px] ".concat(mode === 'vertical' ? 'pb-[10px] pe-[30px]' : 'px-[30px] pb-[8px]') : "px-[30px] pt-[13px] ".concat(mode === 'vertical' ? 'pb-[13px]' : 'pb-[10px]', " ")) },
                 React.createElement("div", { className: "flex  items-center justify-center " },
-                    React.createElement("div", { className: "flex space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },
+                    React.createElement("div", { className: "flex items-center space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },
                         icon && React.createElement("div", { className: "mr-[5px]" }, icon),
                         children))),
             React.createElement("div", { className: "flex flex-row  ".concat(mode === 'vertical' ? 'w-[3px] justify-end' : 'h-[3px] w-full', "  items-end") }, !card && (React.createElement("div", { className: "shadow-lg shadow-bia-blue ".concat(configTab[active ? 'true' : 'false'][mode]) }))))));