"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "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 WebsiteInput = React.forwardRef(
  ({ className, inputClassName, size, prefix = "https://", showPrefix = true, placeholder, disabled, ...props }, ref) => {
    const t = useT();
    const resolvedPlaceholder = placeholder ?? t("ui.inputs.websiteInput.placeholder", "www.example.com");
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn(
          inputWrapperVariants({ size }),
          // Override default px so prefix box can sit flush left.
          "px-0 overflow-hidden",
          className
        ),
        "data-slot": "website-input-wrapper",
        children: [
          showPrefix ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
            "span",
            {
              className: "flex shrink-0 items-center self-stretch border-r border-input px-3 text-sm text-muted-foreground select-none",
              "aria-hidden": "true",
              children: prefix
            }
          ) }) : null,
          /* @__PURE__ */ jsx(
            "input",
            {
              ref,
              type: "url",
              inputMode: "url",
              autoComplete: "url",
              placeholder: resolvedPlaceholder,
              disabled,
              className: cn(
                inputElementVariants({ size }),
                "px-3",
                inputClassName
              ),
              ...props
            }
          )
        ]
      }
    );
  }
);
WebsiteInput.displayName = "WebsiteInput";
export {
  WebsiteInput
};
//# sourceMappingURL=website-input.js.map
