bianic-ui 1.9.0-beta.2 → 1.9.0

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import TextInputProps from './PropsInterface';
+import './style.css';
 declare function TextInput({ descText, disabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, maxLength, inputClassName, isFlatRight, actionElement, autoComplete, ...props }: TextInputProps): React.JSX.Element;
 declare namespace TextInput {
     var defaultProps: {

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

@@ -3,6 +3,8 @@ export interface ProgressBarProps {
     title?: string;
     percentage: number;
     caption?: string;
+    icon?: React.ReactNode | boolean;
+    barColor?: string;
     variant?: 'success' | 'failed' | 'loading';
 }
-export default function ProgressBar({ title, percentage, caption, variant, }: ProgressBarProps): React.JSX.Element;
+export default function ProgressBar({ title, percentage, caption, variant, icon, barColor, }: ProgressBarProps): React.JSX.Element;

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

@@ -1,11 +1,10 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithRef } from 'react';
 import '../../tailwind.css';
-export interface WindowProps extends ComponentPropsWithoutRef<'div'> {
+export interface WindowProps extends ComponentPropsWithRef<'div'> {
     size?: 'sm' | 'md' | 'lg' | 'xl';
     zIndex?: number;
     title?: string;
-    open: boolean;
     onClose: () => void;
 }
-declare function Window({ size, title, open, zIndex, onClose, ...rest }: WindowProps): React.JSX.Element | null;
+declare function Window({ size, title, zIndex, onClose, ...rest }: WindowProps): React.JSX.Element;
 export default Window;

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

@@ -27,3 +27,4 @@ export { default as TagLabel } from './TagLabel';
 export { default as Tooltip } from './Tooltip';
 export { Display, P, Heading, Text, Link } from './Typography';
 export { Toaster } from './Toaster';
+export { default as Window } from './Window';

package/dist/cjs/types/stories/Button/Button.stories.d.ts

@@ -6,7 +6,6 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    tags: string[];
     args: {};
 };
 export default meta;
@@ -30,3 +29,4 @@ export declare const DemoWithIconLeft: Story;
 export declare const DemoWithIconRight: Story;
 export declare const DemoWithIconBoth: Story;
 export declare const DemoWithIconOnly: Story;
+export declare const DemoWithMovingIcon: Story;

package/dist/cjs/types/stories/Form/LiveSearch/Livesearch.stories.d.ts

@@ -0,0 +1,38 @@
+import { StoryObj } from '@storybook/react/*';
+import { LiveSearch } from '../../../components';
+declare const meta: {
+    title: string;
+    component: typeof LiveSearch;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        id: {
+            description: string;
+        };
+        label: {
+            description: string;
+        };
+        descText: {
+            description: string;
+        };
+        children: {
+            description: string;
+        };
+        value: {
+            description: string;
+        };
+        setValue: {
+            description: string;
+        };
+        size: {
+            description: string;
+        };
+        dropContProps: {
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LivesearchProp: Story;

package/dist/cjs/types/stories/Form/SelectInput/SelectInput.stories.d.ts

@@ -6,7 +6,6 @@ declare const meta: {
     parameters: {
         layout: string;
     };
-    tags: string[];
     args: {};
 };
 export default meta;

package/dist/cjs/types/stories/Progress/Bar/ProgressBar.stories.d.ts

@@ -11,3 +11,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Demo: Story;
+export declare const NoIconDemo: Story;
+export declare const CustomColorDemo: Story;

package/dist/cjs/types/stories/Window/Window.stories.d.ts

@@ -1,7 +1,8 @@
 import type { StoryObj } from '@storybook/react';
+import { Window } from '../../components';
 declare const meta: {
     title: string;
-    component: any;
+    component: typeof Window;
     parameters: {
         layout: string;
     };

package/dist/esm/index.js

@@ -88,6 +88,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) {
@@ -1873,6 +1875,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" },
@@ -2368,7 +2372,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);
@@ -2904,35 +2908,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))));
 }
 
@@ -3107,7 +3125,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 = {
@@ -3136,11 +3154,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 })))));
 };
 
@@ -3442,4 +3460,31 @@ function Toaster(_a) {
                 React.createElement(TbX, { size: 14 })))));
 }
 
-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, 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, Checkbox, Color, ContextualButton, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, 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, Toaster, Toggle, Tooltip };
+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)));
+}
+
+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, 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, Checkbox, Color, ContextualButton, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, 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, Toaster, Toggle, Tooltip, Window };