welcome-ui/dist/InputText.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as o } from "./jsx-runtime-Bqq1Hxg9.mjs";
import u from "react";
import { Box as _ } from "./Box.mjs";
import { ClearButton as y } from "./ClearButton.mjs";
import { IconWrapper as S, IconGroupWrapper as T } from "./Field.mjs";
import { shouldForwardProp as g, forwardRef as N } from "./System.mjs";
import { c as W } from "./create-event-rXDe5aCQ.mjs";
import { d as $, F as k } from "./field-styles-CfVLcVQp.mjs";
import A, { css as C } from "@xstyled/styled-components";
const D = A.inputBox.withConfig({ shouldForwardProp: g })(
  ({ iconPlacement: e, isClearable: p, size: i, transparent: t, variant: r }) => C`
    ${$({
    iconPlacement: e,
    isClearable: p,
    size: i,
    transparent: t,
    variant: r
  })};
    text-overflow: ellipsis;
  `
), G = N(
  ({
    autoFocus: e,
    dataTestId: p,
    disabled: i,
    icon: t,
    iconPlacement: r = "left",
    isClearable: l,
    name: n,
    onBlur: x,
    onChange: d,
    onFocus: c,
    onKeyDown: a,
    placeholder: I,
    size: m = "md",
    transparent: h,
    type: j = "text",
    value: f,
    variant: E,
    ...R
  }, v) => {
    const w = l && r === "right", z = t && r, s = k[m], B = () => {
      const F = W({
        name: n,
        value: ""
      });
      d && d(F);
    };
    return /* @__PURE__ */ o.jsxs(_, { position: "relative", children: [
      /* @__PURE__ */ o.jsx(
        D,
        {
          autoFocus: e,
          "data-testid": p,
          disabled: i,
          iconPlacement: !!t && r,
          id: n,
          isClearable: l,
          name: n,
          onBlur: x,
          onChange: d,
          onFocus: c,
          onKeyDown: a,
          placeholder: I,
          ref: v,
          size: m,
          transparent: h,
          type: j,
          value: f,
          variant: E,
          ...R
        }
      ),
      z && !w ? /* @__PURE__ */ o.jsx(S, { iconPlacement: r, size: s, children: u.cloneElement(t, { ...t.props, size: s }) }) : null,
      l ? /* @__PURE__ */ o.jsxs(T, { size: s, children: [
        f ? /* @__PURE__ */ o.jsx(y, { onClick: B }) : null,
        r === "right" && u.cloneElement(t, { ...t.props, size: s })
      ] }) : null
    ] });
  }
);
G.displayName = "InputText";
export {
  G as InputText
};