@rovula/ui 0.0.29 → 0.0.31

package/dist/cjs/types/components/Search/Search.stories.d.ts

@@ -2,50 +2,18 @@ import React from "react";
 import { Options } from "../Dropdown/Dropdown";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<{
-        id?: string | undefined;
-        label?: string | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        rounded?: "none" | "normal" | "full" | undefined;
-        variant?: "outline" | "flat" | "underline" | undefined;
-        helperText?: string | undefined;
-        errorMessage?: string | undefined;
-        filterMode?: boolean | undefined;
-        fullwidth?: boolean | undefined;
-        disabled?: boolean | undefined;
-        error?: boolean | undefined;
-        required?: boolean | undefined;
-        className?: string | undefined;
-        options: Options[];
-        value?: Options | undefined;
-        onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
-        onSelect?: ((value: Options) => void) | undefined;
-    } & Omit<import("../..").InputProps, "value"> & React.RefAttributes<HTMLInputElement>>;
+    component: React.ForwardRefExoticComponent<import("./Search").SearchProps & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        id?: string | undefined;
-        label?: string | undefined;
-        size?: "sm" | "md" | "lg" | undefined;
-        rounded?: "none" | "normal" | "full" | undefined;
         variant?: "outline" | "flat" | "underline" | undefined;
-        helperText?: string | undefined;
-        errorMessage?: string | undefined;
-        filterMode?: boolean | undefined;
-        fullwidth?: boolean | undefined;
-        disabled?: boolean | undefined;
-        error?: boolean | undefined;
-        required?: boolean | undefined;
-        className?: string | undefined;
-        options: Options[];
-        value?: Options | undefined;
-        onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
-        onSelect?: (((value: Options) => void) & React.ReactEventHandler<HTMLInputElement>) | undefined;
         suppressHydrationWarning?: boolean | undefined;
+        className?: string | undefined;
         color?: string | undefined;
         height?: string | number | undefined;
+        id?: string | undefined;
         lang?: string | undefined;
         max?: string | number | undefined;
         min?: string | number | undefined;
@@ -232,6 +200,7 @@ declare const meta: {
         onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
         onMouseUp?: React.MouseEventHandler<HTMLInputElement> | undefined;
         onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+        onSelect?: (((value: Options) => void) & React.ReactEventHandler<HTMLInputElement>) | undefined;
         onSelectCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
         onTouchCancel?: React.TouchEventHandler<HTMLInputElement> | undefined;
         onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement> | undefined;
@@ -274,14 +243,18 @@ declare const meta: {
         form?: string | undefined;
         list?: string | undefined;
         step?: string | number | undefined;
+        error?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        disabled?: boolean | undefined;
+        fullwidth?: boolean | undefined;
         title?: string | undefined;
         startIcon?: React.ReactNode;
-        endIcon?: React.ReactNode;
         formAction?: string | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
+        value?: Options | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
@@ -321,8 +294,7 @@ declare const meta: {
         unselectable?: "off" | "on" | undefined;
         inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
-        hasClearIcon?: boolean | undefined;
-        hasSearchIcon?: boolean | undefined;
+        rounded?: "none" | "normal" | "full" | undefined;
         accept?: string | undefined;
         alt?: string | undefined;
         autoComplete?: React.HTMLInputAutoCompleteAttribute | undefined;
@@ -335,8 +307,23 @@ declare const meta: {
         pattern?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
+        required?: boolean | undefined;
         src?: string | undefined;
+        label?: string | undefined;
+        helperText?: string | undefined;
+        errorMessage?: string | undefined;
         labelClassName?: string | undefined;
+        onClickEndIcon?: (() => void) | undefined;
+        renderEndIcon?: (() => React.ReactNode) | undefined;
+        onClickStartIcon?: (() => void) | undefined;
+        options: Options[];
+        onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+        renderOptions?: ((value: {
+            optionsFiltered: Options[];
+            selectedOption: Options | null | undefined;
+            onClick: (option: Options) => void;
+        }) => React.ReactNode) | undefined;
+        optionContainerClassName?: string | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
@@ -346,6 +333,7 @@ export declare const Default: {
     args: {
         label: string;
         fullwidth: boolean;
+        size: string;
         options: Options[];
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;

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

@@ -12,12 +12,17 @@ export type InputProps = {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
+    isFloatingLabel?: boolean;
+    keepCloseIconOnValue?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: ReactNode;
     endIcon?: ReactNode;
     className?: string;
     labelClassName?: string;
+    onClickStartIcon?: () => void;
+    onClickEndIcon?: () => void;
+    renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 export declare const TextInput: React.ForwardRefExoticComponent<{
     id?: string | undefined;
@@ -32,11 +37,16 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     required?: boolean | undefined;
+    isFloatingLabel?: boolean | undefined;
+    keepCloseIconOnValue?: boolean | undefined;
     hasClearIcon?: boolean | undefined;
     hasSearchIcon?: boolean | undefined;
     startIcon?: ReactNode;
     endIcon?: ReactNode;
     className?: string | undefined;
     labelClassName?: string | undefined;
+    onClickStartIcon?: (() => void) | undefined;
+    onClickEndIcon?: (() => void) | undefined;
+    renderEndIcon?: (() => ReactNode) | undefined;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts

@@ -14,12 +14,17 @@ declare const meta: {
         disabled?: boolean | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
+        isFloatingLabel?: boolean | undefined;
+        keepCloseIconOnValue?: boolean | undefined;
         hasClearIcon?: boolean | undefined;
         hasSearchIcon?: boolean | undefined;
         startIcon?: React.ReactNode;
         endIcon?: React.ReactNode;
         className?: string | undefined;
         labelClassName?: string | undefined;
+        onClickStartIcon?: (() => void) | undefined;
+        onClickEndIcon?: (() => void) | undefined;
+        renderEndIcon?: (() => React.ReactNode) | undefined;
     } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
@@ -38,12 +43,17 @@ declare const meta: {
         disabled?: boolean | undefined;
         error?: boolean | undefined;
         required?: boolean | undefined;
+        isFloatingLabel?: boolean | undefined;
+        keepCloseIconOnValue?: boolean | undefined;
         hasClearIcon?: boolean | undefined;
         hasSearchIcon?: boolean | undefined;
         startIcon?: React.ReactNode;
         endIcon?: React.ReactNode;
         className?: string | undefined;
         labelClassName?: string | undefined;
+        onClickStartIcon?: (() => void) | undefined;
+        onClickEndIcon?: (() => void) | undefined;
+        renderEndIcon?: (() => React.ReactNode) | undefined;
         suppressHydrationWarning?: boolean | undefined;
         color?: string | undefined;
         height?: string | number | undefined;

package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts

@@ -15,6 +15,7 @@ export declare const labelVariant: (props?: ({
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
     hasSearchIcon?: boolean | null | undefined;
+    isFloatingLabel?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const helperTextVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;

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

@@ -23,6 +23,7 @@ export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 export * from "./components/Search/Search";
+export * from "./components/InputFilter/InputFilter";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
 export * from "./components/DropdownMenu/DropdownMenu";

package/dist/components/ActionButton/ActionButton.stories.js

@@ -10,7 +10,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 bg-base-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/Checkbox/Checkbox.js

@@ -17,9 +17,9 @@ import { CheckIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Checkbox = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-primary ring-offset-background", "hover:border-primary-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline", {
-            "data-[state=checked]:border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground": !props.disabled,
-            "hover:data-[state=checked]:border-secondary-hover hover:data-[state=checked]:bg-secondary-hover": !props.disabled,
+    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background", "hover:border-function-default-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline", {
+            "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon": !props.disabled,
+            "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover": !props.disabled,
             "bg-state-disable-solid": props.checked && props.disabled,
         }, className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "size-4" }) }) })));
 });

package/dist/components/Checkbox/Checkbox.stories.js

@@ -8,7 +8,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/DatePicker/DatePicker.js

@@ -20,7 +20,8 @@ import { format } from "date-fns/format";
 const DatePicker = (_a) => {
     var { date, onSelect, textInputProps } = _a, props = __rest(_a, ["date", "onSelect", "textInputProps"]);
     const [isOpen, setIsOpen] = useState(false);
-    return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2", readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit" }) }, textInputProps)) }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
+    return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2" // TODO
+                            , readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit", className: "cursor-pointer" }) }, textInputProps)) }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, Object.assign({ defaultMonth: date }, props, { mode: "single", selected: date, onSelect: (...value) => {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(...value);
                             setIsOpen(false);
                         } })) })] }) }));

package/dist/components/Dropdown/Dropdown.js

@@ -14,21 +14,25 @@ import { Fragment, forwardRef, useCallback, useEffect, useMemo, useRef, useState
 import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect"]);
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName"]);
     const _id = id || `${label}-select`;
     const [isFocused, setIsFocused] = useState(false);
     const [selectedOption, setSelectedOption] = useState(null);
     const [textValue, setTextValue] = useState("");
     const keyCode = useRef("");
     useEffect(() => {
-        if (value && !selectedOption) {
-            setSelectedOption(value);
-        }
-    }, [value, selectedOption]);
+        var _a;
+        setSelectedOption(value);
+        setTextValue((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
+    }, [value]);
     const handleOnChangeText = useCallback((event) => {
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(event);
         setTextValue(event.target.value);
+        if (!event.target.value) {
+            clearMismatchValue(event);
+        }
     }, [onChangeText]);
     const handleOptionClick = useCallback((option) => {
         setSelectedOption(option);
@@ -42,19 +46,30 @@ const Dropdown = forwardRef((_a, ref) => {
                 ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textValue === null || textValue === void 0 ? void 0 : textValue.toLowerCase()));
         });
     }, [options, filterMode, textValue]);
-    const renderOptions = () => (_jsxs("ul", { className: "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map((option) => {
-                if (option.renderLabel) {
-                    return (_jsx(Fragment, { children: option.renderLabel({
-                            value: option.value,
-                            label: option.label,
-                            handleOnClick: () => handleOptionClick(option),
-                            className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""}`,
-                        }) }, option.value));
-                }
-                return (_jsx("li", { onMouseDown: () => handleOptionClick(option), className: `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
-                        ? "bg-base-popup-highligh"
-                        : ""}`, children: option.label }, option.value));
-            }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
+    const renderOptions = () => {
+        if (customRenderOptions) {
+            return customRenderOptions({
+                optionsFiltered,
+                selectedOption,
+                onClick: handleOptionClick,
+            });
+        }
+        return (_jsxs("ul", { className: cn("absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", optionContainerClassName), children: [optionsFiltered.map((option) => {
+                    if (option.renderLabel) {
+                        return (_jsx(Fragment, { children: option.renderLabel({
+                                value: option.value,
+                                label: option.label,
+                                handleOnClick: () => handleOptionClick(option),
+                                className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
+                                    ? " bg-gray-200"
+                                    : ""}`,
+                            }) }, option.value));
+                    }
+                    return (_jsx("li", { onMouseDown: () => handleOptionClick(option), className: `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
+                            ? "bg-base-popup-highligh"
+                            : ""}`, children: option.label }, option.value));
+                }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
+    };
     const handleOnFocus = useCallback((e) => {
         var _a;
         setIsFocused(true);
@@ -85,7 +100,7 @@ const Dropdown = forwardRef((_a, ref) => {
         setIsFocused(false);
         clearMismatchValue(e);
         (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, [props === null || props === void 0 ? void 0 : props.onBlur]);
+    }, [props === null || props === void 0 ? void 0 : props.onBlur, clearMismatchValue]);
     const handleOnKeyDown = useCallback((e) => {
         var _a;
         keyCode.current = e.code;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -25,6 +25,7 @@ export const Default = {
     args: {
         label: "Choose an option:",
         fullwidth: true,
+        isFloatingLabel: true,
         options,
     },
     render: (args) => {

package/dist/components/Dropdown/Dropdown.styles.js

@@ -38,7 +38,7 @@ export const customInputVariant = cva([], {
         size: {
             sm: "pe-[30px]",
             md: "pe-[40px]",
-            lg: "pe-[48px]",
+            lg: "pe-[68px]",
         },
     },
     defaultVariants: {

package/dist/components/InputFilter/InputFilter.js

@@ -0,0 +1,124 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import TextInput from "../TextInput/TextInput";
+import { cn } from "@/utils/cn";
+import { customInputVariant } from "../Dropdown/Dropdown.styles";
+import Icon from "../Icon/Icon";
+import { filterIconVariant } from "./InputFilter.styles";
+import { Checkbox } from "../Checkbox/Checkbox";
+const InputFilter = forwardRef((_a, ref) => {
+    var { id, options = [], values = [], label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName } = _a, props = __rest(_a, ["id", "options", "values", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName"]);
+    const _id = id || `${label}-select`;
+    const [isFocused, setIsFocused] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState(values);
+    const [textValue, setTextValue] = useState("");
+    const keyCode = useRef("");
+    const containerRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        setSelectedOptions(values !== null && values !== void 0 ? values : []);
+        setTextValue((_a = values === null || values === void 0 ? void 0 : values.map((option) => option.label).join(", ")) !== null && _a !== void 0 ? _a : "");
+    }, [values]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsFocused(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleOnChangeText = useCallback((event) => {
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(event);
+        setTextValue(event.target.value);
+        if (!event.target.value) {
+            clearMismatchValues(event);
+        }
+    }, [onChangeText]);
+    const handleOptionClick = useCallback((option) => {
+        const isSelected = selectedOptions.some((selected) => selected.value === option.value);
+        let newSelectedOptions = [...selectedOptions];
+        if (isSelected) {
+            newSelectedOptions = newSelectedOptions.filter((selected) => selected.value !== option.value);
+        }
+        else {
+            newSelectedOptions.push(option);
+        }
+        setSelectedOptions(newSelectedOptions);
+        setTextValue(newSelectedOptions.map((option) => option.label).join(", "));
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelectedOptions);
+    }, [selectedOptions, onSelect]);
+    const optionsFiltered = useMemo(() => {
+        const lastText = textValue === null || textValue === void 0 ? void 0 : textValue.split(",").pop();
+        const filterText = lastText !== null && lastText !== void 0 ? lastText : "";
+        return options.filter((option) => {
+            var _a;
+            return !filterMode ||
+                ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filterText === null || filterText === void 0 ? void 0 : filterText.toLowerCase()));
+        });
+    }, [options, filterMode, textValue]);
+    const renderOptions = () => {
+        if (customRenderOptions) {
+            return customRenderOptions({
+                optionsFiltered,
+                selectedOptions,
+                onClick: handleOptionClick,
+            });
+        }
+        return (_jsxs("ul", { className: cn("absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", optionContainerClassName), children: [optionsFiltered.map((option) => {
+                    if (option.renderLabel) {
+                        return (_jsx(Fragment, { children: option.renderLabel({
+                                value: option.value,
+                                label: option.label,
+                                handleOnClick: () => handleOptionClick(option),
+                                className: `p-4 typography-subtitile4 hover:bg-gray-100 cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
+                                    ? "bg-gray-200"
+                                    : ""}`,
+                            }) }, option.value));
+                    }
+                    return (_jsxs("li", { onMouseDown: () => handleOptionClick(option), className: `p-4 typography-subtitile4 hover:bg-primary-hover-bg cursor-pointer  flex items-center gap-3 ${selectedOptions.some((selected) => selected.value === option.value)
+                            ? "bg-base-popup-highlight"
+                            : ""}`, children: [_jsx(Checkbox, { checked: selectedOptions.some((selected) => selected.value === option.value) }), option.label] }, option.value));
+                }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
+    };
+    const handleOnFocus = useCallback((e) => {
+        var _a;
+        setIsFocused(true);
+        (_a = props === null || props === void 0 ? void 0 : props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [props === null || props === void 0 ? void 0 : props.onFocus]);
+    const clearMismatchValues = useCallback((e) => {
+        const matchSelectedValues = optionsFiltered.filter((opt) => { var _a, _b; return opt.value === ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) || opt.label === ((_b = e.target) === null || _b === void 0 ? void 0 : _b.value); });
+        if (keyCode.current === "Enter") {
+            return;
+        }
+        setSelectedOptions(matchSelectedValues);
+        setTextValue(matchSelectedValues.map((option) => option.label).join(", "));
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(matchSelectedValues);
+    }, [optionsFiltered, textValue]);
+    const handleOnKeyDown = useCallback((e) => {
+        var _a;
+        keyCode.current = e.code;
+        (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
+    const filterIconClassName = filterIconVariant({
+        size: size,
+        rounded: rounded,
+        error: error,
+        active: !!values.length,
+        disabled,
+    });
+    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: filterIconClassName, children: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent" }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
+});
+export { InputFilter };

package/dist/components/InputFilter/InputFilter.stories.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { InputFilter } from "./InputFilter";
+const meta = {
+    title: "Components/InputFilter",
+    component: InputFilter,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const options = new Array(100).fill("").map((__, index) => ({
+    value: `option${index + 1}`,
+    label: `Option ${index + 1}`,
+}));
+export const Default = {
+    args: {
+        label: "Choose an option:",
+        fullwidth: true,
+        disabled: true,
+        options,
+    },
+    render: (args) => {
+        const [value, setValue] = useState([]);
+        const handleOnSelect = (values) => {
+            setValue(values);
+        };
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(InputFilter, Object.assign({ id: "1", size: "lg", options: options, values: value, onSelect: handleOnSelect, optionContainerClassName: "h-[400px]" }, args)), _jsx(InputFilter, Object.assign({ id: "2", size: "md", options: options, values: value, onSelect: handleOnSelect }, args)), _jsx(InputFilter, Object.assign({ id: "3", size: "sm", options: options, values: value, onSelect: handleOnSelect }, args))] }));
+    },
+};

package/dist/components/InputFilter/InputFilter.styles.js

@@ -0,0 +1,65 @@
+import { cva } from "class-variance-authority";
+export const filterIconVariant = cva([
+    // Base styles
+    "absolute contents items-center justify-center cursor-pointer",
+    // Border styles
+    "border-l border-l-input-default-stroke",
+    "peer-hover:border-l-input-active-stroke",
+    "peer-focus:border-l-input-active-stroke",
+    // Fill styles
+    "fill-primary",
+    "peer-hover:fill-input-filled-text",
+    "peer-focus:fill-input-filled-text",
+    // Stroke styles
+    "stroke-input-default-stroke",
+    "peer-hover:stroke-input-active-stroke",
+    "peer-focus:stroke-input-filled-text",
+], {
+    variants: {
+        size: {
+            sm: "p-1 size-[30px]",
+            md: "p-2 size-[38px]",
+            lg: "p-3 size-14",
+        },
+        rounded: {
+            none: "rounded-r-none",
+            normal: "rounded-r-xl",
+            full: "rounded-r-full",
+        },
+        error: {
+            true: "border-l-input-error",
+        },
+        position: {
+            start: "inset-y-0 left-0",
+            end: "inset-y-0 right-0",
+        },
+        active: {
+            false: "",
+            true: [
+                // Fill styles
+                "fill-primary-default",
+                "peer-hover:fill-primary-default", // TODO wait for refactor color after change function button colors
+                "peer-focus:fill-primary-hover", // TODO wait for refactor color after change function button colors
+                // Stroke styles
+                "stroke-primary-default",
+                "peer-hover:stroke-primary-default",
+                "peer-focus:stroke-primary-hover",
+            ],
+        },
+        disabled: {
+            true: [
+                "border-l-input-disable-stroke",
+                "fill-input-disable-stroke",
+                "stroke-input-disable-stroke",
+            ],
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        rounded: "normal",
+        error: false,
+        position: "end",
+        active: false,
+        disabled: false,
+    },
+});

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,4 +1,3 @@
-"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,7 +20,11 @@ const RadioGroup = React.forwardRef((_a, ref) => {
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square box-border  size-4 rounded-full border border-primary text-primary", "hover:border-primary-hover", "focus:outline-none", "data-[state=checked]:border-secondary data-[state=checked]:text-secondary", "hover:data-[state=checked]:border-secondary-hover hover:data-[state=checked]:text-secondary-hover", "data-[disabled]:border-state-disable-solid data-[disabled]:fill-state-disable-solid data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:text-state-disable-solid", className) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "fill-current text-current", children: _jsx("circle", { cx: "5", cy: "5", r: "5", fill: "current" }) }) }) })));
+    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square box-border size-4 rounded-full border border-function-default-solid text-function-default-solid", "hover:border-function-default-hover", "focus:outline-none", 
+        // Disabled state styles
+        "data-[disabled]:!border-state-disable-solid data-[disabled]:!fill-state-disable-solid data-[disabled]:!cursor-not-allowed data-[disabled]:!pointer-events-none data-[disabled]:!text-state-disable-solid", 
+        // Checked state styles
+        "data-[state=checked]:border-function-active-solid data-[state=checked]:text-function-active-solid", "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:text-function-active-hover", className) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "fill-current text-current", children: _jsx("circle", { cx: "5", cy: "5", r: "5", fill: "current" }) }) }) })));
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem };

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -9,7 +9,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/Search/Search.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Dropdown from "../Dropdown/Dropdown";
 const Search = forwardRef((props, ref) => {
-    return (_jsx(Dropdown, Object.assign({}, props, { ref: ref, hasClearIcon: true, hasSearchIcon: true, label: "Search", endIcon: null, filterMode: true })));
+    return (_jsx(Dropdown, Object.assign({ label: "Search" }, props, { ref: ref, keepCloseIconOnValue: true, hasClearIcon: true, hasSearchIcon: true, endIcon: null, filterMode: true, isFloatingLabel: false })));
 });
 export { Search };