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 l}from"../icon/icon.js";import r from"./search-input.styles.module.js";function t({autoComplete:t="off",placeholder:n="Search",variant:s="outlined",inputSize:o="large",name:c,onChange:m,supportingText:d,disabled:u,className:f,info:h,defaultValue:p}){let[b,g]=i(p??""),v=(()=>{switch(o){case"small":return"bodyDefault";case"medium":case"large":return"bodyLarge";default:return""}})();return a("div",{className:[r.root,r[o],v,u&&r.disabled,f].filter(Boolean).join(" "),children:[a("div",{className:r.container,children:[e(l,{"aria-hidden":"true",className:r.leftIcon,name:"MagnifyingGlass",size:"large"===o?24:"medium"===o?20:16}),e("input",{autoComplete:t,className:`${r.input} ${r[s]}`,disabled:u,name:c,onChange:e=>{g(e.target.value),m?.(e)},placeholder:n,type:"text",value:b}),a("div",{className:r.actionIcons,children:[e("button",{"aria-hidden":!b||void 0,"aria-label":"Clear search",className:r.clearButton,"data-visible":b?"true":"false",onClick:()=>{g("")},tabIndex:b?0:-1,type:"button",children:e(l,{name:"XCircle-fill",size:"small"===o?16:18})}),h&&e(l,{className:r.rightIcon,name:"Info",size:"small"===o?16:18})]})]}),d&&a("div",{className:`bodySmall ${r.supportingText}`,children:[e(l,{"aria-hidden":"true",name:"Info",size:16}),d]})]})}export{t as SearchInput};