bianic-ui 1.6.0 → 1.7.1

package/dist/esm/index.js

@@ -450,6 +450,7 @@ var variantConfig$2 = {
     'success-outlined': "text-bia-green bg-primary-white bg-primary-white border-solid border border-bia-greenactive:text-bia-green-active active:bg-bia-green-pastel active:border-bia-green-active hover:text-bia-green-hover hover:border-bia-green-hover  disabled:border-[1px] disabled:border-bia-green-light-50 disabled:text-bia-green-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-green-light-50 focus-visible:border-none ",
     'warning-outlined': "text-bia-orange bg-primary-white border-solid border border-bia-orange active:text-bia-orange-dark-10 active:bg-bia-orange-light-90 active:border-bia-orange-active active:outline-none hover:text-bia-orange-hover hover:border-bia-orange-hover disabled:border-[1px]disabled:border-bia-orange-light-50 disabled:text-bia-orange-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-orange-light-50 focus-visible:border-none",
     'danger-outlined': "text-bia-red border-solid border border-bia-red bg-primary-white active:text-bia-red-dark-10 active:border-bia-red-active active:bg-bia-red-light-90 active:border-bia-red-disabled hover:text-bia-red-hover hover:border-bia-red-hover disabled:border-[1px]disabled:border-bia-red-light-50 disabled:text-bia-red-light-50 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-red-light-50 focus-visible:border-none \n  ",
+    'form-group': "text-bia-black border-solid border border-bia-grey-dark-10 bg-bia-white active:bg-bia-grey-light-20 hover:bg-bia-grey-light-80 disabled:text-bia-grey-dark-10 focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:outline-[3px] focus-visible:rounded-md focus-visible:outline-bia-grey-dark-10 focus-visible:border-none \n  ",
 };
 
 var variantUnion$1 = [
@@ -468,6 +469,7 @@ var variantUnion$1 = [
     'primary-outlined',
     'success-outlined',
     'warning-outlined',
+    'form-group'
 ];
 var radiusUnion = ['default', 'full-rounded'];
 var sizeUnion$4 = ['md', 'lg', 'sm', 'tn'];
@@ -477,7 +479,7 @@ function Button(_a) {
     var validatedSize = validUnion(size, sizeUnion$4);
     var validatedRadius = validUnion(radius, radiusUnion);
     var minWidthRules = minWidthConfig$1[size];
-    if (minWidth) {
+    if (minWidth !== undefined) {
         minWidthRules = "min-w-[".concat(minWidth, "px]");
     }
     else if (variant.includes('link')) {
@@ -490,11 +492,11 @@ function Button(_a) {
     else {
         sizingRules = "".concat(sizeConfig$c[validatedSize], " ").concat(sidePaddingConfig[validatedSize]);
     }
-    var sizeClass = label
+    var sizeClass = label || variant === 'form-group'
         ? " ".concat(minWidthRules, " ").concat(sizingRules)
         : iconOnlySizeConfig$1[validatedSize];
     var classString = "\n    ".concat(variantConfig$2[validatedVariant], " \n    ").concat(sizeClass, " \n    ").concat(radiusConfig$1[validatedRadius][validatedSize], " \n    ").concat(className, "\n  ");
-    return (React.createElement("button", __assign({ type: "button", className: "button flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
+    return (React.createElement("button", __assign({ type: "button", className: "bianic-button bianic-fgc-target flex items-center justify-center font-semibold ".concat(classString), disabled: disabled }, props),
         childrenElement(iconLeft || left),
         childrenElement(label),
         childrenElement(iconRight || right)));
@@ -1774,7 +1776,7 @@ 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, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete"]);
+    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 ? undefined : _k, _l = _a.onChange, onChange = _l === void 0 ? function () { } : _l, _m = _a.maxLength, maxLength = _m === void 0 ? undefined : _m, _o = _a.inputClassName, inputClassName = _o === void 0 ? '' : _o; _a.isFlatRight; var actionElement = _a.actionElement, _q = _a.autoComplete, autoComplete = _q === void 0 ? 'off' : _q, props = __rest(_a, ["descText", "disabled", "icon", "id", "size", "isValid", "label", "placeholder", "readOnly", "required", "variant", "value", "onChange", "maxLength", "inputClassName", "isFlatRight", "actionElement", "autoComplete"]);
     var isTransparent = variant.includes('transparent');
     var _r = useState(false), isShow = _r[0], setIsShow = _r[1];
     var _s = styleConfig[variant], fieldStyle = _s.fieldStyle, iconStyle = _s.iconStyle;
@@ -1812,20 +1814,19 @@ function TextInput(_a) {
     }
     var extendedInputClassName = "".concat(fieldStyle, " ").concat(fieldSize, " ").concat(bottomBorderColor, " ").concat(inputClassName, " ").concat(borderStyle);
     var labelStatus = readOnly ? 'read-only:pointer-events-none' : '';
-    return (React.createElement("div", { className: "field-group flex w-full flex-col gap-y-2 text-bia-black" },
-        React.createElement("label", { htmlFor: id, className: "label text-xs font-semibold ".concat(labelStatus) },
+    return (React.createElement("div", { className: "bianic-text-input-container bianic-fgc-container flex w-full flex-col gap-y-2 text-bia-black" },
+        label && (React.createElement("label", { htmlFor: id, className: "bianic-text-input-label text-xs font-semibold ".concat(labelStatus) },
             label,
-            required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
+            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 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(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 }, props)),
+            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: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 }, props)),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(actionElement ? '' : iconStyle, " ").concat(iconPosition, " ").concat(iconSizing) }, iconElement)),
-        React.createElement("div", { className: "desc flex justify-between gap-1 text-xs ".concat(descColor) },
-            descText && React.createElement("span", null, descText),
+        (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,
                 "/",
-                maxLength,
-                ' ')))));
+                maxLength))))));
 }
 TextInput.defaultProps = {
     descText: '',
@@ -1838,7 +1839,7 @@ TextInput.defaultProps = {
     placeholder: '',
     readOnly: false,
     variant: 'text',
-    value: '',
+    value: undefined,
     onChange: function () { },
     inputClassName: '',
     isFlatRight: false,
@@ -2351,20 +2352,26 @@ var activeConfig = {
         ActiveText: 'text-bia-coolgrey font-semibold',
     },
 };
+var sizingConfig = {
+    small: 'px-[15px] py-[4.5px]',
+    medium: 'px-[18px] py-[7.5px]',
+};
 
-function Piils(_a) {
-    var title = _a.title, _b = _a.iconLeft, iconLeft = _b === void 0 ? null : _b, _c = _a.iconRight, iconRight = _c === void 0 ? null : _c, selected = _a.selected, onClick = _a.onClick, props = __rest(_a, ["title", "iconLeft", "iconRight", "selected", "onClick"]);
-    var _d = activeConfig[String(selected)], ActiveContainer = _d.ActiveContainer, ActiveIcon = _d.ActiveIcon, ActiveText = _d.ActiveText, ActivePointer = _d.ActivePointer;
+function Pills(_a) {
+    var title = _a.title, _b = _a.iconLeft, iconLeft = _b === void 0 ? null : _b, _c = _a.iconRight, iconRight = _c === void 0 ? null : _c, selected = _a.selected, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 'medium' : _d, props = __rest(_a, ["title", "iconLeft", "iconRight", "selected", "onClick", "size"]);
+    var _e = activeConfig[String(selected)], ActiveContainer = _e.ActiveContainer, ActiveIcon = _e.ActiveIcon, ActiveText = _e.ActiveText, ActivePointer = _e.ActivePointer;
     var disabledContainer = props.disabled ? 'opacity-50 ' : '';
+    var sizingStyles = sizingConfig[size] || sizingConfig.medium;
+    var textVariable = size === 'small' ? 'small-text-semibold' : 'normal-text-semibold';
     return (React.createElement("div", { className: "flex justify-between" },
         React.createElement("button", __assign({ type: "button", className: "flex ".concat(disabledContainer, " ").concat(ActiveContainer, " ").concat(props.disabled ? 'cursor-not-allowed' : ActivePointer, " cursor rounded-radius-full"), onClick: props.disabled ? function () { } : onClick, role: "button" }, props),
-            React.createElement("div", { className: "flex px-[15px] py-[7.5px] items-center justify-center gap-[5px] ".concat(ActiveText) },
+            React.createElement("div", { className: "flex items-center justify-center gap-[5px]  ".concat(sizingStyles, " ").concat(ActiveText) },
                 iconLeft && React.createElement("div", { className: "icon ".concat(ActiveIcon) }, iconLeft),
-                React.createElement("div", { className: "h-[21px] flex items-center justify-center" },
-                    React.createElement(Text, { variant: "normal-text-semibold" }, title)),
+                React.createElement("div", { className: "flex h-[21px] items-center justify-center" },
+                    React.createElement(Text, { variant: textVariable }, title)),
                 iconRight && React.createElement("div", { className: "icon ".concat(ActiveIcon) }, iconRight)))));
 }
-Piils.defaultProps = {
+Pills.defaultProps = {
     iconLeft: null,
     iconRight: null,
 };
@@ -2975,4 +2982,4 @@ Tooltip.defaultProps = {
 };
 Tooltip.defaultProps = {};
 
-export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, Display, Divider, FileTree, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Piils as Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toggle, Tooltip };
+export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Checkbox, Color, ContextualButton, Display, Divider, FileTree, Heading, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toggle, Tooltip };