@anoki/fse-ui/dist/index.es11.js

FSE UI components library

import { j as e } from "./index.es244.js";
import './components/ui/Search/Search.css';/* empty css            */
import { clsx as r } from "./index.es246.js";
import { useState as x } from "react";
import { Button as d } from "./index.es28.js";
import { SearchIcon as h } from "./index.es222.js";
const w = ({
  btnText: o,
  helperText: l,
  onChangeValue: t,
  value: m,
  variant: c = "basic",
  onSearch: s,
  dimensionStrategy: p = "fixed"
}) => {
  const [i, u] = x(m);
  return /* @__PURE__ */ e.jsx(
    "div",
    {
      className: r(
        "ui-search",
        "br-x4 bg-border-secondary w-full",
        c,
        {
          "ui-search-auto": p === "auto"
        }
      ),
      children: c === "basic" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
        /* @__PURE__ */ e.jsx(
          "input",
          {
            id: "search",
            type: "search",
            className: r(
              "ui-search-input",
              "bg-white fs-6 text-slate-20 br-x4 w-full pl-x24"
            ),
            placeholder: l,
            "aria-label": "Barra di ricerca",
            autoComplete: "off",
            value: i,
            onChange: (a) => {
              t && t(a.target.value), u(a.target.value);
            }
          }
        ),
        /* @__PURE__ */ e.jsx("div", { className: r("ui-div-btn"), children: /* @__PURE__ */ e.jsx(
          d,
          {
            className: r(
              "ui-btn-search",
              "bg-primary text-white fs-7 fw-semibold br-x4"
            ),
            onClick: () => s == null ? void 0 : s(i),
            children: o
          }
        ) })
      ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
        /* @__PURE__ */ e.jsx("div", { className: "ui-search-icon", children: /* @__PURE__ */ e.jsx(h, { width: 20, height: 20 }) }),
        /* @__PURE__ */ e.jsx(
          "input",
          {
            id: "search",
            type: "search",
            className: r(
              "ui-search-input",
              "bg-white fs-6 text-slate-20 br-x4 w-full pl-x24"
            ),
            placeholder: l,
            "aria-label": "Barra di ricerca",
            autoComplete: "off",
            value: i,
            onChange: (a) => {
              t && t(a.target.value), u(a.target.value);
            }
          }
        )
      ] })
    }
  );
};
export {
  w as Search
};
//# sourceMappingURL=index.es11.js.map