sate-lib/lib/components/search-input/search-input.js

A lightweight and modular React component library designed for modern web interfaces. **SATE Lib** powers the [sate.menu](https://sate.menu) platform with reusable, scalable, and themeable UI components.

import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as i}from"react";import{Icon as t}from"../icon/icon.js";import r from"./search-input.styles.module.js";function n({placeholder:n="Search",variant:l="outlined",inputSize:s="large",onChange:o,supportingText:c,disabled:d,className:m,defaultValue:u,...h}){let[p,f]=i(u??"");return a("div",{className:[r.root,r[s],d&&r.disabled,m].filter(Boolean).join(" "),children:[a("div",{className:r.container,children:[e(t,{className:r.leftIcon,name:"MagnifyingGlass",size:24,"aria-hidden":"true"}),e("input",{type:"text",placeholder:n,value:p,onChange:e=>{f(e.target.value),o&&o(e)},className:`${r.input} ${r[l]}`,disabled:d,"data-has-value":p?"true":"false",...h}),e("button",{type:"button",className:r.clearButton,"data-visible":p?"true":"false",onClick:()=>{f("")},"aria-label":"Clear search","aria-hidden":!p||void 0,tabIndex:p?0:-1,children:e(t,{name:"XCircle-fill",size:18})}),e(t,{className:r.rightIcon,name:"Info",size:18})]}),c&&a("div",{className:r.supportingText,children:[e(t,{name:"Info",size:16,"aria-hidden":"true"}),c]})]})}export{n as SearchInput};