'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { inputVariants } from './Input.js';
export function SearchInput({ value, onChange, placeholder = 'Search...' }) {
    return (_jsxs("div", { className: "relative flex-1", children: [_jsx("svg", { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--muted)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": true, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: inputVariants({ class: 'py-2 pr-8 pl-9' }) }), value && (_jsx("button", { type: "button", onClick: () => onChange(''), className: "absolute top-1/2 right-2 -translate-y-1/2 rounded p-0.5 text-[var(--muted)] hover:text-[var(--txt)]", "aria-label": "Clear search", children: _jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": true, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })), _jsx("kbd", { className: "pointer-events-none absolute top-1/2 right-8 hidden -translate-y-1/2 rounded border border-[var(--bdr)] px-1.5 py-0.5 text-[10px] text-[var(--muted)] sm:inline-block", children: "\u2318K" })] }));
}
//# sourceMappingURL=SearchInput.js.map