@vela-ui/react/dist/chunk-DBXX3IGX.mjs

Vela UI React components

import {
  Input,
  InputGroup
} from "./chunk-NHADI6X2.mjs";
import {
  Button
} from "./chunk-BDRWTFDD.mjs";
import {
  Description,
  FieldError,
  Label
} from "./chunk-FFLNGARZ.mjs";
import {
  SearchIcon
} from "./chunk-ISWJRNF6.mjs";
import {
  CloseIcon
} from "./chunk-OR7JSSSN.mjs";

// src/components/search-field.tsx
import { SearchField as AriaSearchField, composeRenderProps } from "react-aria-components";
import { tv } from "tailwind-variants";
import { jsx, jsxs } from "react/jsx-runtime";
var searchFieldVariants = tv({
  base: "group flex flex-col gap-2 data-[empty=true]:[&_button]:hidden [&_input]:[&::-webkit-search-cancel-button]:appearance-none [&_input]:[&::-webkit-search-decoration]:appearance-none"
});
function SearchField({
  placeholder,
  label,
  description,
  errorMessage,
  size,
  className,
  startElement = /* @__PURE__ */ jsx(SearchIcon, {}),
  endElement = /* @__PURE__ */ jsx(Button, { variant: "ghost", shape: "circle", size: "xs", children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
  ...props
}) {
  var _a;
  return /* @__PURE__ */ jsxs(
    AriaSearchField,
    {
      "aria-label": (_a = placeholder != null ? placeholder : props["aria-label"]) != null ? _a : "Search",
      className: composeRenderProps(className, (className2) => searchFieldVariants({ className: className2 })),
      ...props,
      children: [
        label && /* @__PURE__ */ jsx(Label, { children: label }),
        /* @__PURE__ */ jsx(InputGroup, { size, startElement, endElement, children: /* @__PURE__ */ jsx(Input, { placeholder }) }),
        description && /* @__PURE__ */ jsx(Description, { children: description }),
        /* @__PURE__ */ jsx(FieldError, { children: errorMessage })
      ]
    }
  );
}

export {
  SearchField
};