@rovula/ui 0.0.28 → 0.0.30

package/dist/index.d.ts

@@ -55,12 +55,17 @@ 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__default.InputHTMLAttributes<HTMLInputElement>, "size">;
 declare const TextInput: React__default.ForwardRefExoticComponent<{
     id?: string | undefined;
@@ -75,12 +80,17 @@ declare const TextInput: React__default.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__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 
 type TextProps = {
@@ -144,6 +154,7 @@ type DropdownProps = {
     value?: Options;
     onChangeText?: InputProps["onChange"];
     onSelect?: (value: Options) => void;
+    renderOptions?: (optionsFiltered: Options[]) => ReactNode;
 } & Omit<InputProps, "value">;
 declare const Dropdown: React__default.ForwardRefExoticComponent<{
     id?: string | undefined;
@@ -163,6 +174,7 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
     value?: Options | undefined;
     onChangeText?: InputProps["onChange"];
     onSelect?: ((value: Options) => void) | undefined;
+    renderOptions?: ((optionsFiltered: Options[]) => ReactNode) | undefined;
 } & Omit<InputProps, "value"> & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -281,7 +293,7 @@ type DatePickerProps = {
     date: Date | undefined;
     onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React__default.MouseEvent | React__default.KeyboardEvent) => void | undefined;
     textInputProps?: Partial<InputProps>;
-};
+} & React__default.ComponentPropsWithoutRef<typeof Calendar>;
 declare const DatePicker: FC<DatePickerProps>;
 
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
@@ -378,26 +390,11 @@ declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<Alert
 declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type SearchProps = DropdownProps;
-declare const Search: React__default.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__default.ChangeEventHandler<HTMLInputElement> | undefined;
-    onSelect?: ((value: Options) => void) | undefined;
-} & Omit<InputProps, "value"> & React__default.RefAttributes<HTMLInputElement>>;
+type SearchProps = Omit<DropdownProps, "isFloatingLabel" | "keepCloseIconOnValue" | "hasClearIcon" | "hasSearchIcon" | "endIcon" | "filterMode" | "isFloatingLabel">;
+declare const Search: React__default.ForwardRefExoticComponent<SearchProps & React__default.RefAttributes<HTMLInputElement>>;
+
+type InputFilterProps = Omit<DropdownProps, "isFloatingLabel" | "keepCloseIconOnValue" | "hasClearIcon" | "hasSearchIcon" | "endIcon" | "filterMode" | "isFloatingLabel">;
+declare const InputFilter: React__default.ForwardRefExoticComponent<InputFilterProps & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 type SliderProps = React.ComponentProps<typeof Slider>;
@@ -527,4 +524,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Icon, Input, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, useToast };

package/dist/index.js

@@ -25,6 +25,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/src/theme/global.css

@@ -953,6 +953,18 @@
   /* ------------------------------------------------------------------ */
   /* 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);
@@ -3215,6 +3227,11 @@ body {
   background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 
+.bg-base-bg2 {
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+
 .bg-base-popup {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3583,6 +3600,18 @@ body {
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.fill-primary-default {
+  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
+.stroke-input-default-stroke {
+  stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
+}
+
+.stroke-primary-default {
+  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -6392,6 +6421,14 @@ body {
   top: 1rem;
 }
 
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:block {
+  display: block;
+}
+
+.peer:placeholder-shown ~ .peer-placeholder-shown\:block {
+  display: block;
+}
+
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:bg-transparent {
   background-color: transparent;
 }
@@ -6445,6 +6482,18 @@ body {
   fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
 
+.peer:hover ~ .peer-hover\:fill-primary-default {
+  fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
+.peer:hover ~ .peer-hover\:stroke-input-active-stroke {
+  stroke: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+}
+
+.peer:hover ~ .peer-hover\:stroke-primary-default {
+  stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
+}
+
 .peer:focus ~ .peer-focus\:-top-1 {
   top: -0.25rem;
 }
@@ -6472,10 +6521,26 @@ body {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
+.peer:focus ~ .peer-focus\:bg-transparent {
+  background-color: transparent;
+}
+
 .peer:focus ~ .peer-focus\:fill-input-filled-text {
   fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
 
+.peer:focus ~ .peer-focus\:fill-primary-hover {
+  fill: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
+}
+
+.peer:focus ~ .peer-focus\:stroke-input-filled-text {
+  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
+
+.peer:focus ~ .peer-focus\:stroke-primary-hover {
+  stroke: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
+}
+
 .peer:focus ~ .peer-focus\:text-input-filled-text {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity)), transparent);

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

@@ -11,6 +11,19 @@
   /* 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);

package/package.json

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

package/src/components/DatePicker/DatePicker.tsx

@@ -18,12 +18,13 @@ type DatePickerProps = {
     e: React.MouseEvent | React.KeyboardEvent
   ) => void | undefined;
   textInputProps?: Partial<InputProps>;
-};
+} & React.ComponentPropsWithoutRef<typeof Calendar>;
 
 const DatePicker: FC<DatePickerProps> = ({
   date,
   onSelect,
   textInputProps,
+  ...props
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -34,19 +35,23 @@ const DatePicker: FC<DatePickerProps> = ({
           <div className="flex">
             <TextInput
               fullwidth
-              id="2"
+              id="2" // TODO
               readOnly
               label="Date"
               size="md"
               value={date ? format(date, "dd MMM yyyy") : isOpen ? " " : ""}
               hasClearIcon={false}
-              endIcon={<CalendarIcon fill="inherit" />}
+              endIcon={
+                <CalendarIcon fill="inherit" className="cursor-pointer" />
+              }
               {...textInputProps}
             />
           </div>
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0">
           <Calendar
+            defaultMonth={date}
+            {...props}
             mode="single"
             selected={date}
             onSelect={(...value) => {

package/src/components/Dropdown/Dropdown.stories.tsx

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

package/src/components/Dropdown/Dropdown.tsx

@@ -49,6 +49,7 @@ export type DropdownProps = {
   value?: Options;
   onChangeText?: InputProps["onChange"];
   onSelect?: (value: Options) => void;
+  renderOptions?: (optionsFiltered: Options[]) => ReactNode;
 } & Omit<InputProps, "value">;
 
 const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
@@ -70,6 +71,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       required = true,
       onChangeText,
       onSelect,
+      renderOptions: customRenderOptions,
       ...props
     },
     ref
@@ -86,6 +88,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     useEffect(() => {
       if (value && !selectedOption) {
         setSelectedOption(value);
+        setTextValue(value.label);
       }
     }, [value, selectedOption]);
 
@@ -93,6 +96,10 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       (event: React.ChangeEvent<HTMLInputElement>) => {
         onChangeText?.(event);
         setTextValue(event.target.value);
+
+        if (!event.target.value) {
+          clearMismatchValue(event as any);
+        }
       },
       [onChangeText]
     );
@@ -114,42 +121,52 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       );
     }, [options, filterMode, textValue]);
 
-    const renderOptions = () => (
-      <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">
-        {optionsFiltered.map((option) => {
-          if (option.renderLabel) {
+    const renderOptions = () => {
+      if (customRenderOptions) {
+        return customRenderOptions(optionsFiltered);
+      }
+
+      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">
+          {optionsFiltered.map((option) => {
+            if (option.renderLabel) {
+              return (
+                <Fragment key={option.value}>
+                  {option.renderLabel({
+                    value: option.value,
+                    label: option.label,
+                    handleOnClick: () => handleOptionClick(option),
+                    className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${
+                      selectedOption?.value === option.value
+                        ? " bg-gray-200"
+                        : ""
+                    }`,
+                  })}
+                </Fragment>
+              );
+            }
             return (
-              <Fragment key={option.value}>
-                {option.renderLabel({
-                  value: option.value,
-                  label: option.label,
-                  handleOnClick: () => handleOptionClick(option),
-                  className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${
-                    selectedOption?.value === option.value ? " bg-gray-200" : ""
-                  }`,
-                })}
-              </Fragment>
+              <li
+                key={option.value}
+                onMouseDown={() => handleOptionClick(option)}
+                className={`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${
+                  selectedOption?.value === option.value
+                    ? "bg-base-popup-highligh"
+                    : ""
+                }`}
+              >
+                {option.label}
+              </li>
             );
-          }
-          return (
-            <li
-              key={option.value}
-              onMouseDown={() => handleOptionClick(option)}
-              className={`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${
-                selectedOption?.value === option.value
-                  ? "bg-base-popup-highligh"
-                  : ""
-              }`}
-            >
-              {option.label}
+          })}
+          {optionsFiltered.length === 0 && (
+            <li className="px-4 py-14 text-center text-input-text">
+              Not found
             </li>
-          );
-        })}
-        {optionsFiltered.length === 0 && (
-          <li className="px-4 py-14 text-center text-input-text">Not found</li>
-        )}
-      </ul>
-    );
+          )}
+        </ul>
+      );
+    };
 
     const handleOnFocus = useCallback(
       (e: React.FocusEvent<HTMLInputElement, Element>) => {
@@ -196,7 +213,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         clearMismatchValue(e);
         props?.onBlur?.(e);
       },
-      [props?.onBlur]
+      [props?.onBlur, clearMismatchValue]
     );
 
     const handleOnKeyDown = useCallback(

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

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputFilter } from "./InputFilter";
+import { Options } from "../Dropdown/Dropdown";
+
+const meta = {
+  title: "Components/InputFilter",
+  component: InputFilter,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full bg-base-bg2">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof InputFilter>;
+
+export default meta;
+
+const options: 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,
+    options,
+  },
+  render: (args) => {
+    const [value, setValue] = useState();
+
+    const handleOnSelect = (e: any) => {
+      setValue(e);
+    };
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <InputFilter
+          id="1"
+          size="lg"
+          options={options}
+          value={value}
+          onSelect={handleOnSelect}
+          {...args}
+        />
+        <InputFilter
+          id="2"
+          size="md"
+          options={options}
+          value={value}
+          onSelect={handleOnSelect}
+          {...args}
+        />
+        <InputFilter
+          id="3"
+          size="sm"
+          options={options}
+          value={value}
+          onSelect={handleOnSelect}
+          {...args}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { cva } from "class-variance-authority";
+
+export const filterIconVariant = cva(
+  [
+    // Base styles
+    "absolute flex 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",
+    "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
+          // "peer-disabled:fill-input-disable-stroke",
+
+          // Stroke styles
+          "stroke-primary-default",
+          "peer-hover:stroke-primary-default",
+          "peer-focus:stroke-primary-hover",
+        ],
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      rounded: "normal",
+      error: false,
+      position: "end",
+      active: false,
+    },
+  }
+);

package/src/components/InputFilter/InputFilter.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from "react";
+import Dropdown, { DropdownProps } from "../Dropdown/Dropdown";
+import Icon from "../Icon/Icon";
+import { filterIconVariant } from "./InputFilter.styles";
+import { AdjustmentsHorizontalIcon } from "@heroicons/react/16/solid";
+
+export type InputFilterProps = Omit<
+  DropdownProps,
+  | "isFloatingLabel"
+  | "keepCloseIconOnValue"
+  | "hasClearIcon"
+  | "hasSearchIcon"
+  | "endIcon"
+  | "filterMode"
+  | "isFloatingLabel"
+>;
+
+const InputFilter = forwardRef<HTMLInputElement, InputFilterProps>(
+  (props, ref) => {
+    const filterIconClassName = filterIconVariant({
+      size: props.size,
+      rounded: props.rounded,
+      error: props.error,
+      active: !!props.value?.value,
+    });
+
+    return (
+      <Dropdown
+        label="Placeholder Text"
+        required={false}
+        {...props}
+        ref={ref}
+        renderEndIcon={() => (
+          <div className={filterIconClassName}>
+            <Icon
+              type="heroicons"
+              name="adjustments-horizontal"
+              variant="outline"
+              color="inherit"
+              stroke="inherit"
+              fill="transparent"
+            />
+          </div>
+        )}
+        renderOptions={(optionsFiltered) => {
+          return "";
+        }}
+        filterMode
+        isFloatingLabel={false}
+      />
+    );
+  }
+);
+
+export { InputFilter };

package/src/components/Search/Search.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Search } from "./Search";
 import { Options } from "../Dropdown/Dropdown";

package/src/components/Search/Search.tsx

@@ -1,18 +1,29 @@
 import React, { forwardRef } from "react";
 import Dropdown, { DropdownProps } from "../Dropdown/Dropdown";
 
-export type SearchProps = DropdownProps;
+export type SearchProps = Omit<
+  DropdownProps,
+  | "isFloatingLabel"
+  | "keepCloseIconOnValue"
+  | "hasClearIcon"
+  | "hasSearchIcon"
+  | "endIcon"
+  | "filterMode"
+  | "isFloatingLabel"
+>;
 
 const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
   return (
     <Dropdown
+      label="Search"
       {...props}
       ref={ref}
+      keepCloseIconOnValue
       hasClearIcon
       hasSearchIcon
-      label="Search"
       endIcon={null}
       filterMode
+      isFloatingLabel={false}
     />
   );
 });