bianic-ui 2.4.0 → 2.5.1-beta.0

package/dist/cjs/types/components/Notification/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface NotificationProps {
+    children?: React.ReactNode;
+    color?: 'red' | 'white';
+    isVisible?: boolean;
+}
+declare const Notification: (props: NotificationProps) => React.JSX.Element;
+export default Notification;

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

@@ -17,6 +17,7 @@ export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle,
 export * from './Icons';
 export { default as InfoPanel } from './InfoPanel';
 export { default as Modal } from './Modal/Modal';
+export { default as Notification } from './Notification';
 export { default as PaginationBar } from './PaginationBar/PaginationBar';
 export { default as Pills } from './Pills/Pills';
 export { default as Popover } from './Popover';

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,
@@ -3690,7 +3694,7 @@ function Modal(_a) {
     if (open) {
         return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-        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 },
+        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),
@@ -3700,6 +3704,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',
@@ -4455,4 +4467,4 @@ function getRelativeTime(date) {
     return "".concat(Math.floor(diffMs / year), " years ago");
 }
 
-export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, getRelativeTime, useFileTree };
+export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, Window, getRelativeTime, useFileTree };