bianic-ui 1.16.0-beta.0 → 1.16.0-beta.1

package/dist/cjs/index.js

@@ -2520,111 +2520,129 @@ var matchSearchTerm = function (content, term, variant) {
             return lowerContent.includes(lowerTerm);
     }
 };
-function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k, _l = _a.searchVariant, searchVariant = _l === void 0 ? 'include' : _l;
-    var _m = React.useState(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = React.useState(value.label || ''), searchTerm = _o[0], setSearchTerm = _o[1];
-    var _p = sizeConfig$6[size], iconClass = _p.iconClass, iconSize = _p.iconSize, inputClass = _p.inputClass;
-    var dropContClassName = dropContProps.className, dropContOnClickItem = dropContProps.onClickItem, restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
-    var isValueExist = value && value.label !== undefined && value.label !== '';
-    var inputRef = React.useRef(null);
-    var dropdownContRef = React.useRef(null);
-    // Will be used soon
-    // const handleOutsideClick = (e: MouseEvent) => {
-    //   if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
-    //     setIsOpen(false)
-    //   }
-    // }
-    // useEffect(() => {
-    //   document.addEventListener('mousedown', handleOutsideClick)
-    //   return () => {
-    //     document.removeEventListener('mousedown', handleOutsideClick)
-    //   }
-    // })
-    // Synchronize internal searchTerm with external value prop
-    React.useEffect(function () {
-        // Only update searchTerm if the label from the value prop differs from the current searchTerm
-        // This prevents infinite loops if searchTerm is already the same as value.label
-        if (value.label !== searchTerm) {
-            setSearchTerm(value.label || '');
-        }
-    }, [value.label, searchTerm]);
-    var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (item) {
-        return item.label.toLowerCase().includes(value.label.toLowerCase());
+var filterOptions = function (options, searchTerm) {
+    return options === null || options === void 0 ? void 0 : options.filter(function (item) {
+        return item.label.toLowerCase().includes(searchTerm.toLowerCase());
     });
-    var handleInputChange = function (e) {
-        var newSearchTerm = e.target.value;
-        setSearchTerm(newSearchTerm);
-        setIsOpen(true); // Ensure dropdown opens when typing
-    };
-    var handleDropdownItemClick = React.useCallback(function (clickedValue) {
-        setSearchTerm(clickedValue.label); // Set input text to the selected label
-        setValue(clickedValue); // Update the value in the parent
-        setIsOpen(false);
-    }, [setValue]);
-    // Recursive function to filter and clone DropdownItems, including nested items
-    var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch) {
-        return React.Children.map(nodes, function (child) {
-            if (!React.isValidElement(child) || child.type !== DropdownItem) {
-                return child;
-            }
-            var itemProps = child.props;
-            // Assume content is a string for filtering; otherwise, filtering won't work well
-            var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
-            var itemValue = itemProps.value;
-            var isDisabled = itemProps.disabled;
-            // 2. Filtering Logic (Uses Global Search Variant)
-            if (!includeAllIfNoSearch) {
-                // Use the matchSearchTerm utility with the selected searchVariant
-                if (currentSearchTerm && !matchSearchTerm(itemValue, currentSearchTerm, searchVariant)) {
-                    return null; // Item does not match the search criteria
-                }
+};
+
+var getItemLabel = function (value) {
+    var _a;
+    return typeof value === 'object' && value !== null && 'label' in value
+        ? (_a = value.label) !== null && _a !== void 0 ? _a : ''
+        : String(value !== null && value !== void 0 ? value : '');
+};
+var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick) {
+    if (searchVariant === void 0) { searchVariant = 'include'; }
+    return React.Children.map(nodes, function (child) {
+        if (!React.isValidElement(child) || child.type !== DropdownItem) {
+            return child;
+        }
+        var itemProps = child.props;
+        var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
+        var itemValue = itemProps.value;
+        var isDisabled = itemProps.disabled;
+        // Filtering Logic
+        if (!includeAllIfNoSearch) {
+            var itemValueStr = typeof itemValue === 'object'
+                ? itemValue.label
+                : String(itemValue || '');
+            if (currentSearchTerm &&
+                !matchSearchTerm(itemValueStr, currentSearchTerm, searchVariant)) {
+                return null;
             }
-            // 3. Process Nested Children (Recursion)
-            var clonedChildren = itemProps.children
-                ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch)
-                : null;
-            // 4. Clone and Inject Click Handler
-            return React.cloneElement(child, {
-                onClick: function (e) {
-                    if (!isDisabled) {
-                        handleDropdownItemClick({
-                            id: itemValue !== undefined ? itemValue : itemContent,
-                            label: itemValue !== undefined ? itemValue : itemContent
-                        });
-                    }
-                    if (dropContOnClickItem) {
-                        dropContOnClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+        }
+        // Process Nested Children
+        var clonedChildren = itemProps.children
+            ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick)
+            : null;
+        // Clone and Inject Click Handler
+        return React.cloneElement(child, {
+            onClick: function (e) {
+                if (!isDisabled) {
+                    if (itemValue === undefined &&
+                        typeof itemProps.content === 'string') {
+                        return handleDropdownItemClick(e, itemContent);
                     }
-                    if (itemProps.onClickItem) {
-                        itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                    if (typeof itemValue === 'object' || itemValue !== undefined) {
+                        return handleDropdownItemClick(e, itemValue);
                     }
-                },
-                children: clonedChildren
-            });
+                }
+                if (itemProps.onClickItem) {
+                    itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                }
+            },
+            children: clonedChildren,
         });
-    };
-    // Determine which children to display
+    });
+};
+var processRenderedChildren = function (children, searchTerm, searchVariant, handleDropdownItemClick) {
     var renderedChildren = null;
     var hasFilteredResults = false;
     if (searchTerm) {
-        // If there's a searchTerm, filter children
-        renderedChildren = processDropdownChildren(children, searchTerm, false);
+        renderedChildren = processDropdownChildren(children, searchTerm, false, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
             React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
     else {
-        // If searchTerm is empty, display all children without filtering (but with onClick injected)
-        renderedChildren = processDropdownChildren(children, '', true);
+        renderedChildren = processDropdownChildren(children, '', true, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
-            React.Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
+            React.Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
+    return { renderedChildren: renderedChildren, hasFilteredResults: hasFilteredResults };
+};
+
+var useLiveSearch = function (_a) {
+    var value = _a.value, setValue = _a.setValue, onChangeText = _a.onChangeText, dropContOnClickItem = _a.dropContOnClickItem;
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = React.useState(String(value.label || '')), searchTerm = _c[0], setSearchTerm = _c[1];
+    React.useEffect(function () {
+        if (!isOpen && searchTerm !== '') {
+            setSearchTerm(getItemLabel(value));
+        }
+    }, [isOpen]);
+    var handleInputChange = function (e) {
+        var newSearchTerm = e.target.value;
+        setSearchTerm(newSearchTerm);
+        setIsOpen(true);
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(e);
+    };
+    var handleDropdownItemClick = React.useCallback(function (event, clickedValue) {
+        dropContOnClickItem === null || dropContOnClickItem === void 0 ? void 0 : dropContOnClickItem(event, clickedValue);
+        var newLabel = getItemLabel(clickedValue);
+        setSearchTerm(newLabel);
+        setValue(clickedValue);
+        setIsOpen(false);
+    }, [setValue, dropContOnClickItem]);
+    return {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        searchTerm: searchTerm,
+        handleInputChange: handleInputChange,
+        handleDropdownItemClick: handleDropdownItemClick,
+    };
+};
+
+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, _e = _a.dropContProps, dropContProps = _e === void 0 ? { className: undefined } : _e, id = _a.id, label = _a.label, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, options = _a.options, placeholder = _a.placeholder, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.searchVariant, searchVariant = _k === void 0 ? 'include' : _k, setValue = _a.setValue, _l = _a.size, size = _l === void 0 ? 'md' : _l, value = _a.value;
+    var inputRef = React.useRef(null);
+    var dropdownContRef = React.useRef(null);
+    var _m = useLiveSearch({
+        value: value,
+        setValue: setValue,
+        onChangeText: onChangeText,
+        dropContOnClickItem: dropContProps.onClickItem
+    }), 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 dropContClassName = dropContProps.className; dropContProps.onClickItem; var restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
+    var isValueExist = value && value.label !== undefined && value.label !== '';
+    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)),
         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) {
                     onChangeText(e);
-                    setValue({ id: null, label: e.target.value });
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
@@ -3340,18 +3358,17 @@ var sizeConfig$3 = {
 };
 
 var InfoPanel = function (_a) {
-    var variant = _a.variant, color = _a.color, className = _a.className, textClassName = _a.textClassName;
+    var variant = _a.variant, color = _a.color, className = _a.className, children = _a.children;
     var sizeClass = sizeConfig$3[variant || 'container'];
     var colorClass = colorConfig$1[color || 'yellow'];
     var allClasses = "".concat(sizeClass, " ").concat(colorClass, " ").concat(className);
-    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) },
-        React.createElement(Text, { variant: "medium-text", extended: textClassName }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")));
+    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) }, children));
 };
 InfoPanel.defaultProps = {
     variant: 'container',
     color: 'yellow',
     className: '',
-    textClassName: '',
+    children: null,
 };
 
 function Modal(_a) {
@@ -3756,7 +3773,7 @@ var configTab = {
 };
 
 function Tab(_a) {
-    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size"]);
+    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, className = _a.className, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size", "className"]);
     var disabledKeyTab = disabled || active ? ' pointer-events-none' : '';
     var cursor;
     if (disabled) {
@@ -3777,8 +3794,9 @@ function Tab(_a) {
     var activeKeyTab = active
         ? 'group-disabled:text-bia-coolgrey-disabled text-primary-black'
         : 'text-bia-coolgrey group-hover:text-bia-coolgrey-hover group-active:text-bia-coolgrey-active group-disabled:text-bia-coolgrey-disabled';
+    var buttonClassName = "".concat(horizontalButtonStyle, " ").concat(disabledKeyTab, " ").concat(fit, " ").concat(className ? className : '');
     return (React.createElement("div", { className: "".concat(mode === 'horizontal' ? 'h-full' : 'w-full', " ").concat(cursor) },
-        React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "flex items-stretch justify-between ".concat(horizontalButtonStyle, " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
+        React.createElement("button", __assign({ type: "button", className: "flex items-stretch justify-between  group relative outline-none ".concat(buttonClassName), disabled: disabled }, rest),
             React.createElement("div", { className: "flex items-center justify-center ".concat(buttonContentStyle) },
                 React.createElement("div", { className: "flex  items-center justify-center " },
                     React.createElement("div", { className: "flex items-center space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },

package/dist/cjs/types/components/Forms/Dropdown/DropdownContainer.d.ts

@@ -9,7 +9,7 @@ export interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
     size?: 'sm' | 'md';
     zIndex?: number;
     anchorRef?: React.RefObject<HTMLElement>;
-    onClickItem?: (event: React.MouseEvent<HTMLDivElement>, val: string | number) => void;
+    onClickItem?: (event: React.MouseEvent<HTMLDivElement>, val: string | number | object) => void;
 }
 declare const DropdownContainer: {
     (propsComp: DropdownContainerProps): React.JSX.Element | null;

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LiveSearchProps } from '../types';
+declare function DeprecatedSimulation({ setValue, value, ...props }: LiveSearchProps): React.JSX.Element;
+export default DeprecatedSimulation;

package/dist/cjs/types/components/Forms/LiveSearch/hooks/useLiveSearch.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEvent, MouseEvent } from 'react';
+import { LiveSearchHookProps } from '../types';
+export declare const useLiveSearch: ({ value, setValue, onChangeText, dropContOnClickItem, }: LiveSearchHookProps) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    searchTerm: string;
+    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleDropdownItemClick: (event: MouseEvent<HTMLDivElement>, clickedValue: any) => void;
+};

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

@@ -1,10 +1,6 @@
 import React from 'react';
-import LiveSearchProps from './PropsInterface';
-export interface LiveSearchOption {
-    id: string | number | null;
-    label: string | number;
-}
-declare function LiveSearch({ descText, disabled, id, size, label, placeholder, required, options, setValue, value, readOnly, onChangeText, onClickDropdown, autoComplete, children, dropContProps, searchVariant, }: LiveSearchProps): React.JSX.Element;
+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 namespace LiveSearch {
     var defaultProps: {
         descText: string;

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

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, MouseEvent, ChangeEvent, ReactNode } from 'react';
+import { DropdownContainerProps } from '../../Dropdown/DropdownContainer';
+export type SearchVariant = 'include' | 'startsWith' | 'endsWith';
+export interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'value'> {
+    autoComplete?: string;
+    children?: ReactNode;
+    descText?: string;
+    disabled?: boolean;
+    dropContProps?: Omit<DropdownContainerProps, 'children'>;
+    id?: string;
+    label?: string;
+    onChangeText?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClickDropdown?: (event: MouseEvent<HTMLDivElement>) => void;
+    options?: any[];
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    searchVariant?: SearchVariant;
+    setValue: (value: any) => void;
+    size?: 'md' | 'sm';
+    value: any;
+}
+export interface LiveSearchHookProps {
+    value: any;
+    setValue: (value: any) => void;
+    onChangeText?: (e: ChangeEvent<HTMLInputElement>) => void;
+    dropContOnClickItem?: (event: MouseEvent<HTMLDivElement>, value: any) => void;
+    searchVariant?: SearchVariant;
+}
+export interface DropdownItemProps {
+    content: string | ReactNode;
+    value?: any;
+    disabled?: boolean;
+    onClickItem?: (event: MouseEvent<HTMLDivElement>, value: any) => void;
+    children?: ReactNode;
+}

package/dist/cjs/types/components/Forms/LiveSearch/utils/dropdownUtils.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SearchVariant } from '../types';
+export declare const getItemLabel: (value: any) => string;
+export declare const processDropdownChildren: (nodes: React.ReactNode, currentSearchTerm: string, includeAllIfNoSearch: boolean, searchVariant: SearchVariant | undefined, handleDropdownItemClick: (e: React.MouseEvent<HTMLDivElement>, value: any) => void) => React.ReactNode;
+export declare const processRenderedChildren: (children: React.ReactNode | undefined, searchTerm: string, searchVariant: SearchVariant, handleDropdownItemClick: (e: React.MouseEvent<HTMLDivElement>, value: any) => void) => {
+    renderedChildren: React.ReactNode;
+    hasFilteredResults: boolean;
+};

package/dist/cjs/types/components/Forms/LiveSearch/utils/searchUtils.d.ts

@@ -0,0 +1,3 @@
+import { SearchVariant } from '../types';
+export declare const matchSearchTerm: (content: string, term: string, variant: SearchVariant) => boolean;
+export declare const filterOptions: (options: any[], searchTerm: string) => any[];

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

@@ -3,15 +3,15 @@ interface InfoPanelProps {
     variant?: 'container' | 'form-sm' | 'form-md';
     color?: 'yellow' | 'blue' | 'grey' | 'white';
     className?: string;
-    textClassName?: string;
+    children: React.ReactNode;
 }
 declare const InfoPanel: {
-    ({ variant, color, className, textClassName, }: InfoPanelProps): React.JSX.Element;
+    ({ variant, color, className, children, }: InfoPanelProps): React.JSX.Element;
     defaultProps: {
         variant: string;
         color: string;
         className: string;
-        textClassName: string;
+        children: null;
     };
 };
 export default InfoPanel;

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

@@ -6,5 +6,6 @@ export interface TabProps extends ComponentPropsWithoutRef<'button'> {
     mode?: 'horizontal' | 'vertical';
     fit?: 'fit-content' | 'maximize';
     size?: 'md' | 'sm';
+    className?: string;
 }
-export default function Tab({ children, active, icon, disabled, mode, fit, size, ...rest }: TabProps): React.JSX.Element;
+export default function Tab({ children, active, icon, disabled, mode, fit, size, className, ...rest }: TabProps): React.JSX.Element;

package/dist/{esm/types/stories/Form/LiveSearch/LivesearchOld.stories.d.ts → cjs/types/stories/Form/LiveSearch/DeprecatedSimulation.stories.d.ts}

@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/react';
-import LiveSearchSimulation from '../../../components/Forms/LiveSearch/Simulation';
+import DeprecatedSimulation from '../../../components/Forms/LiveSearch/Example/DeprecatedSimulation';
 declare const meta: {
     title: string;
-    component: typeof LiveSearchSimulation;
+    component: typeof DeprecatedSimulation;
     parameters: {
         layout: string;
     };

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

@@ -1,12 +1,13 @@
-/// <reference types="react" />
 import { StoryObj } from "@storybook/react/*";
+import React from "react";
 declare const meta: {
     title: string;
-    component: ({ ...props }: import("../../../components/Forms/LiveSearch/PropsInterface").default) => import("react").JSX.Element;
+    component: ({ children, ...props }: LiveSearchProps) => React.JSX.Element;
     parameters: {
         layout: string;
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Example: Story;
+export declare const BasicExample: Story;
+export declare const ObjectOptionsExample: Story;

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, forwardRef, useRef, cloneElement, Children, useLayoutEffect, useCallback, isValidElement } from 'react';
+import React, { useState, useEffect, forwardRef, useRef, cloneElement, Children, useLayoutEffect, isValidElement, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
 function Accordions(_a) {
@@ -2518,111 +2518,129 @@ var matchSearchTerm = function (content, term, variant) {
             return lowerContent.includes(lowerTerm);
     }
 };
-function LiveSearch(_a) {
-    var descText = _a.descText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, placeholder = _a.placeholder, _d = _a.required, required = _d === void 0 ? false : _d, options = _a.options, setValue = _a.setValue, value = _a.value, _e = _a.readOnly, readOnly = _e === void 0 ? false : _e, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, _h = _a.autoComplete, autoComplete = _h === void 0 ? 'off' : _h, _j = _a.children, children = _j === void 0 ? undefined : _j, _k = _a.dropContProps, dropContProps = _k === void 0 ? { className: undefined } : _k, _l = _a.searchVariant, searchVariant = _l === void 0 ? 'include' : _l;
-    var _m = useState(false), isOpen = _m[0], setIsOpen = _m[1];
-    var _o = useState(value.label || ''), searchTerm = _o[0], setSearchTerm = _o[1];
-    var _p = sizeConfig$6[size], iconClass = _p.iconClass, iconSize = _p.iconSize, inputClass = _p.inputClass;
-    var dropContClassName = dropContProps.className, dropContOnClickItem = dropContProps.onClickItem, restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
-    var isValueExist = value && value.label !== undefined && value.label !== '';
-    var inputRef = useRef(null);
-    var dropdownContRef = useRef(null);
-    // Will be used soon
-    // const handleOutsideClick = (e: MouseEvent) => {
-    //   if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
-    //     setIsOpen(false)
-    //   }
-    // }
-    // useEffect(() => {
-    //   document.addEventListener('mousedown', handleOutsideClick)
-    //   return () => {
-    //     document.removeEventListener('mousedown', handleOutsideClick)
-    //   }
-    // })
-    // Synchronize internal searchTerm with external value prop
-    useEffect(function () {
-        // Only update searchTerm if the label from the value prop differs from the current searchTerm
-        // This prevents infinite loops if searchTerm is already the same as value.label
-        if (value.label !== searchTerm) {
-            setSearchTerm(value.label || '');
-        }
-    }, [value.label, searchTerm]);
-    var filteredOptions = options === null || options === void 0 ? void 0 : options.filter(function (item) {
-        return item.label.toLowerCase().includes(value.label.toLowerCase());
+var filterOptions = function (options, searchTerm) {
+    return options === null || options === void 0 ? void 0 : options.filter(function (item) {
+        return item.label.toLowerCase().includes(searchTerm.toLowerCase());
     });
-    var handleInputChange = function (e) {
-        var newSearchTerm = e.target.value;
-        setSearchTerm(newSearchTerm);
-        setIsOpen(true); // Ensure dropdown opens when typing
-    };
-    var handleDropdownItemClick = useCallback(function (clickedValue) {
-        setSearchTerm(clickedValue.label); // Set input text to the selected label
-        setValue(clickedValue); // Update the value in the parent
-        setIsOpen(false);
-    }, [setValue]);
-    // Recursive function to filter and clone DropdownItems, including nested items
-    var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch) {
-        return Children.map(nodes, function (child) {
-            if (!isValidElement(child) || child.type !== DropdownItem) {
-                return child;
-            }
-            var itemProps = child.props;
-            // Assume content is a string for filtering; otherwise, filtering won't work well
-            var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
-            var itemValue = itemProps.value;
-            var isDisabled = itemProps.disabled;
-            // 2. Filtering Logic (Uses Global Search Variant)
-            if (!includeAllIfNoSearch) {
-                // Use the matchSearchTerm utility with the selected searchVariant
-                if (currentSearchTerm && !matchSearchTerm(itemValue, currentSearchTerm, searchVariant)) {
-                    return null; // Item does not match the search criteria
-                }
+};
+
+var getItemLabel = function (value) {
+    var _a;
+    return typeof value === 'object' && value !== null && 'label' in value
+        ? (_a = value.label) !== null && _a !== void 0 ? _a : ''
+        : String(value !== null && value !== void 0 ? value : '');
+};
+var processDropdownChildren = function (nodes, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick) {
+    if (searchVariant === void 0) { searchVariant = 'include'; }
+    return Children.map(nodes, function (child) {
+        if (!isValidElement(child) || child.type !== DropdownItem) {
+            return child;
+        }
+        var itemProps = child.props;
+        var itemContent = typeof itemProps.content === 'string' ? itemProps.content : '';
+        var itemValue = itemProps.value;
+        var isDisabled = itemProps.disabled;
+        // Filtering Logic
+        if (!includeAllIfNoSearch) {
+            var itemValueStr = typeof itemValue === 'object'
+                ? itemValue.label
+                : String(itemValue || '');
+            if (currentSearchTerm &&
+                !matchSearchTerm(itemValueStr, currentSearchTerm, searchVariant)) {
+                return null;
             }
-            // 3. Process Nested Children (Recursion)
-            var clonedChildren = itemProps.children
-                ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch)
-                : null;
-            // 4. Clone and Inject Click Handler
-            return cloneElement(child, {
-                onClick: function (e) {
-                    if (!isDisabled) {
-                        handleDropdownItemClick({
-                            id: itemValue !== undefined ? itemValue : itemContent,
-                            label: itemValue !== undefined ? itemValue : itemContent
-                        });
-                    }
-                    if (dropContOnClickItem) {
-                        dropContOnClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+        }
+        // Process Nested Children
+        var clonedChildren = itemProps.children
+            ? processDropdownChildren(itemProps.children, currentSearchTerm, includeAllIfNoSearch, searchVariant, handleDropdownItemClick)
+            : null;
+        // Clone and Inject Click Handler
+        return cloneElement(child, {
+            onClick: function (e) {
+                if (!isDisabled) {
+                    if (itemValue === undefined &&
+                        typeof itemProps.content === 'string') {
+                        return handleDropdownItemClick(e, itemContent);
                     }
-                    if (itemProps.onClickItem) {
-                        itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                    if (typeof itemValue === 'object' || itemValue !== undefined) {
+                        return handleDropdownItemClick(e, itemValue);
                     }
-                },
-                children: clonedChildren
-            });
+                }
+                if (itemProps.onClickItem) {
+                    itemProps.onClickItem(e, itemValue !== undefined ? itemValue : itemContent);
+                }
+            },
+            children: clonedChildren,
         });
-    };
-    // Determine which children to display
+    });
+};
+var processRenderedChildren = function (children, searchTerm, searchVariant, handleDropdownItemClick) {
     var renderedChildren = null;
     var hasFilteredResults = false;
     if (searchTerm) {
-        // If there's a searchTerm, filter children
-        renderedChildren = processDropdownChildren(children, searchTerm, false);
+        renderedChildren = processDropdownChildren(children, searchTerm, false, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
             Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
     else {
-        // If searchTerm is empty, display all children without filtering (but with onClick injected)
-        renderedChildren = processDropdownChildren(children, '', true);
+        renderedChildren = processDropdownChildren(children, '', true, searchVariant, handleDropdownItemClick);
         hasFilteredResults =
-            Children.toArray(renderedChildren).filter(Boolean).length > 0; // Should always be true if there are initial children
+            Children.toArray(renderedChildren).filter(Boolean).length > 0;
     }
+    return { renderedChildren: renderedChildren, hasFilteredResults: hasFilteredResults };
+};
+
+var useLiveSearch = function (_a) {
+    var value = _a.value, setValue = _a.setValue, onChangeText = _a.onChangeText, dropContOnClickItem = _a.dropContOnClickItem;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = useState(String(value.label || '')), searchTerm = _c[0], setSearchTerm = _c[1];
+    useEffect(function () {
+        if (!isOpen && searchTerm !== '') {
+            setSearchTerm(getItemLabel(value));
+        }
+    }, [isOpen]);
+    var handleInputChange = function (e) {
+        var newSearchTerm = e.target.value;
+        setSearchTerm(newSearchTerm);
+        setIsOpen(true);
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(e);
+    };
+    var handleDropdownItemClick = useCallback(function (event, clickedValue) {
+        dropContOnClickItem === null || dropContOnClickItem === void 0 ? void 0 : dropContOnClickItem(event, clickedValue);
+        var newLabel = getItemLabel(clickedValue);
+        setSearchTerm(newLabel);
+        setValue(clickedValue);
+        setIsOpen(false);
+    }, [setValue, dropContOnClickItem]);
+    return {
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        searchTerm: searchTerm,
+        handleInputChange: handleInputChange,
+        handleDropdownItemClick: handleDropdownItemClick,
+    };
+};
+
+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, _e = _a.dropContProps, dropContProps = _e === void 0 ? { className: undefined } : _e, id = _a.id, label = _a.label, _f = _a.onChangeText, onChangeText = _f === void 0 ? function () { } : _f, _g = _a.onClickDropdown, onClickDropdown = _g === void 0 ? function () { } : _g, options = _a.options, placeholder = _a.placeholder, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, _k = _a.searchVariant, searchVariant = _k === void 0 ? 'include' : _k, setValue = _a.setValue, _l = _a.size, size = _l === void 0 ? 'md' : _l, value = _a.value;
+    var inputRef = useRef(null);
+    var dropdownContRef = useRef(null);
+    var _m = useLiveSearch({
+        value: value,
+        setValue: setValue,
+        onChangeText: onChangeText,
+        dropContOnClickItem: dropContProps.onClickItem
+    }), 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 dropContClassName = dropContProps.className; dropContProps.onClickItem; var restDropContProps = __rest(dropContProps, ["className", "onClickItem"]);
+    var isValueExist = value && value.label !== undefined && value.label !== '';
+    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)),
         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) {
                     onChangeText(e);
-                    setValue({ id: null, label: e.target.value });
                     handleInputChange(e);
                 }, type: "text", readOnly: readOnly, autoComplete: autoComplete }),
             React.createElement("div", { className: "absolute inset-y-0 flex items-center pl-3 ".concat(iconClass) },
@@ -3338,18 +3356,17 @@ var sizeConfig$3 = {
 };
 
 var InfoPanel = function (_a) {
-    var variant = _a.variant, color = _a.color, className = _a.className, textClassName = _a.textClassName;
+    var variant = _a.variant, color = _a.color, className = _a.className, children = _a.children;
     var sizeClass = sizeConfig$3[variant || 'container'];
     var colorClass = colorConfig$1[color || 'yellow'];
     var allClasses = "".concat(sizeClass, " ").concat(colorClass, " ").concat(className);
-    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) },
-        React.createElement(Text, { variant: "medium-text", extended: textClassName }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")));
+    return (React.createElement("div", { className: "flex items-center justify-center rounded-radius-md ".concat(allClasses) }, children));
 };
 InfoPanel.defaultProps = {
     variant: 'container',
     color: 'yellow',
     className: '',
-    textClassName: '',
+    children: null,
 };
 
 function Modal(_a) {
@@ -3754,7 +3771,7 @@ var configTab = {
 };
 
 function Tab(_a) {
-    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size"]);
+    var children = _a.children, active = _a.active, icon = _a.icon, disabled = _a.disabled, _b = _a.mode, mode = _b === void 0 ? 'horizontal' : _b, _c = _a.fit, fit = _c === void 0 ? 'fit-content' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, className = _a.className, rest = __rest(_a, ["children", "active", "icon", "disabled", "mode", "fit", "size", "className"]);
     var disabledKeyTab = disabled || active ? ' pointer-events-none' : '';
     var cursor;
     if (disabled) {
@@ -3775,8 +3792,9 @@ function Tab(_a) {
     var activeKeyTab = active
         ? 'group-disabled:text-bia-coolgrey-disabled text-primary-black'
         : 'text-bia-coolgrey group-hover:text-bia-coolgrey-hover group-active:text-bia-coolgrey-active group-disabled:text-bia-coolgrey-disabled';
+    var buttonClassName = "".concat(horizontalButtonStyle, " ").concat(disabledKeyTab, " ").concat(fit, " ").concat(className ? className : '');
     return (React.createElement("div", { className: "".concat(mode === 'horizontal' ? 'h-full' : 'w-full', " ").concat(cursor) },
-        React.createElement("button", __assign({ type: "button", disabled: disabled }, rest, { className: "flex items-stretch justify-between ".concat(horizontalButtonStyle, " group relative outline-none ").concat(disabledKeyTab, " ").concat(fit) }),
+        React.createElement("button", __assign({ type: "button", className: "flex items-stretch justify-between  group relative outline-none ".concat(buttonClassName), disabled: disabled }, rest),
             React.createElement("div", { className: "flex items-center justify-center ".concat(buttonContentStyle) },
                 React.createElement("div", { className: "flex  items-center justify-center " },
                     React.createElement("div", { className: "flex items-center space-x-1 text-nowrap ".concat(activeKeyTab, " ").concat(configTab[size].text) },

package/dist/esm/types/components/Forms/Dropdown/DropdownContainer.d.ts

@@ -9,7 +9,7 @@ export interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
     size?: 'sm' | 'md';
     zIndex?: number;
     anchorRef?: React.RefObject<HTMLElement>;
-    onClickItem?: (event: React.MouseEvent<HTMLDivElement>, val: string | number) => void;
+    onClickItem?: (event: React.MouseEvent<HTMLDivElement>, val: string | number | object) => void;
 }
 declare const DropdownContainer: {
     (propsComp: DropdownContainerProps): React.JSX.Element | null;

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LiveSearchProps } from '../types';
+declare function DeprecatedSimulation({ setValue, value, ...props }: LiveSearchProps): React.JSX.Element;
+export default DeprecatedSimulation;

package/dist/esm/types/components/Forms/LiveSearch/hooks/useLiveSearch.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEvent, MouseEvent } from 'react';
+import { LiveSearchHookProps } from '../types';
+export declare const useLiveSearch: ({ value, setValue, onChangeText, dropContOnClickItem, }: LiveSearchHookProps) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    searchTerm: string;
+    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleDropdownItemClick: (event: MouseEvent<HTMLDivElement>, clickedValue: any) => void;
+};

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

@@ -1,10 +1,6 @@
 import React from 'react';
-import LiveSearchProps from './PropsInterface';
-export interface LiveSearchOption {
-    id: string | number | null;
-    label: string | number;
-}
-declare function LiveSearch({ descText, disabled, id, size, label, placeholder, required, options, setValue, value, readOnly, onChangeText, onClickDropdown, autoComplete, children, dropContProps, searchVariant, }: LiveSearchProps): React.JSX.Element;
+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 namespace LiveSearch {
     var defaultProps: {
         descText: string;

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

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, MouseEvent, ChangeEvent, ReactNode } from 'react';
+import { DropdownContainerProps } from '../../Dropdown/DropdownContainer';
+export type SearchVariant = 'include' | 'startsWith' | 'endsWith';
+export interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'value'> {
+    autoComplete?: string;
+    children?: ReactNode;
+    descText?: string;
+    disabled?: boolean;
+    dropContProps?: Omit<DropdownContainerProps, 'children'>;
+    id?: string;
+    label?: string;
+    onChangeText?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClickDropdown?: (event: MouseEvent<HTMLDivElement>) => void;
+    options?: any[];
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    searchVariant?: SearchVariant;
+    setValue: (value: any) => void;
+    size?: 'md' | 'sm';
+    value: any;
+}
+export interface LiveSearchHookProps {
+    value: any;
+    setValue: (value: any) => void;
+    onChangeText?: (e: ChangeEvent<HTMLInputElement>) => void;
+    dropContOnClickItem?: (event: MouseEvent<HTMLDivElement>, value: any) => void;
+    searchVariant?: SearchVariant;
+}
+export interface DropdownItemProps {
+    content: string | ReactNode;
+    value?: any;
+    disabled?: boolean;
+    onClickItem?: (event: MouseEvent<HTMLDivElement>, value: any) => void;
+    children?: ReactNode;
+}

package/dist/esm/types/components/Forms/LiveSearch/utils/dropdownUtils.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SearchVariant } from '../types';
+export declare const getItemLabel: (value: any) => string;
+export declare const processDropdownChildren: (nodes: React.ReactNode, currentSearchTerm: string, includeAllIfNoSearch: boolean, searchVariant: SearchVariant | undefined, handleDropdownItemClick: (e: React.MouseEvent<HTMLDivElement>, value: any) => void) => React.ReactNode;
+export declare const processRenderedChildren: (children: React.ReactNode | undefined, searchTerm: string, searchVariant: SearchVariant, handleDropdownItemClick: (e: React.MouseEvent<HTMLDivElement>, value: any) => void) => {
+    renderedChildren: React.ReactNode;
+    hasFilteredResults: boolean;
+};

package/dist/esm/types/components/Forms/LiveSearch/utils/searchUtils.d.ts

@@ -0,0 +1,3 @@
+import { SearchVariant } from '../types';
+export declare const matchSearchTerm: (content: string, term: string, variant: SearchVariant) => boolean;
+export declare const filterOptions: (options: any[], searchTerm: string) => any[];

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

@@ -3,15 +3,15 @@ interface InfoPanelProps {
     variant?: 'container' | 'form-sm' | 'form-md';
     color?: 'yellow' | 'blue' | 'grey' | 'white';
     className?: string;
-    textClassName?: string;
+    children: React.ReactNode;
 }
 declare const InfoPanel: {
-    ({ variant, color, className, textClassName, }: InfoPanelProps): React.JSX.Element;
+    ({ variant, color, className, children, }: InfoPanelProps): React.JSX.Element;
     defaultProps: {
         variant: string;
         color: string;
         className: string;
-        textClassName: string;
+        children: null;
     };
 };
 export default InfoPanel;

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

@@ -6,5 +6,6 @@ export interface TabProps extends ComponentPropsWithoutRef<'button'> {
     mode?: 'horizontal' | 'vertical';
     fit?: 'fit-content' | 'maximize';
     size?: 'md' | 'sm';
+    className?: string;
 }
-export default function Tab({ children, active, icon, disabled, mode, fit, size, ...rest }: TabProps): React.JSX.Element;
+export default function Tab({ children, active, icon, disabled, mode, fit, size, className, ...rest }: TabProps): React.JSX.Element;

package/dist/{cjs/types/stories/Form/LiveSearch/LivesearchOld.stories.d.ts → esm/types/stories/Form/LiveSearch/DeprecatedSimulation.stories.d.ts}

@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/react';
-import LiveSearchSimulation from '../../../components/Forms/LiveSearch/Simulation';
+import DeprecatedSimulation from '../../../components/Forms/LiveSearch/Example/DeprecatedSimulation';
 declare const meta: {
     title: string;
-    component: typeof LiveSearchSimulation;
+    component: typeof DeprecatedSimulation;
     parameters: {
         layout: string;
     };

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

@@ -1,12 +1,13 @@
-/// <reference types="react" />
 import { StoryObj } from "@storybook/react/*";
+import React from "react";
 declare const meta: {
     title: string;
-    component: ({ ...props }: import("../../../components/Forms/LiveSearch/PropsInterface").default) => import("react").JSX.Element;
+    component: ({ children, ...props }: LiveSearchProps) => React.JSX.Element;
     parameters: {
         layout: string;
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Example: Story;
+export declare const BasicExample: Story;
+export declare const ObjectOptionsExample: Story;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import React$1, { ComponentPropsWithoutRef, ComponentPropsWithRef, ChangeEvent, ReactNode, HTMLAttributes } from 'react';
+import React$1, { ComponentPropsWithoutRef, ComponentPropsWithRef, ChangeEvent, ReactNode, MouseEvent, HTMLAttributes } from 'react';
 
 interface AccordionsProps extends ComponentPropsWithoutRef<'div'> {
     title: string;
@@ -303,7 +303,7 @@ interface DropdownContainerProps extends ComponentPropsWithRef<'div'> {
     size?: 'sm' | 'md';
     zIndex?: number;
     anchorRef?: React$1.RefObject<HTMLElement>;
-    onClickItem?: (event: React$1.MouseEvent<HTMLDivElement>, val: string | number) => void;
+    onClickItem?: (event: React$1.MouseEvent<HTMLDivElement>, val: string | number | object) => void;
 }
 declare const DropdownContainer: {
     (propsComp: DropdownContainerProps): React$1.JSX.Element | null;
@@ -343,28 +343,28 @@ declare namespace SelectInput {
     };
 }
 
-interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+type SearchVariant = 'include' | 'startsWith' | 'endsWith';
+interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'value'> {
+    autoComplete?: string;
+    children?: ReactNode;
     descText?: string;
     disabled?: boolean;
+    dropContProps?: Omit<DropdownContainerProps, 'children'>;
     id?: string;
-    size?: 'md' | 'sm';
     label?: string;
+    onChangeText?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClickDropdown?: (event: MouseEvent<HTMLDivElement>) => void;
+    options?: any[];
     placeholder?: string;
-    required?: boolean;
-    options?: any;
-    setValue?: any;
-    value?: any;
     readOnly?: boolean;
-    autoComplete?: string;
-    onChangeText?: (value: any) => void;
-    onClickDropdown?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    children?: React.ReactNode;
-    dropdownClassName?: string;
-    dropContProps?: Omit<DropdownContainerProps, 'children'>;
-    searchVariant?: 'startsWith' | 'endsWith' | 'include';
+    required?: boolean;
+    searchVariant?: SearchVariant;
+    setValue: (value: any) => void;
+    size?: 'md' | 'sm';
+    value: any;
 }
 
-declare function LiveSearch({ descText, disabled, id, size, label, placeholder, required, options, setValue, value, readOnly, onChangeText, onClickDropdown, autoComplete, children, dropContProps, searchVariant, }: LiveSearchProps): React$1.JSX.Element;
+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 namespace LiveSearch {
     var defaultProps: {
         descText: string;
@@ -533,15 +533,15 @@ interface InfoPanelProps {
     variant?: 'container' | 'form-sm' | 'form-md';
     color?: 'yellow' | 'blue' | 'grey' | 'white';
     className?: string;
-    textClassName?: string;
+    children: React$1.ReactNode;
 }
 declare const InfoPanel: {
-    ({ variant, color, className, textClassName, }: InfoPanelProps): React$1.JSX.Element;
+    ({ variant, color, className, children, }: InfoPanelProps): React$1.JSX.Element;
     defaultProps: {
         variant: string;
         color: string;
         className: string;
-        textClassName: string;
+        children: null;
     };
 };
 
@@ -644,8 +644,9 @@ interface TabProps extends ComponentPropsWithoutRef<'button'> {
     mode?: 'horizontal' | 'vertical';
     fit?: 'fit-content' | 'maximize';
     size?: 'md' | 'sm';
+    className?: string;
 }
-declare function Tab({ children, active, icon, disabled, mode, fit, size, ...rest }: TabProps): React$1.JSX.Element;
+declare function Tab({ children, active, icon, disabled, mode, fit, size, className, ...rest }: TabProps): React$1.JSX.Element;
 
 interface TabMenuProps extends ComponentPropsWithoutRef<'div'> {
     variant?: 'default' | 'alternative';

package/package.json

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

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

@@ -1,23 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { DropdownContainerProps } from '../Dropdown/DropdownContainer';
-interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
-    descText?: string;
-    disabled?: boolean;
-    id?: string;
-    size?: 'md' | 'sm';
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    options?: any;
-    setValue?: any;
-    value?: any;
-    readOnly?: boolean;
-    autoComplete?: string;
-    onChangeText?: (value: any) => void;
-    onClickDropdown?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    children?: React.ReactNode;
-    dropdownClassName?: string;
-    dropContProps?: Omit<DropdownContainerProps, 'children'>;
-    searchVariant?: 'startsWith' | 'endsWith' | 'include';
-}
-export default LiveSearchProps;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import LiveSearchProps from './PropsInterface';
-declare function LiveSearchSimulation({ setValue, value, ...props }: LiveSearchProps): React.JSX.Element;
-export default LiveSearchSimulation;

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

@@ -1,23 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { DropdownContainerProps } from '../Dropdown/DropdownContainer';
-interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
-    descText?: string;
-    disabled?: boolean;
-    id?: string;
-    size?: 'md' | 'sm';
-    label?: string;
-    placeholder?: string;
-    required?: boolean;
-    options?: any;
-    setValue?: any;
-    value?: any;
-    readOnly?: boolean;
-    autoComplete?: string;
-    onChangeText?: (value: any) => void;
-    onClickDropdown?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    children?: React.ReactNode;
-    dropdownClassName?: string;
-    dropContProps?: Omit<DropdownContainerProps, 'children'>;
-    searchVariant?: 'startsWith' | 'endsWith' | 'include';
-}
-export default LiveSearchProps;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import LiveSearchProps from './PropsInterface';
-declare function LiveSearchSimulation({ setValue, value, ...props }: LiveSearchProps): React.JSX.Element;
-export default LiveSearchSimulation;