# SilkeSearchField

A text input optimized for search functionality with a search icon and clear button. The clear button appears when there's text in the field.

## Features

- **Search icon**: Visual indicator for search functionality
- **Clear button**: Appears when field has content
- **Size variants**: Multiple sizes to fit your layout
- **Placeholder support**: Guide users with placeholder text
- **Controlled value**: Works with React state

## Basic Usage

```js
const [search, setSearch] = React.useState('');

<SilkeSearchField placeholder="Search..." value={search} onChange={setSearch} />;
```

## With Initial Value

Use `search` prop to set initial or controlled value:

```js
const [search, setSearch] = React.useState('initial query');

<SilkeBox column gap="s">
  <SilkeSearchField placeholder="Search..." search={search} onChange={setSearch} />
  <SilkeText size="s">Current search: "{search}"</SilkeText>
</SilkeBox>;
```

## Size Variants

```js
const [search1, setSearch1] = React.useState('');
const [search2, setSearch2] = React.useState('');
const [search3, setSearch3] = React.useState('');

<SilkeBox column gap="m">
  <SilkeBox gap="s" vAlign="center">
    <SilkeSearchField size="s" placeholder="Small" value={search1} onChange={setSearch1} />
    <SilkeText size="s">size="s"</SilkeText>
  </SilkeBox>
  <SilkeBox gap="s" vAlign="center">
    <SilkeSearchField size="base" placeholder="Base" value={search2} onChange={setSearch2} />
    <SilkeText size="s">size="base"</SilkeText>
  </SilkeBox>
  <SilkeBox gap="s" vAlign="center">
    <SilkeSearchField size="m" placeholder="Medium" value={search3} onChange={setSearch3} />
    <SilkeText size="s">size="m"</SilkeText>
  </SilkeBox>
</SilkeBox>;
```

## With Clear Callback

Handle the clear button click separately:

```js
const [search, setSearch] = React.useState('some text');
const [cleared, setCleared] = React.useState(false);

<SilkeBox column gap="s">
  <SilkeSearchField
    placeholder="Search..."
    search={search}
    onChange={setSearch}
    onClearButton={() => setCleared(true)}
  />
  <SilkeText size="s">{cleared ? 'Clear button was clicked!' : 'Try clicking the clear button'}</SilkeText>
</SilkeBox>;
```

## In a Toolbar

```js
const [search, setSearch] = React.useState('');

<SilkeToolbar>
  <SilkeSearchField placeholder="Search items..." value={search} onChange={setSearch} />
  <SilkeButton icon="filter" kind="ghost" />
  <SilkeButton icon="settings" kind="ghost" />
</SilkeToolbar>;
```

## Filtering a List

```js
const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
const [search, setSearch] = React.useState('');
const filtered = items.filter((item) => item.toLowerCase().includes(search.toLowerCase()));

<SilkeBox column gap="m">
  <SilkeSearchField placeholder="Filter fruits..." value={search} onChange={setSearch} />
  <SilkeBox column gap="xs">
    {filtered.length > 0 ? (
      filtered.map((item) => (
        <SilkeText key={item}>{item}</SilkeText>
      ))
    ) : (
      <SilkeText color="neutral-60">No results found</SilkeText>
    )}
  </SilkeBox>
</SilkeBox>;
```

## With Debounced Search

Use with debouncing for API calls:

```js
const [search, setSearch] = React.useState('');
const [debouncedSearch, setDebouncedSearch] = React.useState('');

React.useEffect(() => {
  const timer = setTimeout(() => {
    setDebouncedSearch(search);
  }, 300);
  return () => clearTimeout(timer);
}, [search]);

<SilkeBox column gap="s">
  <SilkeSearchField placeholder="Type to search..." value={search} onChange={setSearch} />
  <SilkeText size="s" color="neutral-60">
    Debounced value (300ms): "{debouncedSearch}"
  </SilkeText>
</SilkeBox>;
```

## Disabled State

```js
<SilkeSearchField placeholder="Search disabled" disabled />
```

## In a Header

```js
const [search, setSearch] = React.useState('');

<SilkeBox bg="neutral-10" pad="s" rounded gap="m" vAlign="center">
  <SilkeText weight="medium">Dashboard</SilkeText>
  <SilkeBox flex>
    <SilkeSearchField placeholder="Search dashboard..." value={search} onChange={setSearch} />
  </SilkeBox>
  <SilkeButton icon="settings" kind="ghost" />
</SilkeBox>;
```

## Props

| Prop            | Type                       | Default  | Description                             |
| --------------- | -------------------------- | -------- | --------------------------------------- |
| `value`         | `string`                   | -        | Controlled input value                  |
| `search`        | `string`                   | -        | Alternative way to set value            |
| `onChange`      | `(value: string) => void`  | -        | Called when value changes               |
| `onClearButton` | `() => void`               | -        | Called when clear button is clicked     |
| `placeholder`   | `string`                   | -        | Placeholder text                        |
| `size`          | `'s' \| 'base' \| 'm'`     | `'base'` | Field size                              |
| `disabled`      | `boolean`                  | `false`  | Disable the field                       |
| `autoFocus`     | `boolean`                  | `false`  | Focus on mount                          |

Also accepts most `SilkeTextField` props except `value`, `label`, and `kind`.

## Behavior

- The search icon is always visible on the left
- The clear button (X) only appears when the field has content
- Clicking the clear button empties the field and calls both `onChange('')` and `onClearButton()`
- The field uses `kind="ghost"` styling for a minimal appearance