"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Search, X } from "lucide-react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { cn } from "@open-mercato/shared/lib/utils";
import { inputWrapperVariants, inputElementVariants } from "./input.js";
const SearchInput = React.forwardRef(
  ({ className, inputClassName, size, value, onChange, onClear, clearable = true, clearLabel, placeholder, disabled, ...props }, ref) => {
    const t = useT();
    const resolvedPlaceholder = placeholder ?? t("ui.inputs.searchInput.placeholder", "Search\u2026");
    const resolvedClearLabel = clearLabel ?? t("ui.inputs.searchInput.clear", "Clear search");
    const showClear = clearable && value.length > 0 && !disabled;
    const handleClear = React.useCallback(() => {
      if (onClear) onClear();
      else onChange("");
    }, [onChange, onClear]);
    return /* @__PURE__ */ jsxs("div", { className: cn(inputWrapperVariants({ size }), className), "data-slot": "search-input-wrapper", children: [
      /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
      /* @__PURE__ */ jsx(
        "input",
        {
          ref,
          type: "search",
          inputMode: "search",
          autoComplete: "off",
          placeholder: resolvedPlaceholder,
          value,
          onChange: (event) => onChange(event.target.value),
          disabled,
          className: cn(
            inputElementVariants({ size }),
            // Disable the native search clear button — we render our own.
            "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
            inputClassName
          ),
          ...props
        }
      ),
      showClear ? /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          onClick: handleClear,
          "aria-label": resolvedClearLabel,
          className: "flex shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
        }
      ) : null
    ] });
  }
);
SearchInput.displayName = "SearchInput";
export {
  SearchInput
};
//# sourceMappingURL=search-input.js.map
