bianic-ui 2.4.0 → 2.5.1-beta.0

package/dist/cjs/index.js

@@ -1552,10 +1552,10 @@ var ContextualButton = React.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))));
 });
 
@@ -2240,7 +2240,7 @@ var styleConfig = {
         iconStyle: '',
     },
     text: {
-        fieldStyle: 'pe-8',
+        fieldStyle: '',
         iconStyle: 'pointer-events-none',
     },
     number: {
@@ -2301,9 +2301,13 @@ var TextInput = React.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,
@@ -3692,7 +3696,7 @@ function Modal(_a) {
     if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        reactDom.createPortal(React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onClick: handleClose },
+        reactDom.createPortal(React.createElement("div", { className: "bianic-modal-wrapper fixed inset-0 flex items-center justify-center bg-bia-black-transparent-75", style: { zIndex: !zIndex && isNaN(zIndex) ? 'auto' : zIndex }, id: "wrapper", onPointerDown: handleClose },
             React.createElement("div", { className: "bianic-modal flex flex-col gap-[20px] rounded-[5px] bg-white p-[20px] ".concat(modalSize), onClick: onClick },
                 React.createElement("div", { className: "bianic-modal-header flex justify-between" },
                     React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
@@ -3702,6 +3706,14 @@ function Modal(_a) {
     return null;
 }
 
+var Notification = function (props) {
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'red' : _a, _b = props.isVisible, isVisible = _b === void 0 ? true : _b;
+    var bgColor = color === 'red' ? 'bg-bia-red' : 'bg-bia-white';
+    return (React.createElement("div", { className: "relative" },
+        React.createElement("div", { className: "absolute -right-[3px] -top-[3px] h-1.5 w-1.5 rounded-radius-full ".concat(bgColor), style: { display: isVisible ? 'block' : 'none' } }),
+        children));
+};
+
 var sizeConfig$2 = {
     md: 'min-w-[38px] h-[40px] text-[14px] font-semibold',
     sm: 'min-w-[29px] h-[30px] text-[12px] font-normal',
@@ -4509,6 +4521,7 @@ exports.LiveSearch = LiveSearch;
 exports.MenuContainer = MenuContainer;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.Notification = Notification;
 exports.P = P;
 exports.PaginationBar = PaginationBar;
 exports.PickerCalendar = PickerCalendar;