{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n    value: string;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    wrapperClassName?: string;\n}\n\n/**\n * Search input with magnifier icon and a clear button. Controlled component:\n * pass `value` and `onChange`.\n */\nexport const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(function SearchBar(\n    { value, onChange, onClear, wrapperClassName, placeholder = \"Buscar...\", className, ...props },\n    ref,\n) {\n    function handleClear(): void {\n        onChange(\"\");\n        onClear?.();\n    }\n\n    return (\n        <div className={cn(styles.wrapper, wrapperClassName)}>\n            <span className={styles.iconLeft} aria-hidden>\n                <SearchIcon />\n            </span>\n            <input\n                ref={ref}\n                type=\"search\"\n                value={value}\n                onChange={(event) => onChange(event.target.value)}\n                placeholder={placeholder}\n                className={cn(styles.input, className)}\n                {...props}\n            />\n            {value && (\n                <button\n                    type=\"button\"\n                    className={styles.clear}\n                    aria-label=\"Limpar busca\"\n                    onClick={handleClear}\n                >\n                    <ClearIcon />\n                </button>\n            )}\n        </div>\n    );\n});\n\nfunction SearchIcon() {\n    return (\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <path d=\"M20 20l-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n\nfunction ClearIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"gIAgBA,IAAa,GAAA,EAAY,EAAA,WAAA,CAA6C,SAClE,CAAE,QAAO,WAAU,UAAS,mBAAkB,cAAc,YAAa,YAAW,GAAG,GACvF,EACF,CACE,SAAS,GAAoB,CACzB,EAAS,EAAE,EACX,IAAU,CACd,CAEA,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,CAAgB,EAAnD,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,cAAA,GAC9B,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAa,CAAA,CACX,CAAA,GACN,EAAA,EAAA,IAAA,CAAC,QAAD,CACS,MACL,KAAK,SACE,QACP,SAAW,GAAU,EAAS,EAAM,OAAO,KAAK,EACnC,cACb,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EACrC,GAAI,CACP,CAAA,EACA,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,MAClB,aAAW,eACX,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,CACR,CAAA,CAEX,GAEb,CAAC,EAED,SAAS,GAAa,CAClB,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAArD,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,IAAI,OAAO,eAAe,YAAY,GAAK,CAAA,GACrE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,EAAE,kBAAkB,OAAO,eAAe,YAAY,IAAI,cAAc,OAAS,CAAA,CACtF,GAEb,CAEA,SAAS,GAAY,CACjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACjD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb"}