chore: small fixes

package/src/App.tsx

@@ -1,10 +1,9 @@
 import LayoutDefault from './layout/Default'
-import { Button, Form } from './library'
-import Popover from './library/Popover'
+import { Form, Input, Select } from './library'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Eraser, ShareFat } from '@phosphor-icons/react'
-import { useState } from 'react'
+import { Eraser, MagnifyingGlass } from '@phosphor-icons/react'
+import { useMemo, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { z } from 'zod'
 
@@ -14,9 +13,18 @@ const formSchema = z.object({
 
 type FormSchemaProps = z.infer<typeof formSchema>
 
-const generateTestItems = () => {
-  return ['Item 1', 'Item 2', 'Item blabla', 'Item bloblo', 'Item blibli']
-}
+const list = [
+  { id: '1', value: 'first', label: 'First Item' },
+  { id: '2', value: 'second', label: 'Second Item' },
+  { id: '3', value: 'third', label: 'Third Item' },
+  { id: '4', value: 'fourth', label: 'Fourth Item' },
+  { id: '5', value: 'fifth', label: 'Fifth Item' },
+  { id: '6', value: 'sixth', label: 'Sixth Item' },
+  { id: '7', value: 'seventh', label: 'Seventh Item' },
+  { id: '8', value: 'eighth', label: 'Eighth Item' },
+  { id: '9', value: 'ninth', label: 'Ninth Item' },
+  { id: '10', value: 'tenth', label: 'Tenth Item' },
+]
 
 function App() {
   const [test, setTest] = useState('')
@@ -40,6 +48,14 @@ function App() {
     setTest('')
   }
 
+  const filteredList = useMemo(() => {
+    if (!test) return list
+    return list.filter((item) => {
+      const concat = `${item.value.toLowerCase()} - ${item.label.toLocaleLowerCase()}`
+      return concat.includes(test.toLocaleLowerCase())
+    })
+  }, [test])
+
   return (
     <LayoutDefault
       asChild
@@ -48,28 +64,21 @@ function App() {
     >
       <Form.Root onSubmit={handleSubmit(onSubmit)}>
         {/* ================================= TEST AREA ================================= */}
-
-        <div className="flex w-156 justify-center">
-          <Popover.Root>
-            <Popover.Trigger>
-              <button className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-200">
-                <ShareFat />
-              </button>
-            </Popover.Trigger>
-            <Popover.Content align="center" side="bottom">
-              {/* Lista de 5 itens como children */}
-              <div className="flex flex-col gap-2">
-                <div>aqui placeholer</div>
-                {generateTestItems().map((item, index) => (
-                  <Button className="w-full gap-2 pt-2" key={index}>
-                    {item}
-                  </Button>
-                ))}
-              </div>
-            </Popover.Content>
-          </Popover.Root>
-        </div>
-
+        <Select.Root placeholder="Selecione uma opção">
+          <Input.Root className="mb-4">
+            <Input.Icon icon={<MagnifyingGlass />} />
+            <Input.Input
+              placeholder="Pesquise uma opção"
+              value={test}
+              onChange={(ev) => setTest(ev.target.value)}
+            />
+          </Input.Root>
+          {filteredList.map((item) => (
+            <Select.Item key={item.id} value={item.id}>
+              {item.value} - {item.label}
+            </Select.Item>
+          ))}
+        </Select.Root>
         {/* ================================= TEST AREA ================================= */}
       </Form.Root>
     </LayoutDefault>

package/src/library/Button/index.tsx

@@ -45,13 +45,13 @@ const colorVariants: VariantClass<'neutral' | 'primary' | 'secondary'> = {
 
 const sizeVariants: SizeClass = {
   sm: {
-    root: 'py-2.5 px-6 text-sm min-h-10',
+    root: 'py-2.5 px-6 text-sm min-h-10 [&_svg]:h-4 [&_svg]:w-4',
   },
   md: {
-    root: 'py-3 px-10 min-h-12',
+    root: 'py-3 px-10 text-md min-h-12 [&_svg]:h-4 [&_svg]:w-4',
   },
   lg: {
-    root: 'py-9 px-12 text-lg min-h-28 [&_div]:h-10 [&_div]:w-10',
+    root: 'py-9 px-12 text-lg min-h-28 [&_svg]:h-8 [&_svg]:w-8',
   },
 }
 

package/src/library/Input/Input.tsx

@@ -10,7 +10,7 @@ const InputInput = forwardRef<HTMLInputElement, InputInputProps>(
     return (
       <input
         className={cn(
-          'h-10 w-full border-none bg-transparent outline-none placeholder:text-gray-400 focus:outline-none disabled:pointer-events-none disabled:text-gray-400',
+          'h-10 w-full border-none bg-transparent outline-none placeholder:font-light placeholder:text-gray-400 focus:outline-none disabled:pointer-events-none disabled:text-gray-400',
           className,
         )}
         ref={ref}

package/src/library/Select/Root.tsx

@@ -1,63 +1,38 @@
-import SearchInput from './Search'
-
 import { cn } from '@/src/utils/class-merge.helper'
 import { Status, StatusClass } from '@types'
 
 import { CaretDown, CaretUp } from '@phosphor-icons/react'
 import * as RadixSelect from '@radix-ui/react-select'
-import { FC, useState, Children, isValidElement, SetStateAction } from 'react'
+import { FC } from 'react'
 
 const statusVariants: StatusClass = {
   error: { root: 'border-error' },
   success: { root: 'border-success' },
   alert: { root: 'border-alert' },
 }
-
 export interface SelectRootProps extends RadixSelect.SelectProps {
   align?: RadixSelect.SelectContentProps['align']
   className?: string
   placeholder?: string
-  searchPlaceholder?: string
   portalContainer?: HTMLElement | null
   position?: RadixSelect.SelectContentProps['position']
   status?: Status
   onChange?: (value: string) => void
-  enableSearch?: boolean
 }
 
 const SelectRoot: FC<SelectRootProps> = ({
   align = 'center',
   children,
   className,
   placeholder,
-  searchPlaceholder,
   portalContainer,
   position = 'popper',
   status,
   value,
   onChange,
   onValueChange,
-  enableSearch = false,
   ...rest
 }) => {
-  const [searchText, setSearchText] = useState('')
-  const [isTyping, setIsTyping] = useState(false)
-
-  const filteredItems = Children.toArray(children).filter(
-    (child) =>
-      isValidElement(child) &&
-      child.props.children.toLowerCase().includes(searchText.toLowerCase()),
-  )
-
-  const handleSearchChange = (value: SetStateAction<string>) => {
-    setSearchText(value)
-    setIsTyping(true)
-  }
-
-  const handleItemClick = () => {
-    setIsTyping(false)
-  }
-
   return (
     <RadixSelect.Root
       value={value}
@@ -82,7 +57,6 @@ const SelectRoot: FC<SelectRootProps> = ({
           <CaretDown />
         </RadixSelect.Icon>
       </RadixSelect.Trigger>
-
       <RadixSelect.Portal container={portalContainer}>
         <RadixSelect.Content
           position={position}
@@ -92,34 +66,11 @@ const SelectRoot: FC<SelectRootProps> = ({
           avoidCollisions
           className="z-100 flex max-h-[--radix-select-content-available-height] min-w-56 max-w-[--radix-select-content-available-width] flex-col gap-2 rounded-lg border border-gray bg-gray-100 shadow"
         >
-          {enableSearch && (
-            <SearchInput
-              searchPlaceholder={searchPlaceholder}
-              onChange={handleSearchChange}
-            />
-          )}
           <RadixSelect.ScrollUpButton className="flex items-center justify-center p-2">
             <CaretUp />
           </RadixSelect.ScrollUpButton>
           <RadixSelect.Viewport className="p-4">
-            {placeholder && (
-              <RadixSelect.Item
-                value="placeholder"
-                className="pointer-events-none px-3 py-2 text-gray"
-                disabled
-              >
-                <RadixSelect.ItemText>{placeholder}</RadixSelect.ItemText>
-              </RadixSelect.Item>
-            )}
-            {filteredItems.map((item, index) => (
-              <RadixSelect.Item
-                key={index}
-                onSelect={handleItemClick}
-                value={isValidElement(item) ? item.props.value : item}
-              >
-                {item}
-              </RadixSelect.Item>
-            ))}
+            {children}
           </RadixSelect.Viewport>
           <RadixSelect.ScrollDownButton className="flex items-center justify-center p-2">
             <CaretDown />
@@ -129,7 +80,5 @@ const SelectRoot: FC<SelectRootProps> = ({
     </RadixSelect.Root>
   )
 }
-
 SelectRoot.displayName = 'Select.Root'
-
 export default SelectRoot

package/src/library/Select/index.ts

@@ -1,15 +1,12 @@
 import SelectItem from './Item'
 import SelectRoot from './Root'
-import SearchInput from './Search'
 
 export type { SelectRootProps } from './Root'
 export type { SelectItemProps } from './Item'
-export type { SearchInputProps } from './Search'
 
 const Select = {
   Root: SelectRoot,
   Item: SelectItem,
-  Search: SearchInput,
 }
 
 export default Select

package/src/library/TagInput/Input.tsx

@@ -37,7 +37,7 @@ const TagInputInput = forwardRef<HTMLInputElement, TagInputInputProps>(
     return (
       <input
         className={cn(
-          'h-10 w-full border-none bg-transparent outline-none placeholder:text-gray-400 focus:outline-none disabled:pointer-events-none disabled:text-gray-400',
+          'h-10 w-full border-none bg-transparent outline-none placeholder:font-light placeholder:text-gray-400 focus:outline-none disabled:pointer-events-none disabled:text-gray-400',
           className,
         )}
         ref={ref}