@rovula/ui 0.0.30 → 0.0.31

package/dist/theme/presets/colors.js

@@ -71,6 +71,27 @@ module.exports = {
         "input-label-bg": withColorMixin("--input-color-label-bg"),
         "input-error": withColorMixin("--input-color-error"),
 
+        "function-default-solid": withColorMixin("--function-default-solid"),
+        "function-default-hover": withColorMixin("--function-default-hover"),
+        "function-default-hover-bg": withColorMixin(
+          "--function-default-hover-bg"
+        ),
+        "function-default-hover-bg": withColorMixin(
+          "--function-default-hover-bg"
+        ),
+        "function-default-stroke": withColorMixin("--function-default-stroke"),
+        "function-default-icon": withColorMixin("--function-default-icon"),
+        "function-default-outline": withColorMixin(
+          "--function-default-outline-icon"
+        ),
+        "function-active-solid": withColorMixin("--function-active-solid"),
+        "function-active-hover": withColorMixin("--function-active-hover"),
+        "function-active-hover-bg": withColorMixin(
+          "--function-active-hover-bg"
+        ),
+        "function-active-stroke": withColorMixin("--function-active-stroke"),
+        "function-active-icon": withColorMixin("--function-active-icon"),
+
         "base-bg": withColorMixin("--base-color-bg"),
         "base-bg2": withColorMixin("--base-color-bg2"),
         "base-bg3": withColorMixin("--base-color-bg3"),

package/dist/theme/themes/xspector/color.css

@@ -11,6 +11,19 @@
   --input-color-label-bg: #2d2e30;
   --input-color-error: #ff4d35;
 
+  /* Function button */
+  --function-default-solid: #ececec;
+  --function-default-hover: #fafafa;
+  --function-default-hover-bg: rgba(250 250 250 / 0.08);
+  --function-default-stroke: rgba(158 158 158 / 0.24);
+  --function-default-icon: #212b36;
+  --function-default-outline-icon: #9e9e9e;
+  --function-active-solid: #b1a400;
+  --function-active-hover: #ddcd00;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #212b36;
+
   --text-dark: #212b36;
   --text-medium: #637381;
   --text-light: #919eab;

package/dist/theme/themes/xspector/components/action-button.css

@@ -12,34 +12,34 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-secondary-default);
-  --action-button-solid-default-border: var(--state-color-secondary-default);
-  --action-button-solid-default-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
 
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
 
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
 
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-primary-default);
-  --action-button-solid-active-border: var(--state-color-primary-default);
-  --action-button-solid-active-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
 
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
 
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
 
 
   /* ------------------------------------------------------------------ */
@@ -47,52 +47,54 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-outline-default-border: var(--state-color-secondary-stroke);
-  --action-button-outline-default-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
-  --action-button-outline-active-border: var(--state-color-primary-stroke);
-  --action-button-outline-active-text: var(--state-color-primary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
 
   /* ------------------------------------------------------------------ */
   /* Icon Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-icon-default-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-secondary-hover-bg);
-  --action-button-icon-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
+  --action-button-icon-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-icon-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
-  --action-button-icon-active-text: var(--state-color-primary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-icon-active-hover-text: var(--state-color-primary-text-hover);
-  --action-button-icon-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
+
+  /* Active Pressed State */
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
 }

package/dist/theme/themes/xspector/state.css

@@ -84,6 +84,6 @@
   --state-color-error-text-pressed: #a5210f;
 
   --state-color-disable-solid: #454f5b;
-  --state-color-disable-outline: #D3DADF;
+  --state-color-disable-outline: #637381;
 }
 

package/dist/theme/tokens/color.css

@@ -11,6 +11,19 @@
   --input-color-label-bg: #ffffff;/* #2d2e30; */
   --input-color-error: #ed2f15;
 
+  /* Function button */
+  --function-default-solid: #1e3249;
+  --function-default-hover: #35475b;
+  --function-default-hover-bg: rgba(30 50 73 / 0.08);
+  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: #1e3249;
+  --function-active-solid: #9b8f00;
+  --function-active-hover: #b1a400;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #ffffff;
+
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;

package/dist/theme/tokens/components/action-button.css

@@ -11,48 +11,35 @@
   /* Solid Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
 
-  /* TODO */
-  --function-default-solid: #ececec;
-  --function-default-hover: #fafafa;
-  --function-default-hover-bg: rgba(250 250 250 / 0.08);
-  --function-default-stroke: rgba(158 158 158 / 0.24);
-  --function-default-icon: #212b36;
-  --function-default-outline-icon: #9e9e9e;
-  --function-active-solid: #b1a400;
-  --function-active-hover: #ddcd00;
-  --function-active-hover-bg: rgba(221 205 0 / 0.08);
-  --function-active-stroke: rgba(177 164 0 / 0.48);
-  --function-active-icon: #212b36;
-
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-primary-default);
-  --action-button-solid-default-border: var(--state-color-primary-default);
-  --action-button-solid-default-text: var(--state-color-primary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
 
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
 
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
 
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-secondary-default);
-  --action-button-solid-active-border: var(--state-color-secondary-default);
-  --action-button-solid-active-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
 
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
 
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
 
   /* Disabled State */
   --action-button-solid-disabled-bg: var(--state-color-disable-solid);
@@ -66,33 +53,33 @@
 
   /* Default State */
   --action-button-outline-default-bg: transparent;
-  --action-button-outline-default-border: var(--state-color-primary-stroke);
-  --action-button-outline-default-text: var(--state-color-primary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
   --action-button-outline-active-bg: transparent;
-  --action-button-outline-active-border: var(--state-color-secondary-stroke);
-  --action-button-outline-active-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
 
   /* Disabled State */
   --action-button-outline-disabled-bg: transparent;
@@ -106,32 +93,32 @@
   /* Default State */
   --action-button-icon-default-bg: transparent;
   --action-button-icon-default-border: transparent;
-  --action-button-icon-default-text: var(--state-color-primary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-primary-hover-bg);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
   --action-button-icon-hover-border: transparent;
-  --action-button-icon-hover-text: var(--state-color-primary-text-hover);
+  --action-button-icon-hover-text: var(--function-default-hover);
 
   /* Pressed State */
   --action-button-icon-pressed-bg: transparent;
   --action-button-icon-pressed-border: transparent;
-  --action-button-icon-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
   --action-button-icon-active-bg: transparent;
   --action-button-icon-active-border: transparent;
-  --action-button-icon-active-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-secondary-hover-bg);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
   --action-button-icon-active-hover-border: transparent;
-  --action-button-icon-active-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
   --action-button-icon-active-pressed-bg: transparent;
   --action-button-icon-active-pressed-border: transparent;
-  --action-button-icon-active-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
 
   /* Disabled State */
   --action-button-icon-disabled-bg: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5">
+      <div className="p-5 bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/Checkbox/Checkbox.tsx

@@ -14,14 +14,14 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     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",
+      "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-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground":
+        "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-secondary-hover hover:data-[state=checked]:bg-secondary-hover":
+        "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,
       },

package/src/components/Dropdown/Dropdown.styles.ts

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

package/src/components/Dropdown/Dropdown.tsx

@@ -17,6 +17,7 @@ import {
 } from "./Dropdown.styles";
 
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
+import { cn } from "@/utils/cn";
 
 type RenderLabelCallbackArg = {
   value: string;
@@ -45,11 +46,16 @@ export type DropdownProps = {
   error?: boolean;
   required?: boolean;
   className?: string;
+  optionContainerClassName?: string;
   options: Options[];
   value?: Options;
   onChangeText?: InputProps["onChange"];
   onSelect?: (value: Options) => void;
-  renderOptions?: (optionsFiltered: Options[]) => ReactNode;
+  renderOptions?: (value: {
+    optionsFiltered: Options[];
+    selectedOption: Options | null | undefined;
+    onClick: (option: Options) => void;
+  }) => ReactNode;
 } & Omit<InputProps, "value">;
 
 const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
@@ -72,6 +78,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       onChangeText,
       onSelect,
       renderOptions: customRenderOptions,
+      optionContainerClassName,
       ...props
     },
     ref
@@ -86,11 +93,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     const keyCode = useRef("");
 
     useEffect(() => {
-      if (value && !selectedOption) {
-        setSelectedOption(value);
-        setTextValue(value.label);
-      }
-    }, [value, selectedOption]);
+      setSelectedOption(value);
+      setTextValue(value?.label ?? "");
+    }, [value]);
 
     const handleOnChangeText = useCallback(
       (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -123,11 +128,20 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
 
     const renderOptions = () => {
       if (customRenderOptions) {
-        return customRenderOptions(optionsFiltered);
+        return customRenderOptions({
+          optionsFiltered,
+          selectedOption,
+          onClick: handleOptionClick,
+        });
       }
 
       return (
-        <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">
+        <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
+          )}
+        >
           {optionsFiltered.map((option) => {
             if (option.renderLabel) {
               return (

package/src/components/InputFilter/InputFilter.stories.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { InputFilter } from "./InputFilter";
-import { Options } from "../Dropdown/Dropdown";
+import { InputFilter, Options } from "./InputFilter";
 
 const meta = {
   title: "Components/InputFilter",
@@ -30,13 +29,14 @@ export const Default = {
   args: {
     label: "Choose an option:",
     fullwidth: true,
+    disabled: true,
     options,
   },
   render: (args) => {
-    const [value, setValue] = useState();
+    const [value, setValue] = useState<Options[] | undefined>([]);
 
-    const handleOnSelect = (e: any) => {
-      setValue(e);
+    const handleOnSelect = (values: Options[]) => {
+      setValue(values);
     };
 
     return (
@@ -45,15 +45,16 @@ export const Default = {
           id="1"
           size="lg"
           options={options}
-          value={value}
+          values={value}
           onSelect={handleOnSelect}
+          optionContainerClassName="h-[400px]"
           {...args}
         />
         <InputFilter
           id="2"
           size="md"
           options={options}
-          value={value}
+          values={value}
           onSelect={handleOnSelect}
           {...args}
         />
@@ -61,7 +62,7 @@ export const Default = {
           id="3"
           size="sm"
           options={options}
-          value={value}
+          values={value}
           onSelect={handleOnSelect}
           {...args}
         />

package/src/components/InputFilter/InputFilter.styles.ts

@@ -4,19 +4,17 @@ import { cva } from "class-variance-authority";
 export const filterIconVariant = cva(
   [
     // Base styles
-    "absolute flex items-center justify-center cursor-pointer",
+    "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",
-    "peer-disabled:border-l-input-disable-stroke",
 
     // Fill styles
     "fill-primary",
     "peer-hover:fill-input-filled-text",
     "peer-focus:fill-input-filled-text",
-    "peer-disabled:fill-input-disable-stroke",
 
     // Stroke styles
     "stroke-input-default-stroke",
@@ -49,7 +47,6 @@ export const filterIconVariant = cva(
           "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
-          // "peer-disabled:fill-input-disable-stroke",
 
           // Stroke styles
           "stroke-primary-default",
@@ -57,6 +54,13 @@ export const filterIconVariant = cva(
           "peer-focus:stroke-primary-hover",
         ],
       },
+      disabled: {
+        true: [
+          "border-l-input-disable-stroke",
+          "fill-input-disable-stroke",
+          "stroke-input-disable-stroke",
+        ],
+      },
     },
     defaultVariants: {
       size: "md",
@@ -64,6 +68,7 @@ export const filterIconVariant = cva(
       error: false,
       position: "end",
       active: false,
+      disabled: false,
     },
   }
 );