From eecf272349afe36bc0c0f335d84340a957ae1d00 Mon Sep 17 00:00:00 2001
From: Josem1801 <Josemanuelrosales2@gmail.com>
Date: Tue, 1 Jul 2025 13:33:36 -0600
Subject: [PATCH 1/5] feat(raect): add InputSearch component

---
 js/react/lib/components/input-search/index.ts |  1 +
 .../input-search/input-search.component.tsx   | 98 +++++++++++++++++++
 js/react/lib/hooks/use-boolean.ts             | 29 ++++++
 js/react/lib/icons/filter.tsx                 | 16 +++
 js/react/lib/icons/search.tsx                 | 18 ++++
 js/react/lib/index.ts                         |  1 +
 js/react/showcase/App.tsx                     | 33 ++++++-
 js/react/showcase/ShowComponent/index.tsx     |  2 +-
 styles/components.css                         |  1 +
 styles/components/input-search.css            | 60 ++++++++++++
 styles/theme.css                              |  1 -
 11 files changed, 257 insertions(+), 3 deletions(-)
 create mode 100644 js/react/lib/components/input-search/index.ts
 create mode 100644 js/react/lib/components/input-search/input-search.component.tsx
 create mode 100644 js/react/lib/hooks/use-boolean.ts
 create mode 100644 js/react/lib/icons/filter.tsx
 create mode 100644 js/react/lib/icons/search.tsx
 create mode 100644 styles/components/input-search.css

diff --git a/js/react/lib/components/input-search/index.ts b/js/react/lib/components/input-search/index.ts
new file mode 100644
index 0000000..ab6fcc8
--- /dev/null
+++ b/js/react/lib/components/input-search/index.ts
@@ -0,0 +1 @@
+export * from "./input-search.component";
diff --git a/js/react/lib/components/input-search/input-search.component.tsx b/js/react/lib/components/input-search/input-search.component.tsx
new file mode 100644
index 0000000..95fb9cb
--- /dev/null
+++ b/js/react/lib/components/input-search/input-search.component.tsx
@@ -0,0 +1,98 @@
+import { useBoolean } from "@/hooks/use-boolean";
+import { Filter } from "@/icons/filter";
+import { Search } from "@/icons/search";
+import { cn } from "@/utils/tw-merge";
+import { Fragment } from "react/jsx-runtime";
+import { Tag } from "../tag";
+import { InputHTMLAttributes } from "react";
+
+type Option = { label: string; value: string };
+type InputSearchProps = {
+  filters?: Array<Option>;
+  activeFilters?: Array<Option>;
+  onChangeFilter?: (option: Array<Option>) => void;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+export const InputSearch = ({
+  className,
+  filters,
+  activeFilters = [],
+  onChangeFilter,
+  ...props
+}: InputSearchProps) => {
+  const filterModal = useBoolean();
+
+  const hasFilter = filters?.length;
+
+  const handleSelectFilter = (filter: Option, isSelected: boolean) => {
+    if (!isSelected) return onChangeFilter?.([...activeFilters, filter]);
+    onChangeFilter?.(
+      activeFilters.filter(({ value }) => value !== filter.value)
+    );
+  };
+
+  const handleCloseOnClickInput = () =>
+    hasFilter && filterModal.value && filterModal.setFalse();
+
+  return (
+    <div className={cn(["rustlanges-input-search-container", className])}>
+      <label
+        className={cn([
+          "rustlanges-input-search",
+          hasFilter && "rustlanges-input-search--filter",
+        ])}
+      >
+        <Search className="" width={24} height={24} />
+        <input
+          type="text"
+          placeholder="Buscar"
+          onClick={handleCloseOnClickInput}
+          className="text-caption"
+          {...props}
+        />
+      </label>
+      <div className="rustlanges-input-search__filter">
+        {hasFilter ? (
+          <Fragment>
+            <button onClick={filterModal.toggle} tabIndex={0}>
+              <Filter width={24} height={24} />
+            </button>
+          </Fragment>
+        ) : null}
+        <div
+          className={cn([
+            "rustlanges-input-search-backdrop__content",
+            filterModal.value
+              ? "rustlanges-input-search-backdrop__content--open"
+              : "rustlanges-input-search-backdrop__content--closed",
+          ])}
+        >
+          {filterModal.value && (
+            <Fragment>
+              <ul className="rustlanges-input-search-backdrop__list">
+                {filters?.map(filter => {
+                  const isSelected = activeFilters?.some(
+                    ({ value }) => value === filter.value
+                  );
+                  return (
+                    <li
+                      key={filter.value}
+                      onClick={() => handleSelectFilter(filter, isSelected)}
+                    >
+                      <Tag
+                        as="button"
+                        tabIndex={0}
+                        selected={isSelected}
+                        label={filter.label}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+            </Fragment>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/js/react/lib/hooks/use-boolean.ts b/js/react/lib/hooks/use-boolean.ts
new file mode 100644
index 0000000..002bcc0
--- /dev/null
+++ b/js/react/lib/hooks/use-boolean.ts
@@ -0,0 +1,29 @@
+import { useCallback, useState } from "react";
+
+import type { Dispatch, SetStateAction } from "react";
+
+type UseBooleanReturn = {
+  value: boolean;
+  setValue: Dispatch<SetStateAction<boolean>>;
+  setTrue: () => void;
+  setFalse: () => void;
+  toggle: () => void;
+};
+
+export function useBoolean(defaultValue = false): UseBooleanReturn {
+  const [value, setValue] = useState(defaultValue);
+
+  const setTrue = useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const setFalse = useCallback(() => {
+    setValue(false);
+  }, []);
+
+  const toggle = useCallback(() => {
+    setValue(x => !x);
+  }, []);
+
+  return { value, setValue, setTrue, setFalse, toggle };
+}
diff --git a/js/react/lib/icons/filter.tsx b/js/react/lib/icons/filter.tsx
new file mode 100644
index 0000000..70d603d
--- /dev/null
+++ b/js/react/lib/icons/filter.tsx
@@ -0,0 +1,16 @@
+import { SVGProps } from "react";
+export const Filter = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M9 5.00001C8.73478 5.00001 8.48043 5.10537 8.29289 5.2929C8.10536 5.48044 8 5.73479 8 6.00001C8 6.26523 8.10536 6.51958 8.29289 6.70712C8.48043 6.89465 8.73478 7.00001 9 7.00001C9.26522 7.00001 9.51957 6.89465 9.70711 6.70712C9.89464 6.51958 10 6.26523 10 6.00001C10 5.73479 9.89464 5.48044 9.70711 5.2929C9.51957 5.10537 9.26522 5.00001 9 5.00001ZM6.17 5.00001C6.3766 4.41448 6.75974 3.90744 7.2666 3.5488C7.77346 3.19015 8.37909 2.99756 9 2.99756C9.62091 2.99756 10.2265 3.19015 10.7334 3.5488C11.2403 3.90744 11.6234 4.41448 11.83 5.00001H19C19.2652 5.00001 19.5196 5.10537 19.7071 5.2929C19.8946 5.48044 20 5.73479 20 6.00001C20 6.26523 19.8946 6.51958 19.7071 6.70712C19.5196 6.89465 19.2652 7.00001 19 7.00001H11.83C11.6234 7.58554 11.2403 8.09258 10.7334 8.45122C10.2265 8.80986 9.62091 9.00246 9 9.00246C8.37909 9.00246 7.77346 8.80986 7.2666 8.45122C6.75974 8.09258 6.3766 7.58554 6.17 7.00001H5C4.73478 7.00001 4.48043 6.89465 4.29289 6.70712C4.10536 6.51958 4 6.26523 4 6.00001C4 5.73479 4.10536 5.48044 4.29289 5.2929C4.48043 5.10537 4.73478 5.00001 5 5.00001H6.17ZM15 11C14.7348 11 14.4804 11.1054 14.2929 11.2929C14.1054 11.4804 14 11.7348 14 12C14 12.2652 14.1054 12.5196 14.2929 12.7071C14.4804 12.8947 14.7348 13 15 13C15.2652 13 15.5196 12.8947 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11ZM12.17 11C12.3766 10.4145 12.7597 9.90744 13.2666 9.5488C13.7735 9.19015 14.3791 8.99756 15 8.99756C15.6209 8.99756 16.2265 9.19015 16.7334 9.5488C17.2403 9.90744 17.6234 10.4145 17.83 11H19C19.2652 11 19.5196 11.1054 19.7071 11.2929C19.8946 11.4804 20 11.7348 20 12C20 12.2652 19.8946 12.5196 19.7071 12.7071C19.5196 12.8947 19.2652 13 19 13H17.83C17.6234 13.5855 17.2403 14.0926 16.7334 14.4512C16.2265 14.8099 15.6209 15.0025 15 15.0025C14.3791 15.0025 13.7735 14.8099 13.2666 14.4512C12.7597 14.0926 12.3766 13.5855 12.17 13H5C4.73478 13 4.48043 12.8947 4.29289 12.7071C4.10536 12.5196 4 12.2652 4 12C4 11.7348 4.10536 11.4804 4.29289 11.2929C4.48043 11.1054 4.73478 11 5 11H12.17ZM9 17C8.73478 17 8.48043 17.1054 8.29289 17.2929C8.10536 17.4804 8 17.7348 8 18C8 18.2652 8.10536 18.5196 8.29289 18.7071C8.48043 18.8947 8.73478 19 9 19C9.26522 19 9.51957 18.8947 9.70711 18.7071C9.89464 18.5196 10 18.2652 10 18C10 17.7348 9.89464 17.4804 9.70711 17.2929C9.51957 17.1054 9.26522 17 9 17ZM6.17 17C6.3766 16.4145 6.75974 15.9074 7.2666 15.5488C7.77346 15.1902 8.37909 14.9976 9 14.9976C9.62091 14.9976 10.2265 15.1902 10.7334 15.5488C11.2403 15.9074 11.6234 16.4145 11.83 17H19C19.2652 17 19.5196 17.1054 19.7071 17.2929C19.8946 17.4804 20 17.7348 20 18C20 18.2652 19.8946 18.5196 19.7071 18.7071C19.5196 18.8947 19.2652 19 19 19H11.83C11.6234 19.5855 11.2403 20.0926 10.7334 20.4512C10.2265 20.8099 9.62091 21.0025 9 21.0025C8.37909 21.0025 7.77346 20.8099 7.2666 20.4512C6.75974 20.0926 6.3766 19.5855 6.17 19H5C4.73478 19 4.48043 18.8947 4.29289 18.7071C4.10536 18.5196 4 18.2652 4 18C4 17.7348 4.10536 17.4804 4.29289 17.2929C4.48043 17.1054 4.73478 17 5 17H6.17Z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/js/react/lib/icons/search.tsx b/js/react/lib/icons/search.tsx
new file mode 100644
index 0000000..99da40b
--- /dev/null
+++ b/js/react/lib/icons/search.tsx
@@ -0,0 +1,18 @@
+import { SVGProps } from "react";
+export const Search = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 2C9.56238 2.00016 8.14571 2.3447 6.86859 3.00479C5.59146 3.66489 4.49105 4.62132 3.65947 5.79402C2.82788 6.96672 2.28933 8.32158 2.08889 9.74516C1.88844 11.1687 2.03194 12.6196 2.50738 13.9764C2.98281 15.3331 3.77634 16.5562 4.82154 17.5433C5.86673 18.5304 7.13318 19.2527 8.51487 19.6498C9.89656 20.0469 11.3533 20.1073 12.7631 19.8258C14.1729 19.5443 15.4947 18.9292 16.618 18.032L20.293 21.707C20.4816 21.8892 20.7342 21.99 20.9964 21.9877C21.2586 21.9854 21.5094 21.8802 21.6948 21.6948C21.8802 21.5094 21.9854 21.2586 21.9877 20.9964C21.99 20.7342 21.8892 20.4816 21.707 20.293L18.032 16.618C19.09 15.2939 19.7526 13.6979 19.9435 12.0138C20.1344 10.3297 19.8459 8.62586 19.1112 7.0985C18.3764 5.57113 17.2253 4.28228 15.7904 3.38029C14.3554 2.47831 12.6949 1.99985 11 2ZM5 11C5 10.2121 5.1552 9.43185 5.45673 8.7039C5.75825 7.97595 6.20021 7.31451 6.75736 6.75736C7.31451 6.20021 7.97595 5.75825 8.7039 5.45672C9.43186 5.15519 10.2121 5 11 5C11.7879 5 12.5682 5.15519 13.2961 5.45672C14.0241 5.75825 14.6855 6.20021 15.2426 6.75736C15.7998 7.31451 16.2418 7.97595 16.5433 8.7039C16.8448 9.43185 17 10.2121 17 11C17 12.5913 16.3679 14.1174 15.2426 15.2426C14.1174 16.3679 12.5913 17 11 17C9.4087 17 7.88258 16.3679 6.75736 15.2426C5.63214 14.1174 5 12.5913 5 11Z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/js/react/lib/index.ts b/js/react/lib/index.ts
index 6f31147..dfabc86 100644
--- a/js/react/lib/index.ts
+++ b/js/react/lib/index.ts
@@ -12,4 +12,5 @@ export * from "./components/badge";
 export * from "./components/dropdown";
 export * from "./components/calendar";
 export * from "./components/dropdown-tree";
+export * from "./components/input-search";
 export * from "./icons";
diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx
index 033ff89..41b2760 100644
--- a/js/react/showcase/App.tsx
+++ b/js/react/showcase/App.tsx
@@ -15,6 +15,7 @@ import {
   Calendar,
   CalendarRangeDate,
   DropdownTree,
+  InputSearch,
 } from "@rustlanges/react";
 import { ShowComponent } from "./ShowComponent";
 import { Fragment, useState } from "react";
@@ -124,11 +125,30 @@ const tree = {
   ],
 };
 
+const filters = [
+  { label: "Reciente", value: "reciente" },
+  { label: "ES", value: "es" },
+  { label: "EN", value: "en" },
+  { label: "Libros", value: "libros" },
+  { label: "Guías", value: "guias" },
+  { label: "Frameworks", value: "frameworks" },
+  { label: "Librerías", value: "librerias" },
+  { label: "Multinivel", value: "multinivel" },
+  { label: "Principiante", value: "principiante" },
+  { label: "Intermedio", value: "intermedio" },
+  { label: "Avanzado", value: "avanzado" },
+];
+
 export function App() {
   const [single, setSingle] = useState<Date | null>(new Date());
   const [multiple, setMultiple] = useState<Record<string, Date> | null>(null);
   const [range, setRange] = useState<CalendarRangeDate | null>(null);
-
+  const [activeFilters, setActiveFilters] = useState<
+    Array<{
+      label: string;
+      value: string;
+    }>
+  >([]);
   return (
     <div className="mx-auto mt-10 max-w-[1024px] px-5">
       <h1 className="mb-5 text-center text-5xl font-bold">
@@ -480,6 +500,17 @@ export function App() {
           </div>
         </div>
       </ShowComponent>
+      <ShowComponent title="Input Search">
+        <div className="flex min-h-60 w-full flex-wrap justify-evenly gap-40 p-5">
+          <InputSearch
+            activeFilters={activeFilters}
+            onChangeFilter={setActiveFilters}
+            filters={filters}
+            className="max-w-80"
+          />
+          <InputSearch className="max-w-80" />
+        </div>
+      </ShowComponent>
     </div>
   );
 }
diff --git a/js/react/showcase/ShowComponent/index.tsx b/js/react/showcase/ShowComponent/index.tsx
index 5f4ad01..d8d4180 100644
--- a/js/react/showcase/ShowComponent/index.tsx
+++ b/js/react/showcase/ShowComponent/index.tsx
@@ -101,7 +101,7 @@ function ShowComponentInner(
   const [childrenProps, inputs] = processProps(normalizedProps);
 
   return (
-    <ShowComponentContainer title={props.title} className="bg-gray-50">
+    <ShowComponentContainer title={props.title} className="w-full bg-gray-50">
       {!!Object.keys(inputs).length && (
         <div className="border-r-1 flex w-full max-w-xs flex-col gap-2 border-r-gray-300 pr-2 pt-2">
           {inputs}
diff --git a/styles/components.css b/styles/components.css
index 8f27202..814cb07 100644
--- a/styles/components.css
+++ b/styles/components.css
@@ -14,3 +14,4 @@
 @import "./components/dropdown-tree-topic.css";
 @import "./components/dropdown-tree-subtopic.css";
 @import "./components/dropdown-tree-end.css";
+@import "./components/input-search.css";
diff --git a/styles/components/input-search.css b/styles/components/input-search.css
new file mode 100644
index 0000000..c08736e
--- /dev/null
+++ b/styles/components/input-search.css
@@ -0,0 +1,60 @@
+@layer components {
+  svg {
+    @apply text-gray-600 dark:text-gray-400;
+  }
+
+  .rustlanges-input-search-container {
+    @apply relative flex h-fit w-full;
+  }
+
+  .rustlanges-input-search {
+    @apply shadow-rb-black flex h-11 w-full items-center gap-2.5 rounded-xl border border-black pl-2.5 transition;
+    @apply bg-light dark:bg-neutral-950;
+
+    @variant has-focus {
+      @apply border-primary-500 shadow-rb-primary-500;
+    }
+    & > input[type="text"] {
+      @apply z-50 h-full flex-1 appearance-none pr-2.5 outline-none transition-all;
+      @apply text-dark placeholder:text-neutral-200;
+      @variant dark {
+        @apply text-light placeholder:text-neutral-400;
+      }
+    }
+  }
+  .rustlanges-input-search--filter {
+    @apply rounded-r-none;
+  }
+
+  .rustlanges-input-search__filter {
+    & > button {
+      @apply shadow-rb-black grid size-11 cursor-pointer place-items-center items-center rounded-r-xl border border-black transition;
+      @apply bg-light dark:bg-neutral-950;
+    }
+  }
+
+  .rustlanges-input-search-button {
+    @apply grid size-11 cursor-pointer place-content-center;
+  }
+  .rustlanges-input-search-backdrop__content {
+    @apply absolute left-0 top-full z-[99] mt-2 w-full transition duration-200;
+  }
+
+  .rustlanges-input-search-backdrop__content--open {
+    @apply visible opacity-100;
+  }
+
+  .rustlanges-input-search-backdrop__content--closed {
+    @apply invisible opacity-0;
+  }
+
+  .rustlanges-input-search-backdrop__list {
+    @apply shadow-rb-black flex flex-wrap gap-2 p-4 transition;
+    @apply rounded-sm border border-black;
+    @apply bg-light dark:bg-neutral-950;
+
+    & > li {
+      @apply cursor-pointer;
+    }
+  }
+}
diff --git a/styles/theme.css b/styles/theme.css
index 8e96562..f594b00 100644
--- a/styles/theme.css
+++ b/styles/theme.css
@@ -81,7 +81,6 @@
 
   /* Fonts */
   --text-xxs: 10px;
-  --text-caption: 12px;
   --text-caption--font-weight: 400;
   --text-caption--letter-spacing: 0em;
   --text-caption--line-height: 16px;

From c5567e9253211543f4a617934c10acf34f94d152 Mon Sep 17 00:00:00 2001
From: Josem1801 <Josemanuelrosales2@gmail.com>
Date: Tue, 1 Jul 2025 13:34:07 -0600
Subject: [PATCH 2/5] style: add full with to showcase container component

---
 js/react/showcase/ShowComponent/Container.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/react/showcase/ShowComponent/Container.tsx b/js/react/showcase/ShowComponent/Container.tsx
index 1c5eb55..bf477bc 100644
--- a/js/react/showcase/ShowComponent/Container.tsx
+++ b/js/react/showcase/ShowComponent/Container.tsx
@@ -23,7 +23,9 @@ export function ShowComponentContainer(
         </span>
       </summary>
       <div
-        className={"flex flex-col gap-5 sm:flex-row " + props.contentClassName}
+        className={
+          "flex w-full flex-col gap-5 sm:flex-row" + props.contentClassName
+        }
       >
         {props.children}
       </div>

From ddbb2efc3910a31aefaee33e374cf5a25e89fc47 Mon Sep 17 00:00:00 2001
From: Josem1801 <Josemanuelrosales2@gmail.com>
Date: Tue, 1 Jul 2025 15:23:44 -0600
Subject: [PATCH 3/5] fix: svg input search styles

---
 styles/components/input-search.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/styles/components/input-search.css b/styles/components/input-search.css
index c08736e..653d563 100644
--- a/styles/components/input-search.css
+++ b/styles/components/input-search.css
@@ -1,10 +1,12 @@
 @layer components {
-  svg {
-    @apply text-gray-600 dark:text-gray-400;
-  }
+  
 
   .rustlanges-input-search-container {
     @apply relative flex h-fit w-full;
+    
+    svg {
+      @apply text-gray-600 dark:text-gray-400;
+    }
   }
 
   .rustlanges-input-search {

From 027b84e43131a720f2181d9f85ea37196499ba07 Mon Sep 17 00:00:00 2001
From: Josem1801 <Josemanuelrosales2@gmail.com>
Date: Tue, 1 Jul 2025 15:24:05 -0600
Subject: [PATCH 4/5] refactor: simplify filterModal close logic

---
 .../lib/components/input-search/input-search.component.tsx     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/react/lib/components/input-search/input-search.component.tsx b/js/react/lib/components/input-search/input-search.component.tsx
index 95fb9cb..5423313 100644
--- a/js/react/lib/components/input-search/input-search.component.tsx
+++ b/js/react/lib/components/input-search/input-search.component.tsx
@@ -31,8 +31,7 @@ export const InputSearch = ({
     );
   };
 
-  const handleCloseOnClickInput = () =>
-    hasFilter && filterModal.value && filterModal.setFalse();
+  const handleCloseOnClickInput = () => hasFilter && filterModal.setFalse();
 
   return (
     <div className={cn(["rustlanges-input-search-container", className])}>

From 71ebf1bb1c7429e007cdfdd4a12524334d1cf878 Mon Sep 17 00:00:00 2001
From: Josem1801 <Josemanuelrosales2@gmail.com>
Date: Tue, 1 Jul 2025 15:30:30 -0600
Subject: [PATCH 5/5] chore: add space between variable declarations and return
 statement

---
 js/react/showcase/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx
index 41b2760..b054de9 100644
--- a/js/react/showcase/App.tsx
+++ b/js/react/showcase/App.tsx
@@ -149,6 +149,7 @@ export function App() {
       value: string;
     }>
   >([]);
+
   return (
     <div className="mx-auto mt-10 max-w-[1024px] px-5">
       <h1 className="mb-5 text-center text-5xl font-bold">