bianic-ui 2.0.0 → 2.1.0-beta.1

package/dist/cjs/index.js

@@ -1900,9 +1900,9 @@ MenuContainerNoAnchor.defaultProps = {
 };
 
 function MenuItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick"]);
-    var _j = React.useState(false), isHovered = _j[0], setIsHovered = _j[1];
-    var _k = React.useState(false), isLeft = _k[0], setIsLeft = _k[1];
+    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick", "disabled"]);
+    var _k = React.useState(false), isHovered = _k[0], setIsHovered = _k[1];
+    var _l = React.useState(false), isLeft = _l[0], setIsLeft = _l[1];
     var isWithChecked = isChecked !== undefined;
     var leftPadding = isWithChecked ? 'pl-[5px]' : 'pl-[10px]';
     var rightPadding = caption || children ? 'pr-[5px]' : 'pr-[10px]';
@@ -1924,19 +1924,21 @@ function MenuItem(_a) {
         ? 'left-0 -translate-x-full'
         : 'right-0 translate-x-full';
     var currentZIndex = zIndex + 10;
-    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
+    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return !disabled && setIsHovered(true); }, onMouseLeave: function () { return !disabled && setIsHovered(false); } },
+        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] ".concat(itemClass, " ").concat(disabled ? 'cursor-not-allowed' : 'hover:bg-bia-blue-pastel'), role: "button", "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: function (e) {
+                if (disabled)
+                    return;
                 inheritedOnClick();
                 onClick(e);
             }, onKeyDown: function () { }, style: {
                 zIndex: isHovered ? currentZIndex : currentZIndex + 15,
             } }, props),
             isWithChecked && (React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked && React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
-            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] text-bia-black" }, label),
+            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] ".concat(disabled ? 'text-bia-coolgrey-light-50' : 'text-bia-black') }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
-                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
-        children && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
+                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] ".concat(disabled ? 'text-bia-coolgrey-light-50' : 'text-bia-coolgrey') }, caption)))),
+        children && !disabled && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
@@ -2011,18 +2013,25 @@ Tooltip.defaultProps = {
 Tooltip.defaultProps = {};
 
 var FormLabel = function (_a) {
-    var children = _a.children, className = _a.className, htmlFor = _a.htmlFor, readOnly = _a.readOnly, required = _a.required;
-    var labelClass = readOnly ? 'pointer-events-none' : '';
-    return (React.createElement(Tooltip, { content: "Required", delay: 2000, direction: "right" },
-        React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel text-xs font-semibold ".concat(labelClass, " ").concat(className) },
-            children,
-            required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*")))));
+    var children = _a.children, className = _a.className, htmlFor = _a.htmlFor, readOnly = _a.readOnly, required = _a.required, _b = _a.size, size = _b === void 0 ? 'sm' : _b, _c = _a.fontWeight, fontWeight = _c === void 0 ? 'semibold' : _c;
+    var labelpointer = readOnly ? 'pointer-events-none' : '';
+    var labelSize = size === 'sm' ? 'text-size-sm' : 'text-size-md';
+    var labelFontWeight = fontWeight === 'semibold' ? 'font-semibold' : 'font-normal';
+    var labelClass = "".concat(labelpointer, " ").concat(labelSize, " ").concat(labelFontWeight);
+    var labelContent = (React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel ".concat(labelClass, " ").concat(className) },
+        children,
+        required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*"))));
+    if (required)
+        return (React.createElement(Tooltip, { content: "Required", delay: 2000, direction: "right" }, labelContent));
+    return labelContent;
 };
 FormLabel.defaultProps = {
     className: '',
     htmlFor: undefined,
     required: false,
     readOnly: false,
+    size: 'sm',
+    fontWeight: 'semibold',
 };
 
 function PasswordIcon(_a) {
@@ -2125,7 +2134,7 @@ var TextInput = React.forwardRef(function (_a, ref) {
         React.createElement("div", { className: "relative w-full" },
             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, ref: ref }, 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 text-xs ".concat(descColor) },
+        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs whitespace-nowrap ".concat(descColor) },
             React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
@@ -2386,11 +2395,11 @@ DropdownContNoAnchor.defaultProps = {
 
 var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.required, required = _e === void 0 ? false : _e, selected = _a.selected, setSelected = _a.setSelected, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.dropContProps, _h = _g === void 0 ? {} : _g, _j = _h.className, dropContClassName = _j === void 0 ? '' : _j, restDropContProps = __rest(_h, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
-    var _k = React.useState(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = React.useState(false), isDropUp = _l[0], setIsDropUp = _l[1];
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.required, required = _f === void 0 ? false : _f, selected = _a.selected, setSelected = _a.setSelected, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, children = _a.children, _h = _a.dropContProps, _j = _h === void 0 ? {} : _h, _k = _j.className, dropContClassName = _k === void 0 ? '' : _k, restDropContProps = __rest(_j, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
+    var _l = React.useState(false), isOpen = _l[0], setIsOpen = _l[1];
+    var _m = React.useState(false), isDropUp = _m[0], setIsDropUp = _m[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
+    var _o = sizeConfig$8[validatedSize], searchSize = _o.searchSize, iconSize = _o.iconSize;
     var inputRef = React.useRef(null);
     var dropdownContRef = React.useRef(null);
     var handleOutsideClick = function (e) {
@@ -2440,12 +2449,18 @@ function SelectInput(_a) {
         }
     }, [isOpen]);
     var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
-    return (React.createElement("div", { className: "field-group flex w-full flex-col", ref: inputRef },
+    var descColor = 'text-primary-cool';
+    var isExistValidation = isValid !== null && isValid !== undefined;
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
+    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
+            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
             children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg ".concat(dropdownPosition), ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
@@ -2471,7 +2486,7 @@ function SelectInput(_a) {
                 }
                 return child;
             })))),
-        descText && (React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -2704,23 +2719,28 @@ var useLiveSearch = function (_a) {
 };
 
 function LiveSearch(_a) {
-    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, value = _a.value;
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id; _a.label; var _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
     var inputRef = React.useRef(null);
-    var _l = useLiveSearch({
+    var _m = useLiveSearch({
         value: value,
         setValue: setValue,
         onChangeText: onChangeText,
         dropContOnClickItem: dropContProps === null || dropContProps === void 0 ? void 0 : dropContProps.onClickItem,
-    }), isOpen = _l.isOpen, setIsOpen = _l.setIsOpen, searchTerm = _l.searchTerm, handleInputChange = _l.handleInputChange, handleDropdownItemClick = _l.handleDropdownItemClick;
-    var _m = sizeConfig$6[size], iconClass = _m.iconClass, iconSize = _m.iconSize, inputClass = _m.inputClass;
-    var _o = dropContProps || {}, dropContClassName = _o.className; _o.onClickItem; _o.anchorRef; var restDropContProps = __rest(_o, ["className", "onClickItem", "anchorRef"]);
+    }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
+    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var _p = dropContProps || {}, dropContClassName = _p.className; _p.onClickItem; _p.anchorRef; var restDropContProps = __rest(_p, ["className", "onClickItem", "anchorRef"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
+    var descColor = 'text-primary-cool';
+    var isExistValidation = isValid !== null && isValid !== undefined;
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
     var filteredOptions = filterOptions(options || [], value.label);
-    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
-    return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 " },
-        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
+    var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
+    return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2 " },
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
+            React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
@@ -2742,7 +2762,7 @@ function LiveSearch(_a) {
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
-        descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
 }
 LiveSearch.defaultProps = {
     descText: '',
@@ -4261,6 +4281,7 @@ exports.FileTree = FileTree;
 exports.FormGroup = FormGroup;
 exports.FormGroupButton = FormGroupButton;
 exports.FormGroupLabel = FormGroupLabel;
+exports.FormLabel = FormLabel;
 exports.Heading = Heading;
 exports.InfoPanel = InfoPanel;
 exports.Link = Link;

package/dist/cjs/types/components/Forms/{FormLabel.d.ts → Label/FormLabel.d.ts}

@@ -1,5 +1,7 @@
 import React from 'react';
-interface FormLabelProps {
+export interface FormLabelProps {
+    size?: 'sm' | 'md';
+    fontWeight?: 'normal' | 'semibold';
     children: React.ReactNode;
     className?: string;
     htmlFor?: string;
@@ -7,12 +9,14 @@ interface FormLabelProps {
     required?: boolean;
 }
 declare const FormLabel: {
-    ({ children, className, htmlFor, readOnly, required, }: FormLabelProps): React.JSX.Element;
+    ({ children, className, htmlFor, readOnly, required, size, fontWeight, }: FormLabelProps): React.JSX.Element;
     defaultProps: {
         className: string;
         htmlFor: undefined;
         required: boolean;
         readOnly: boolean;
+        size: string;
+        fontWeight: string;
     };
 };
 export default FormLabel;

package/dist/cjs/types/components/Forms/Label/FormLabelSimulation.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormLabelProps } from './FormLabel';
+declare const FormLabelSimulation: ({ className, children, htmlFor, required, readOnly, fontWeight, size, }: FormLabelProps) => React.JSX.Element;
+export default FormLabelSimulation;

package/dist/cjs/types/components/Forms/LiveSearch/Example/CustomDropdown.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import { LiveSearchProps } from '../types';
 declare const LiveSearchExample: ({ children, ...props }: LiveSearchProps) => React.JSX.Element;
 export default LiveSearchExample;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LiveSearchProps } from './types';
-declare function LiveSearch({ autoComplete, children, descText, disabled, dropContProps, id, label, onChangeText, onClickDropdown, options, placeholder, readOnly, required, searchVariant, setValue, size, value, }: LiveSearchProps): React.JSX.Element;
+declare function LiveSearch({ autoComplete, children, descText, disabled, dropContProps, id, label, onChangeText, onClickDropdown, options, placeholder, readOnly, required, searchVariant, setValue, size, isValid, value, }: LiveSearchProps): React.JSX.Element;
 declare namespace LiveSearch {
     var defaultProps: {
         descText: string;

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

@@ -8,6 +8,7 @@ export interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>,
     disabled?: boolean;
     dropContProps?: Omit<DropdownContainerProps, 'children'>;
     id?: string;
+    isValid?: boolean | null;
     label?: string;
     onChangeText?: (e: ChangeEvent<HTMLInputElement>) => void;
     onClickDropdown?: (event: MouseEvent<HTMLDivElement>) => void;

package/dist/cjs/types/components/Forms/SelectInput/PropsInterface.d.ts

@@ -4,6 +4,7 @@ interface SelectInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size
     descText?: string;
     disabled?: boolean;
     id?: string;
+    isValid?: boolean | null;
     size?: 'md' | 'sm';
     label?: string;
     options?: any;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import SelectInputProps from './PropsInterface';
-declare function SelectInput({ descText, disabled, size, id, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
+declare function SelectInput({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;

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

@@ -9,3 +9,4 @@ export { SegmentButtonItem, SegmentButtonGroup } from './SegmentButton';
 export { FormGroup, FormGroupButton, FormGroupLabel } from './Group';
 export { DropdownContainer, DropdownItem } from './Dropdown';
 export { DatePicker, PickerCalendar } from './DatePicker';
+export { default as FormLabel } from './Label/FormLabel';

package/dist/cjs/types/components/Menu/MenuItem.d.ts

@@ -9,8 +9,9 @@ export interface MenuItemProps extends ComponentPropsWithoutRef<'div'> {
     children?: React.ReactNode | undefined;
     onClose?: () => void;
     zIndex?: number;
+    disabled?: boolean;
 }
-declare function MenuItem({ className, label, onClick, caption, isChecked, onClose, children, zIndex, inheritedOnClick, ...props }: MenuItemProps): React.JSX.Element;
+declare function MenuItem({ className, label, onClick, caption, isChecked, onClose, children, zIndex, inheritedOnClick, disabled, ...props }: MenuItemProps): React.JSX.Element;
 declare namespace MenuItem {
     var defaultProps: {
         className: string;

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

@@ -10,7 +10,7 @@ export { default as Color } from './Color';
 export { default as Divider } from './Divider/Divider';
 export { default as FileTree } from './FileTree';
 export { MenuContainer, MenuItem } from './Menu';
-export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle, SegmentButtonItem, SegmentButtonGroup, FormGroup, FormGroupButton, FormGroupLabel, DropdownItem, DropdownContainer, DatePicker, PickerCalendar, } from './Forms';
+export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle, SegmentButtonItem, SegmentButtonGroup, FormLabel, FormGroup, FormGroupButton, FormGroupLabel, DropdownItem, DropdownContainer, DatePicker, PickerCalendar, } from './Forms';
 export * from './Icons';
 export { default as InfoPanel } from './InfoPanel';
 export { default as Modal } from './Modal/Modal';

package/dist/cjs/types/stories/Form/Label/FormLabel.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ className, children, htmlFor, required, readOnly, fontWeight, size, }: import("../../../components/Forms/Label/FormLabel").FormLabelProps) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simulation: Story;

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: {
+        ({ children, className, htmlFor, readOnly, required, size, fontWeight, }: import("../../../components/Forms/Label/FormLabel").FormLabelProps): import("react").JSX.Element;
+        defaultProps: {
+            className: string;
+            htmlFor: undefined;
+            required: boolean;
+            readOnly: boolean;
+            size: string;
+            fontWeight: string;
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;

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

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react/*";
 import React from "react";
 declare const meta: {
     title: string;
-    component: ({ children, ...props }: LiveSearchProps) => React.JSX.Element;
+    component: ({ children, ...props }: import("../../../components/Forms/LiveSearch/types").LiveSearchProps) => React.JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/esm/index.js

@@ -1898,9 +1898,9 @@ MenuContainerNoAnchor.defaultProps = {
 };
 
 function MenuItem(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick"]);
-    var _j = useState(false), isHovered = _j[0], setIsHovered = _j[1];
-    var _k = useState(false), isLeft = _k[0], setIsLeft = _k[1];
+    var _b = _a.className, className = _b === void 0 ? '' : _b, label = _a.label, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, _d = _a.caption, caption = _d === void 0 ? undefined : _d, _e = _a.isChecked, isChecked = _e === void 0 ? undefined : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.inheritedOnClick, inheritedOnClick = _h === void 0 ? function () { } : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, props = __rest(_a, ["className", "label", "onClick", "caption", "isChecked", "onClose", "children", "zIndex", "inheritedOnClick", "disabled"]);
+    var _k = useState(false), isHovered = _k[0], setIsHovered = _k[1];
+    var _l = useState(false), isLeft = _l[0], setIsLeft = _l[1];
     var isWithChecked = isChecked !== undefined;
     var leftPadding = isWithChecked ? 'pl-[5px]' : 'pl-[10px]';
     var rightPadding = caption || children ? 'pr-[5px]' : 'pr-[10px]';
@@ -1922,19 +1922,21 @@ function MenuItem(_a) {
         ? 'left-0 -translate-x-full'
         : 'right-0 translate-x-full';
     var currentZIndex = zIndex + 10;
-    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] hover:bg-bia-blue-pastel ".concat(itemClass), role: "button", tabIndex: 0, onClick: function (e) {
+    return (React.createElement("div", { className: "group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return !disabled && setIsHovered(true); }, onMouseLeave: function () { return !disabled && setIsHovered(false); } },
+        React.createElement("div", __assign({ className: "relative flex items-center py-[5px] ".concat(itemClass, " ").concat(disabled ? 'cursor-not-allowed' : 'hover:bg-bia-blue-pastel'), role: "button", "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: function (e) {
+                if (disabled)
+                    return;
                 inheritedOnClick();
                 onClick(e);
             }, onKeyDown: function () { }, style: {
                 zIndex: isHovered ? currentZIndex : currentZIndex + 15,
             } }, props),
             isWithChecked && (React.createElement("div", { className: "mr-[5px] aspect-square w-[14px]" }, isChecked && React.createElement(TbCheck, { className: "text-primary-black", size: 14 }))),
-            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] text-bia-black" }, label),
+            React.createElement("span", { className: "whitespace-nowrap font-arial text-[11px] ".concat(disabled ? 'text-bia-coolgrey-light-50' : 'text-bia-black') }, label),
             React.createElement("div", { className: "ml-auto flex items-center" },
                 children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey" })),
-                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] text-bia-coolgrey" }, caption)))),
-        children && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
+                children === undefined && caption && (React.createElement("span", { className: "ml-[30px] whitespace-nowrap text-[11px] ".concat(disabled ? 'text-bia-coolgrey-light-50' : 'text-bia-coolgrey') }, caption)))),
+        children && !disabled && (React.createElement(MenuContainerNoAnchor, { open: isHovered, onClose: onClose, className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), ref: MenuContRef, zIndex: currentZIndex + 10, onClickItem: function () { return inheritedOnClick(); } }, children))));
 }
 MenuItem.defaultProps = {
     className: '',
@@ -2009,18 +2011,25 @@ Tooltip.defaultProps = {
 Tooltip.defaultProps = {};
 
 var FormLabel = function (_a) {
-    var children = _a.children, className = _a.className, htmlFor = _a.htmlFor, readOnly = _a.readOnly, required = _a.required;
-    var labelClass = readOnly ? 'pointer-events-none' : '';
-    return (React.createElement(Tooltip, { content: "Required", delay: 2000, direction: "right" },
-        React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel text-xs font-semibold ".concat(labelClass, " ").concat(className) },
-            children,
-            required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*")))));
+    var children = _a.children, className = _a.className, htmlFor = _a.htmlFor, readOnly = _a.readOnly, required = _a.required, _b = _a.size, size = _b === void 0 ? 'sm' : _b, _c = _a.fontWeight, fontWeight = _c === void 0 ? 'semibold' : _c;
+    var labelpointer = readOnly ? 'pointer-events-none' : '';
+    var labelSize = size === 'sm' ? 'text-size-sm' : 'text-size-md';
+    var labelFontWeight = fontWeight === 'semibold' ? 'font-semibold' : 'font-normal';
+    var labelClass = "".concat(labelpointer, " ").concat(labelSize, " ").concat(labelFontWeight);
+    var labelContent = (React.createElement("label", { htmlFor: htmlFor, className: "bianic-form-label group/formlabel ".concat(labelClass, " ").concat(className) },
+        children,
+        required && (React.createElement("span", { className: "p-1 text-bia-coolgrey group-hover/form:text-bia-red group-hover/formlabel:text-bia-red" }, "*"))));
+    if (required)
+        return (React.createElement(Tooltip, { content: "Required", delay: 2000, direction: "right" }, labelContent));
+    return labelContent;
 };
 FormLabel.defaultProps = {
     className: '',
     htmlFor: undefined,
     required: false,
     readOnly: false,
+    size: 'sm',
+    fontWeight: 'semibold',
 };
 
 function PasswordIcon(_a) {
@@ -2123,7 +2132,7 @@ var TextInput = forwardRef(function (_a, ref) {
         React.createElement("div", { className: "relative w-full" },
             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, ref: ref }, 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 text-xs ".concat(descColor) },
+        (descText || maxLength) && (React.createElement("div", { className: "bianic-text-input-desc flex justify-between gap-1 text-xs whitespace-nowrap ".concat(descColor) },
             React.createElement("span", null, descText),
             maxLength && (React.createElement("span", null,
                 remainWords,
@@ -2384,11 +2393,11 @@ DropdownContNoAnchor.defaultProps = {
 
 var sizeUnion$2 = ['md', 'sm'];
 function SelectInput(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, label = _a.label, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.required, required = _e === void 0 ? false : _e, selected = _a.selected, setSelected = _a.setSelected, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, children = _a.children, _g = _a.dropContProps, _h = _g === void 0 ? {} : _g, _j = _h.className, dropContClassName = _j === void 0 ? '' : _j, restDropContProps = __rest(_h, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
-    var _k = useState(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = useState(false), isDropUp = _l[0], setIsDropUp = _l[1];
+    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, id = _a.id, _d = _a.isValid, isValid = _d === void 0 ? null : _d, label = _a.label, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.required, required = _f === void 0 ? false : _f, selected = _a.selected, setSelected = _a.setSelected, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, children = _a.children, _h = _a.dropContProps, _j = _h === void 0 ? {} : _h, _k = _j.className, dropContClassName = _k === void 0 ? '' : _k, restDropContProps = __rest(_j, ["className"]), props = __rest(_a, ["descText", "disabled", "size", "id", "isValid", "label", "options", "required", "selected", "setSelected", "onClickDropdown", "children", "dropContProps"]);
+    var _l = useState(false), isOpen = _l[0], setIsOpen = _l[1];
+    var _m = useState(false), isDropUp = _m[0], setIsDropUp = _m[1];
     var validatedSize = validUnion(size, sizeUnion$2);
-    var _m = sizeConfig$8[validatedSize], searchSize = _m.searchSize, iconSize = _m.iconSize;
+    var _o = sizeConfig$8[validatedSize], searchSize = _o.searchSize, iconSize = _o.iconSize;
     var inputRef = useRef(null);
     var dropdownContRef = useRef(null);
     var handleOutsideClick = function (e) {
@@ -2438,12 +2447,18 @@ function SelectInput(_a) {
         }
     }, [isOpen]);
     var dropdownPosition = isDropUp ? 'bottom-full' : 'top-full';
-    return (React.createElement("div", { className: "field-group flex w-full flex-col", ref: inputRef },
+    var descColor = 'text-primary-cool';
+    var isExistValidation = isValid !== null && isValid !== undefined;
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
+    return (React.createElement("div", { className: "bianic-fgc-container bianic-text-input-container field-group flex w-full flex-col", ref: inputRef },
         React.createElement("label", { htmlFor: id, className: "label pb-2 text-xs font-semibold" },
             childrenElement(label),
             required && React.createElement("span", { className: "p-1 text-bia-red" }, "*")),
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", __assign({ className: "field peer w-full cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
+            React.createElement("input", __assign({ className: "bianic-fgc-target field peer w-full  cursor-pointer rounded border border-bia-grey-dark-10 bg-primary-white pe-8 focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:bg-bia-grey-light-80 disabled:text-bia-coolgrey ".concat(searchSize), onClick: function () { return setIsOpen(!isOpen); }, value: selectedLabel, readOnly: true, id: id, disabled: disabled }, props)),
             React.createElement("div", { className: "pointer-events-none absolute inset-y-0 flex items-center pl-3 text-bia-coolgrey peer-disabled:text-bia-coolgrey-light-50 ".concat(iconSize) }, isOpen ? React.createElement(TbChevronUp, null) : React.createElement(TbChevronDown, null)),
             children === undefined && isOpen && (React.createElement("div", { className: "absolute z-10 w-full rounded-b-md border border-bia-grey-dark-10 bg-primary-white shadow-lg ".concat(dropdownPosition), ref: optionsRef, onClick: onClickDropdown }, options.map(function (option) {
                 var isSelected = JSON.stringify(option) === JSON.stringify(selected);
@@ -2469,7 +2484,7 @@ function SelectInput(_a) {
                 }
                 return child;
             })))),
-        descText && (React.createElement("span", { className: "desc mt-2 text-xs text-primary-cool" }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
 }
 SelectInput.defaultProps = {
     descText: '',
@@ -2702,23 +2717,28 @@ var useLiveSearch = function (_a) {
 };
 
 function LiveSearch(_a) {
-    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id, label = _a.label, _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, value = _a.value;
+    var _b = _a.autoComplete, autoComplete = _b === void 0 ? 'off' : _b, _c = _a.children, children = _c === void 0 ? undefined : _c, descText = _a.descText, _d = _a.disabled, disabled = _d === void 0 ? false : _d, dropContProps = _a.dropContProps, id = _a.id; _a.label; var _e = _a.onChangeText, onChangeText = _e === void 0 ? function () { } : _e, _f = _a.onClickDropdown, onClickDropdown = _f === void 0 ? function () { } : _f, options = _a.options, placeholder = _a.placeholder, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.searchVariant, searchVariant = _j === void 0 ? 'include' : _j, setValue = _a.setValue, _k = _a.size, size = _k === void 0 ? 'md' : _k, _l = _a.isValid, isValid = _l === void 0 ? null : _l, value = _a.value;
     var inputRef = useRef(null);
-    var _l = useLiveSearch({
+    var _m = useLiveSearch({
         value: value,
         setValue: setValue,
         onChangeText: onChangeText,
         dropContOnClickItem: dropContProps === null || dropContProps === void 0 ? void 0 : dropContProps.onClickItem,
-    }), isOpen = _l.isOpen, setIsOpen = _l.setIsOpen, searchTerm = _l.searchTerm, handleInputChange = _l.handleInputChange, handleDropdownItemClick = _l.handleDropdownItemClick;
-    var _m = sizeConfig$6[size], iconClass = _m.iconClass, iconSize = _m.iconSize, inputClass = _m.inputClass;
-    var _o = dropContProps || {}, dropContClassName = _o.className; _o.onClickItem; _o.anchorRef; var restDropContProps = __rest(_o, ["className", "onClickItem", "anchorRef"]);
+    }), isOpen = _m.isOpen, setIsOpen = _m.setIsOpen, searchTerm = _m.searchTerm, handleInputChange = _m.handleInputChange, handleDropdownItemClick = _m.handleDropdownItemClick;
+    var _o = sizeConfig$6[size], iconClass = _o.iconClass, iconSize = _o.iconSize, inputClass = _o.inputClass;
+    var _p = dropContProps || {}, dropContClassName = _p.className; _p.onClickItem; _p.anchorRef; var restDropContProps = __rest(_p, ["className", "onClickItem", "anchorRef"]);
     var isValueExist = value && value.label !== undefined && value.label !== '';
+    var descColor = 'text-primary-cool';
+    var isExistValidation = isValid !== null && isValid !== undefined;
+    if (!disabled && isExistValidation && isValid)
+        descColor = 'text-bia-green';
+    if (!disabled && isExistValidation && !isValid)
+        descColor = 'text-bia-red';
     var filteredOptions = filterOptions(options || [], value.label);
-    var _p = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _p.renderedChildren, hasFilteredResults = _p.hasFilteredResults;
-    return (React.createElement("div", { className: "bianic-livesearch field-group group/form flex w-full flex-col gap-y-2 " },
-        label && (React.createElement(FormLabel, { htmlFor: id, required: required, readOnly: readOnly }, label)),
+    var _q = processRenderedChildren(children, searchTerm, searchVariant, handleDropdownItemClick), renderedChildren = _q.renderedChildren, hasFilteredResults = _q.hasFilteredResults;
+    return (React.createElement("div", { className: "bianic-livesearch bianic-fgc-container bianic-text-input-container field-group group/form flex w-full flex-col gap-y-2 " },
         React.createElement("div", { className: "group relative w-full" },
-            React.createElement("input", { className: "bianic-livesearch-input field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
+            React.createElement("input", { className: "bianic-livesearch-input bianic-fgc-target field peer w-full rounded border  border-bia-grey-dark-10 bg-primary-white read-only:pointer-events-none read-only:border-bia-grey-disabled focus-visible:outline-none enabled:hover:rounded-b-none enabled:hover:border-b-bia-blue enabled:focus:rounded-b-none enabled:focus:border-b-bia-blue disabled:border-bia-grey-dark-10 disabled:bg-bia-grey-light-10 disabled:text-bia-coolgrey ".concat(inputClass), onClick: function () { return setIsOpen(!isOpen); }, value: searchTerm, required: required, disabled: disabled, id: id, placeholder: placeholder, ref: inputRef, onChange: function (e) {
                     onChangeText(e);
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
@@ -2740,7 +2760,7 @@ function LiveSearch(_a) {
                 ? renderedChildren
                 : // If no results and searchTerm is present
                     searchTerm.length > 0 && (React.createElement(DropdownItem, { content: React.createElement("div", { className: "px-4 py-2 text-gray-500" }, "Tidak ada hasil ditemukan.") }))))),
-        descText && (React.createElement("span", { className: "desc text-xs text-primary-cool" }, descText))));
+        descText && (React.createElement("span", { className: "bianic-livesearch-desc bianic-text-input-desc whitespace-nowrap text-xs ".concat(descColor) }, descText))));
 }
 LiveSearch.defaultProps = {
     descText: '',
@@ -4216,4 +4236,4 @@ function Window(_a) {
         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, 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, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, 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, Window };
+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, 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, Window };

package/dist/esm/types/components/Forms/{FormLabel.d.ts → Label/FormLabel.d.ts}

@@ -1,5 +1,7 @@
 import React from 'react';
-interface FormLabelProps {
+export interface FormLabelProps {
+    size?: 'sm' | 'md';
+    fontWeight?: 'normal' | 'semibold';
     children: React.ReactNode;
     className?: string;
     htmlFor?: string;
@@ -7,12 +9,14 @@ interface FormLabelProps {
     required?: boolean;
 }
 declare const FormLabel: {
-    ({ children, className, htmlFor, readOnly, required, }: FormLabelProps): React.JSX.Element;
+    ({ children, className, htmlFor, readOnly, required, size, fontWeight, }: FormLabelProps): React.JSX.Element;
     defaultProps: {
         className: string;
         htmlFor: undefined;
         required: boolean;
         readOnly: boolean;
+        size: string;
+        fontWeight: string;
     };
 };
 export default FormLabel;

package/dist/esm/types/components/Forms/Label/FormLabelSimulation.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormLabelProps } from './FormLabel';
+declare const FormLabelSimulation: ({ className, children, htmlFor, required, readOnly, fontWeight, size, }: FormLabelProps) => React.JSX.Element;
+export default FormLabelSimulation;

package/dist/esm/types/components/Forms/LiveSearch/Example/CustomDropdown.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import { LiveSearchProps } from '../types';
 declare const LiveSearchExample: ({ children, ...props }: LiveSearchProps) => React.JSX.Element;
 export default LiveSearchExample;

package/dist/esm/types/components/Forms/LiveSearch/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LiveSearchProps } from './types';
-declare function LiveSearch({ autoComplete, children, descText, disabled, dropContProps, id, label, onChangeText, onClickDropdown, options, placeholder, readOnly, required, searchVariant, setValue, size, value, }: LiveSearchProps): React.JSX.Element;
+declare function LiveSearch({ autoComplete, children, descText, disabled, dropContProps, id, label, onChangeText, onClickDropdown, options, placeholder, readOnly, required, searchVariant, setValue, size, isValid, value, }: LiveSearchProps): React.JSX.Element;
 declare namespace LiveSearch {
     var defaultProps: {
         descText: string;

package/dist/esm/types/components/Forms/LiveSearch/types/index.d.ts

@@ -8,6 +8,7 @@ export interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>,
     disabled?: boolean;
     dropContProps?: Omit<DropdownContainerProps, 'children'>;
     id?: string;
+    isValid?: boolean | null;
     label?: string;
     onChangeText?: (e: ChangeEvent<HTMLInputElement>) => void;
     onClickDropdown?: (event: MouseEvent<HTMLDivElement>) => void;

package/dist/esm/types/components/Forms/SelectInput/PropsInterface.d.ts

@@ -4,6 +4,7 @@ interface SelectInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size
     descText?: string;
     disabled?: boolean;
     id?: string;
+    isValid?: boolean | null;
     size?: 'md' | 'sm';
     label?: string;
     options?: any;

package/dist/esm/types/components/Forms/SelectInput/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import SelectInputProps from './PropsInterface';
-declare function SelectInput({ descText, disabled, size, id, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
+declare function SelectInput({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;

package/dist/esm/types/components/Forms/index.d.ts

@@ -9,3 +9,4 @@ export { SegmentButtonItem, SegmentButtonGroup } from './SegmentButton';
 export { FormGroup, FormGroupButton, FormGroupLabel } from './Group';
 export { DropdownContainer, DropdownItem } from './Dropdown';
 export { DatePicker, PickerCalendar } from './DatePicker';
+export { default as FormLabel } from './Label/FormLabel';

package/dist/esm/types/components/Menu/MenuItem.d.ts

@@ -9,8 +9,9 @@ export interface MenuItemProps extends ComponentPropsWithoutRef<'div'> {
     children?: React.ReactNode | undefined;
     onClose?: () => void;
     zIndex?: number;
+    disabled?: boolean;
 }
-declare function MenuItem({ className, label, onClick, caption, isChecked, onClose, children, zIndex, inheritedOnClick, ...props }: MenuItemProps): React.JSX.Element;
+declare function MenuItem({ className, label, onClick, caption, isChecked, onClose, children, zIndex, inheritedOnClick, disabled, ...props }: MenuItemProps): React.JSX.Element;
 declare namespace MenuItem {
     var defaultProps: {
         className: string;

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

@@ -10,7 +10,7 @@ export { default as Color } from './Color';
 export { default as Divider } from './Divider/Divider';
 export { default as FileTree } from './FileTree';
 export { MenuContainer, MenuItem } from './Menu';
-export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle, SegmentButtonItem, SegmentButtonGroup, FormGroup, FormGroupButton, FormGroupLabel, DropdownItem, DropdownContainer, DatePicker, PickerCalendar, } from './Forms';
+export { TextInput, Radio, TextArea, Checkbox, SelectInput, LiveSearch, Toggle, SegmentButtonItem, SegmentButtonGroup, FormLabel, FormGroup, FormGroupButton, FormGroupLabel, DropdownItem, DropdownContainer, DatePicker, PickerCalendar, } from './Forms';
 export * from './Icons';
 export { default as InfoPanel } from './InfoPanel';
 export { default as Modal } from './Modal/Modal';

package/dist/esm/types/stories/Form/Label/FormLabel.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ className, children, htmlFor, required, readOnly, fontWeight, size, }: import("../../../components/Forms/Label/FormLabel").FormLabelProps) => import("react").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simulation: Story;

package/dist/esm/types/stories/Form/Label/Label.stories.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: {
+        ({ children, className, htmlFor, readOnly, required, size, fontWeight, }: import("../../../components/Forms/Label/FormLabel").FormLabelProps): import("react").JSX.Element;
+        defaultProps: {
+            className: string;
+            htmlFor: undefined;
+            required: boolean;
+            readOnly: boolean;
+            size: string;
+            fontWeight: string;
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;

package/dist/esm/types/stories/Form/LiveSearch/LivesearchCustomDropdownExample.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react/*";
 import React from "react";
 declare const meta: {
     title: string;
-    component: ({ children, ...props }: LiveSearchProps) => React.JSX.Element;
+    component: ({ children, ...props }: import("../../../components/Forms/LiveSearch/types").LiveSearchProps) => React.JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/index.d.ts

@@ -181,8 +181,9 @@ interface MenuItemProps extends ComponentPropsWithoutRef<'div'> {
     children?: React$1.ReactNode | undefined;
     onClose?: () => void;
     zIndex?: number;
+    disabled?: boolean;
 }
-declare function MenuItem({ className, label, onClick, caption, isChecked, onClose, children, zIndex, inheritedOnClick, ...props }: MenuItemProps): React$1.JSX.Element;
+declare function MenuItem({ className, label, onClick, caption, isChecked, onClose, children, zIndex, inheritedOnClick, disabled, ...props }: MenuItemProps): React$1.JSX.Element;
 declare namespace MenuItem {
     var defaultProps: {
         className: string;
@@ -304,6 +305,7 @@ interface SelectInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size
     descText?: string;
     disabled?: boolean;
     id?: string;
+    isValid?: boolean | null;
     size?: 'md' | 'sm';
     label?: string;
     options?: any;
@@ -317,7 +319,7 @@ interface SelectInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size
     dropContProps?: Omit<DropdownContainerProps, 'children'>;
 }
 
-declare function SelectInput({ descText, disabled, size, id, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React$1.JSX.Element;
+declare function SelectInput({ descText, disabled, size, id, isValid, label, options, required, selected, setSelected, onClickDropdown, children, dropContProps: { className: dropContClassName, ...restDropContProps }, ...props }: SelectInputProps): React$1.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;
@@ -339,6 +341,7 @@ interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'
     disabled?: boolean;
     dropContProps?: Omit<DropdownContainerProps, 'children'>;
     id?: string;
+    isValid?: boolean | null;
     label?: string;
     onChangeText?: (e: ChangeEvent<HTMLInputElement>) => void;
     onClickDropdown?: (event: MouseEvent<HTMLDivElement>) => void;
@@ -352,7 +355,7 @@ interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'
     value: any;
 }
 
-declare function LiveSearch({ autoComplete, children, descText, disabled, dropContProps, id, label, onChangeText, onClickDropdown, options, placeholder, readOnly, required, searchVariant, setValue, size, value, }: LiveSearchProps): React$1.JSX.Element;
+declare function LiveSearch({ autoComplete, children, descText, disabled, dropContProps, id, label, onChangeText, onClickDropdown, options, placeholder, readOnly, required, searchVariant, setValue, size, isValid, value, }: LiveSearchProps): React$1.JSX.Element;
 declare namespace LiveSearch {
     var defaultProps: {
         descText: string;
@@ -470,6 +473,27 @@ interface PickerCalendarProps extends ComponentPropsWithRef<'div'> {
 
 declare const PickerCalendar: React$1.FC<PickerCalendarProps>;
 
+interface FormLabelProps {
+    size?: 'sm' | 'md';
+    fontWeight?: 'normal' | 'semibold';
+    children: React$1.ReactNode;
+    className?: string;
+    htmlFor?: string;
+    readOnly?: boolean;
+    required?: boolean;
+}
+declare const FormLabel: {
+    ({ children, className, htmlFor, readOnly, required, size, fontWeight, }: FormLabelProps): React$1.JSX.Element;
+    defaultProps: {
+        className: string;
+        htmlFor: undefined;
+        required: boolean;
+        readOnly: boolean;
+        size: string;
+        fontWeight: string;
+    };
+};
+
 interface IconProps {
     className?: string;
     size?: number | string;
@@ -796,4 +820,4 @@ interface WindowProps extends ComponentPropsWithRef<'div'> {
 }
 declare function Window({ size, title, zIndex, onClose, ...rest }: WindowProps): React$1.JSX.Element;
 
-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, Checkbox, Color, ContextualButton, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, 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, Window };
+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, 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, Window };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "2.0.0",
+  "version": "2.1.0-beta.1",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",