welcome-ui/dist/InputText.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './InputText.css';
import { jsxs as y, jsx as e } from "react/jsx-runtime";
import { forwardRef as T } from "react";
import { CloseButton as E } from "./CloseButton.js";
import { useField as j } from "./Field.js";
import { Icon as g } from "./Icon.js";
import { c as B } from "./index-B6iGEm-i.js";
const C = "_root_1l0yu_8", D = "_transparent_1l0yu_68", F = "_clearable_1l0yu_88", L = "_disabled_1l0yu_112", k = {
  "input-text-wrapper": "_input-text-wrapper_1l0yu_2",
  root: C,
  "variant-danger": "_variant-danger_1l0yu_46",
  "variant-warning": "_variant-warning_1l0yu_49",
  "variant-success": "_variant-success_1l0yu_52",
  "placement-left": "_placement-left_1l0yu_56",
  "size-sm": "_size-sm_1l0yu_56",
  "size-md": "_size-md_1l0yu_59",
  "size-lg": "_size-lg_1l0yu_59",
  "placement-right": "_placement-right_1l0yu_62",
  transparent: D,
  clearable: F,
  "icon-wrapper": "_icon-wrapper_1l0yu_91",
  disabled: L,
  "icon-placement-left-sm": "_icon-placement-left-sm_1l0yu_115",
  "icon-placement-left-md": "_icon-placement-left-md_1l0yu_118",
  "icon-placement-right-sm": "_icon-placement-right-sm_1l0yu_121",
  "icon-placement-right-md": "_icon-placement-right-md_1l0yu_124"
}, l = B(k), O = { lg: "md", md: "md", sm: "sm" }, V = T(
  ({
    children: p,
    className: h,
    icon: t,
    iconPlacement: n = "left",
    isClearable: c,
    name: _,
    onChange: a,
    size: m = "lg",
    transparent: v,
    type: x = "text",
    value: u,
    variant: w,
    ...z
  }, I) => {
    const { getInputProps: b, variant: N } = j(), d = N || w, r = t && n, f = r && n === "right", $ = r && n === "left", s = O[m], i = b(z), o = !!p, R = c || f || o, S = () => {
      a && a({
        preventDefault: () => null,
        target: { name: _, value: "" }
      });
    };
    return /* @__PURE__ */ y("div", { className: l("input-text-wrapper", "field-input"), children: [
      /* @__PURE__ */ e(
        "input",
        {
          ...i,
          className: l(
            "root",
            `size-${m}`,
            d && `variant-${d}`,
            v && "transparent",
            r && `placement-${n}`,
            h
          ),
          name: _,
          onChange: a,
          ref: I,
          type: x,
          value: u
        }
      ),
      $ ? /* @__PURE__ */ e(
        "div",
        {
          className: l(
            "icon-wrapper",
            `icon-placement-left-${s}`,
            i.disabled && "disabled"
          ),
          children: /* @__PURE__ */ e(g, { ...t.props, name: t.props.name, size: s })
        }
      ) : null,
      R ? /* @__PURE__ */ y(
        "div",
        {
          className: l(
            "icon-wrapper",
            `icon-placement-right-${s}`,
            i.disabled && "disabled"
          ),
          children: [
            c && u ? /* @__PURE__ */ e(E, { onClick: S, size: "sm" }) : null,
            f && !o ? /* @__PURE__ */ e(g, { ...t.props, name: t.props.name, size: s }) : null,
            o ? p : null
          ]
        }
      ) : null
    ] });
  }
);
V.displayName = "InputText";
export {
  V as InputText,
  k as inputTextClasses
};