bianic-ui 1.9.0-beta.2 → 1.9.0

package/dist/cjs/index.js

@@ -90,6 +90,8 @@ function TbCircleCheckFilled (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"currentColor"},"child":[{"tag":"path","attr":{"d":"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"},"child":[]}]})(props);
 }function TbAlertTriangle (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M12 9v4"},"child":[]},{"tag":"path","attr":{"d":"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"},"child":[]},{"tag":"path","attr":{"d":"M12 16h.01"},"child":[]}]})(props);
+}function TbCalendar (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"},"child":[]},{"tag":"path","attr":{"d":"M16 3v4"},"child":[]},{"tag":"path","attr":{"d":"M8 3v4"},"child":[]},{"tag":"path","attr":{"d":"M4 11h16"},"child":[]},{"tag":"path","attr":{"d":"M11 15h1"},"child":[]},{"tag":"path","attr":{"d":"M12 15v3"},"child":[]}]})(props);
 }function TbCheck (props) {
   return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M5 12l5 5l10 -10"},"child":[]}]})(props);
 }function TbChevronDown (props) {
@@ -1875,6 +1877,8 @@ function TextInput(_a) {
     if (variant === 'password') {
         iconElement = (React.createElement(PasswordIcon, { isShow: isShow, showHandler: setIsShow, iconSize: iconSize, disabled: disabled }));
     }
+    if (variant === 'date')
+        iconElement = React.createElement(TbCalendar, { className: "text-bia-coolgrey", size: 18 });
     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: "bianic-text-input-container bianic-fgc-container flex w-full flex-col gap-y-2 text-bia-black" },
@@ -2370,7 +2374,7 @@ function LiveSearch(_a) {
             React.createElement("div", { className: "absolute inset-y-0 z-20 hidden pl-3 group-hover:block ".concat(iconClass) },
                 React.createElement("button", { onClick: function () { return setValue({ id: null, label: '' }); }, className: "flex h-full w-full items-center" },
                     React.createElement(TbX, { className: "text-primary-black", style: { fontSize: iconSize } }))),
-            children !== undefined && isOpen && (React.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
+            children === undefined && isOpen && (React.createElement("div", { className: "border-grey-100 absolute z-10 max-h-60 w-full overflow-y-auto rounded-b-md border bg-primary-white shadow-lg", onClick: onClickDropdown }, filteredOptions.map(function (option) {
                 var isSelected = value && value.id && option.id === value.id;
                 return option.custom ? (React.createElement(CustomDropdownItem, { size: size, isSelected: isSelected, className: dropdownClassName, onClick: function () {
                         setValue(option);
@@ -2906,35 +2910,49 @@ var SpinnerIcon = function (_a) {
 
 var config = {
     success: {
-        progress: 'bg-bia-green',
+        progress: 'bg-bia-green outline-bia-green',
         statusIcon: React.createElement(TbCircleCheckFilled, { className: "text-[16px] text-bia-green" }),
     },
     failed: {
-        progress: 'bg-bia-red',
+        progress: 'bg-bia-red outline-bia-red',
         statusIcon: React.createElement(TbPlaystationX, { className: "text-[16px] text-bia-red" }),
     },
     loading: {
-        progress: 'bg-bia-blue',
+        progress: 'bg-bia-blue outline-bia-blue ',
         statusIcon: React.createElement(SpinnerIcon, { className: "text-[16px] text-bia-grey-dark-10" }),
     },
 };
 
 function ProgressBar(_a) {
-    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.percentage, percentage = _c === void 0 ? 0 : _c, caption = _a.caption, _d = _a.variant, variant = _d === void 0 ? 'loading' : _d;
-    var persentageVal = percentage;
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.percentage, percentage = _c === void 0 ? 0 : _c, caption = _a.caption, _d = _a.variant, variant = _d === void 0 ? 'loading' : _d, _e = _a.icon, icon = _e === void 0 ? true : _e, barColor = _a.barColor;
+    var percentageVal = percentage;
+    if (percentageVal === 0)
+        percentageVal = 0.5;
     if (percentage > 100)
-        persentageVal = 100;
-    var _e = config[variant], progress = _e.progress, statusIcon = _e.statusIcon;
+        percentageVal = 100;
+    var _f = config[variant], progress = _f.progress, statusIcon = _f.statusIcon;
+    var barColorRules = barColor
+        ? "outline-bia-".concat(barColor, " bg-bia-").concat(barColor)
+        : progress; // Use the provided barColor or fallback to the default progress color
+    var iconElement = null;
+    if (icon) {
+        if (typeof icon === 'boolean') {
+            iconElement = statusIcon; // Use the default icon based on the variant
+        }
+        else {
+            iconElement = icon; // Use the provided icon
+        }
+    }
     return (React.createElement("div", { className: "bianic-progress-bar-container flex w-[320px] flex-col rounded-radius-lg bg-bia-grey-light-80 p-[10px] " },
         React.createElement("div", { className: "flex items-center justify-between text-primary-black" },
             React.createElement(Text, { variant: "small-text-semibold", extended: "bianic-progress-bar-title" }, title),
             React.createElement("div", { className: "flex gap-1" },
-                React.createElement(Text, { variant: "small-text-semibold", extended: "bianic-progress-bar-persentage" },
-                    persentageVal,
+                React.createElement(Text, { variant: "small-text-semibold", extended: "bianic-progress-bar-percentage" },
+                    percentage,
                     "%"),
-                statusIcon)),
+                iconElement)),
         React.createElement("div", { className: "bianic-progress-bar mb-1 mt-2 w-full rounded-radius-lg bg-bia-white p-[3px]" },
-            React.createElement("div", { className: "h-1 w-full rounded-radius-lg ".concat(progress), style: { width: "".concat(persentageVal, "%") } })),
+            React.createElement("div", { className: "h-[1px] rounded-radius-lg outline outline-[1.5px] ".concat(barColorRules), style: { width: "".concat(percentageVal, "%") } })),
         caption && (React.createElement(Text, { variant: "small-text-semibold", extended: "text-bia-coolgrey-dark-10" }, caption))));
 }
 
@@ -3109,7 +3127,7 @@ var alternativeConfigs = {
     false: 'cursor-pointer bg-bia-verdantgreen-dark-40 hover:bg-bia-verdantgreen-dark-50 text-primary-white overflow-hidden',
 };
 var alternativeButtonConfigs = {
-    true: 'absolute px-[5px] opacity-0 hover:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-primary-white from-50% to-primary-white/[.0] inset-y-0 right-0',
+    true: 'absolute px-[5px] opacity-0 group-hover/container:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-primary-white from-50% to-primary-white/[.0] inset-y-0 right-0',
     false: ' absolute px-[5px] opacity-0 hover:opacity-100 grid-cols-2 gap-[2px] bg-gradient-to-l from-bia-verdantgreen-dark-50 from-50% to-bia-verdantgreen-dark-50/[.0] inset-y-0 right-0',
 };
 var actionButtonConfig = {
@@ -3138,11 +3156,11 @@ var TabMenu = function (_a) {
         usedButtonConfig = defaultButtonConfigs[isActive];
         usedActionButtonConfig = '';
     }
-    return (React.createElement("div", __assign({ className: "tab-menu flex flex-row font-arial text-size-tiny font-normal ".concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(usedBaseConfig, " ").concat(rest.className) }, rest),
+    return (React.createElement("div", __assign({ className: "tab-menu group/container flex flex-row font-arial text-size-tiny font-normal ".concat(radiusConfig[validatedRadius], " ").concat(variantConfig[validatedVariant], " ").concat(usedBaseConfig, " ").concat(rest.className) }, rest),
         text,
         React.createElement("div", { className: "grid ".concat(usedButtonConfig, " ") },
             validatedVariant === 'alternative' && React.createElement("div", { className: "order-first" }),
-            React.createElement("button", { className: "group order-last ", onClick: onClose },
+            React.createElement("button", { className: "group order-last", onClick: onClose },
                 React.createElement(TbX, { className: "rounded-radius-sm ".concat(usedActionButtonConfig), size: 14 })))));
 };
 
@@ -3444,6 +3462,33 @@ function Toaster(_a) {
                 React.createElement(TbX, { size: 14 })))));
 }
 
+function Window(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, title = _a.title; _a.zIndex; var onClose = _a.onClose, rest = __rest(_a, ["size", "title", "zIndex", "onClose"]);
+    var windowSize;
+    // sizing logic
+    switch (size) {
+        case 'sm':
+            windowSize = 'w-[300px]';
+            break;
+        case 'md':
+            windowSize = 'w-[540px]';
+            break;
+        case 'lg':
+            windowSize = 'w-[800px]';
+            break;
+        case 'xl':
+            windowSize = 'w-[1140px]';
+            break;
+        default:
+            windowSize = 'w-[540px]';
+    }
+    return (React.createElement("div", { className: "bianic-window drag-handle flex flex-col gap-[20px] rounded-[5px] bg-white ".concat(windowSize, " shadow-[0px_3px_20px_0px_rgba(0,0,0,0.10)]") },
+        React.createElement("div", { className: "bianic-window-header flex cursor-move justify-between px-[20px] pt-[20px]" },
+            React.createElement("div", { className: " text-wrap text-left font-humnst777 text-[18px] font-bold leading-[21.85px] text-primary-black" }, title),
+            React.createElement(Button, { variant: "subtle", radius: "full-rounded", iconLeft: React.createElement(TbX, null), size: "tn", onClick: function () { return onClose(); } })),
+        React.createElement("div", { className: "bianic-window-content flex w-full flex-col items-start gap-[20px] px-[20px] pb-[20px] text-primary-black" }, rest.children)));
+}
+
 exports.Accordions = Accordions;
 exports.Alert = Alert;
 exports.Avatar = Avatar;
@@ -3514,3 +3559,4 @@ exports.TextInput = TextInput;
 exports.Toaster = Toaster;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
+exports.Window = Window;