feat(ui): add SearchInput with clear button and Escape-to-clear (#377)

src/components/ui/index.ts

@@ -6,6 +6,7 @@
 export * from './glass-card';
 export * from './button';
 export * from './input';
+export * from './search-input';
 export * from './badge';
 export * from './modal';
 export * from './alert';

src/components/ui/input.tsx

@@ -47,7 +47,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   return (
     <div className="relative flex items-center">
       {leftIcon && (
-        <div className="absolute left-3.5 text-zinc-500 pointer-events-none flex items-center justify-center">
+        <div className="absolute z-10 left-3.5 text-zinc-500 pointer-events-none flex items-center justify-center">
           {leftIcon}
         </div>
       )}
@@ -62,7 +62,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         {...props}
       />
       {rightIcon && (
-        <div className="absolute right-3.5 text-zinc-500 pointer-events-none flex items-center justify-center">
+        <div className="absolute z-10 right-3.5 text-zinc-500 pointer-events-none flex items-center justify-center">
           {rightIcon}
         </div>
       )}

src/components/ui/search-input.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Search, X } from 'lucide-react';
+import { Input } from './input';
+
+export interface SearchInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+/** Controlled search field with an "X" clear button; Escape also clears the query. */
+export function SearchInput({ value, onChange, onKeyDown, className = '', ...props }: SearchInputProps) {
+  return (
+    <div className="relative">
+      <Input
+        type="search"
+        leftIcon={<Search className="w-4 h-4" />}
+        className={`pr-10 [&::-webkit-search-cancel-button]:hidden ${className}`}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape' && value) {
+            e.preventDefault();
+            onChange('');
+          }
+          onKeyDown?.(e);
+        }}
+        {...props}
+      />
+      {value && (
+        <button
+          type="button"
+          aria-label="Clear search"
+          onClick={() => onChange('')}
+          className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1 rounded-md text-zinc-500 hover:text-zinc-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#d4af37] cursor-pointer"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}

tests/search-input.test.ts

@@ -0,0 +1,83 @@
+/**
+ * Unit tests for SearchInput's clear button and Escape-to-clear behaviour.
+ * SearchInput is stateless, so it is called directly and its handlers invoked
+ * (mounting it would need a DOM-emulation dependency this project doesn't have).
+ */
+
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import path from 'node:path';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { createJiti } from 'jiti';
+
+const jiti = createJiti(import.meta.url, { jsx: true, alias: { '@': path.resolve('src') } });
+const { SearchInput } = jiti('../src/components/ui/search-input.tsx') as typeof import('../src/components/ui/search-input');
+
+type Props = React.ComponentProps<typeof SearchInput>;
+type Children = [React.ReactElement<React.InputHTMLAttributes<HTMLInputElement>>, React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>> | ''];
+
+function setup(value: string, extra: Partial<Props> = {}) {
+  const calls: string[] = [];
+  const props: Props = { value, onChange: (v) => calls.push(v), ...extra };
+  const root = SearchInput(props) as React.ReactElement<{ children: Children }>;
+  const [input, button] = root.props.children;
+  return { props, calls, input, button };
+}
+
+function keyDown(key: string) {
+  let prevented = false;
+  return { event: { key, preventDefault: () => (prevented = true) } as unknown as React.KeyboardEvent<HTMLInputElement>, wasPrevented: () => prevented };
+}
+
+describe('SearchInput', () => {
+  it('hides the clear button when the query is empty', () => {
+    assert.equal(setup('').button, '');
+    assert.ok(!renderToStaticMarkup(React.createElement(SearchInput, setup('').props)).includes('Clear search'));
+  });
+
+  it('shows an accessible clear button when the query is non-empty', () => {
+    const html = renderToStaticMarkup(React.createElement(SearchInput, setup('focus').props));
+    assert.match(html, /<button type="button" aria-label="Clear search"/);
+    assert.match(html, /type="search"/);
+    assert.match(html, /value="focus"/);
+  });
+
+  it('clicking the clear button resets the query', () => {
+    const { button, calls } = setup('deep work');
+    assert.ok(button);
+    button.props.onClick?.({} as React.MouseEvent<HTMLButtonElement>);
+    assert.deepEqual(calls, ['']);
+  });
+
+  it('Escape resets a non-empty query and prevents the default action', () => {
+    const { input, calls } = setup('deep work');
+    const { event, wasPrevented } = keyDown('Escape');
+    input.props.onKeyDown?.(event);
+    assert.deepEqual(calls, ['']);
+    assert.equal(wasPrevented(), true);
+  });
+
+  it('Escape on an empty query does nothing, so parent Escape handlers (e.g. modals) still run', () => {
+    const { input, calls } = setup('');
+    const { event, wasPrevented } = keyDown('Escape');
+    input.props.onKeyDown?.(event);
+    assert.deepEqual(calls, []);
+    assert.equal(wasPrevented(), false);
+  });
+
+  it('other keys do not clear, and a caller onKeyDown is still invoked', () => {
+    const seen: string[] = [];
+    const { input, calls } = setup('abc', { onKeyDown: (e) => seen.push(e.key) });
+    input.props.onKeyDown?.(keyDown('Enter').event);
+    input.props.onKeyDown?.(keyDown('Escape').event);
+    assert.deepEqual(calls, ['']);
+    assert.deepEqual(seen, ['Enter', 'Escape']);
+  });
+
+  it('typing forwards the raw string value to onChange', () => {
+    const { input, calls } = setup('');
+    input.props.onChange?.({ target: { value: 'hab' } } as React.ChangeEvent<HTMLInputElement>);
+    assert.deepEqual(calls, ['hab']);
+  });
+});