@frontify/fondue/dist/utilities/input.es.js

Design system of Frontify

import { jsx as e, jsxs as m } from "react/jsx-runtime";
import p from "../foundation/Icon/Generated/IconCheckMark16.es.js";
import b from "../foundation/Icon/Generated/IconCross16.es.js";
import x from "../foundation/Icon/Generated/IconExclamationMarkTriangle16.es.js";
import f from "../foundation/Icon/Generated/IconEye16.es.js";
import h from "../foundation/Icon/Generated/IconEyeOff16.es.js";
import { generateRandomId as y } from "./generateRandomId.es.js";
import { merge as g } from "./merge.es.js";
import { validationTextClassMap as u, Validation as n } from "./validation.es.js";
import { LoadingCircle as k, LoadingCircleSize as I } from "../components/LoadingCircle/LoadingCircle.es.js";
import { Button as l } from "../components/Button/Button.es.js";
import { ButtonEmphasis as s, ButtonStyle as d, ButtonSize as w } from "../components/Button/ButtonTypes.es.js";
const G = {
  base: "tw-flex tw-items-center tw-justify-between tw-gap-2 tw-px-3 tw-transition tw-text-sm tw-font-sans tw-relative tw-bg-base tw-border tw-rounded tw-line-strong",
  width: "tw-w-full",
  height: "tw-h-9 tw-min-h-[2.35rem]",
  element: "tw-bg-transparent tw-border-line-strong tw-text-text tw-placeholder-text-x-weak tw-outline-none tw-p-2",
  focus: "focus:tw-border-line-xx-strong",
  focusWithin: "focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong",
  hover: "hover:tw-border-line-x-strong",
  disabled: "disabled:tw-bg-box-disabled disabled:tw-border-line-weak disabled:tw-text-text-disabled disabled:hover:tw-cursor-not-allowed disabled:hover:tw-border-line-weak",
  readOnly: "read-only:tw-bg-box-disabled read-only:tw-border-none read-only:tw-text-text-weak read-only:hover:tw-cursor-not-allowed read-only:hover:tw-border-line-weak"
}, v = ({
  text: o,
  disabled: r = !1,
  validationStyle: t = n.Default,
  "data-test-id": a = "fondue-helper-text"
}) => /* @__PURE__ */ e(
  "span",
  {
    "data-test-id": a,
    className: g([
      "tw-text-s tw-font-sans",
      r ? "tw-text-black-40" : u[t]
    ]),
    children: o
  }
);
v.displayName = "FondueHelperText";
const C = (o, r) => {
  let t;
  switch (o) {
    case n.Success:
      t = /* @__PURE__ */ e(p, {});
      break;
    case n.Error:
    case n.Warning:
      t = /* @__PURE__ */ e(x, {});
      break;
    case n.Loading:
      t = /* @__PURE__ */ e(k, { size: I.Small });
      break;
    default:
      t = null;
  }
  return t ? /* @__PURE__ */ e("span", { className: u[o], "data-test-id": `${r}-status-icon`, children: t }) : null;
};
C.displayName = "FondueGetStatusIcon";
const S = ({
  clearable: o,
  disabled: r,
  obfuscated: t,
  isObfuscated: a,
  callbacks: i,
  dataTestId: c = "fondue-input-actions"
}) => /* @__PURE__ */ m("span", { className: "tw-flex tw-items-center tw-justify-between tw-w-auto", children: [
  t && /* @__PURE__ */ e(
    l,
    {
      size: w.Small,
      style: d.Default,
      disabled: r,
      emphasis: s.Weak,
      onClick: i.password,
      title: `${a ? "show" : "hide"} text input`,
      "aria-label": `${a ? "show" : "hide"} text input`,
      icon: a ? /* @__PURE__ */ e(f, {}) : /* @__PURE__ */ e(h, {}),
      "data-test-id": `${c}-visibility-icon`
    }
  ),
  o && /* @__PURE__ */ e(
    l,
    {
      style: d.Default,
      onClick: i.clearable,
      disabled: r,
      emphasis: s.Weak,
      icon: /* @__PURE__ */ e(b, {}),
      title: "Clear Input",
      size: w.Small,
      "aria-label": "Clear value",
      "data-test-id": `${c}-clear`
    }
  )
] });
S.displayName = "FondueInputActionButtons";
const E = ({ actions: o, disabled: r, dataTestId: t }) => o.map((a) => {
  const i = y();
  return /* @__PURE__ */ e(
    l,
    {
      style: d.Default,
      onClick: a.callback,
      disabled: r,
      emphasis: s.Weak,
      icon: a.icon,
      size: w.Small,
      "aria-describedby": "Clear Input Value",
      "aria-label": "Clear value",
      title: a.title,
      "data-test-id": `${t}-extra-action`
    },
    `extra-action-${i}`
  );
});
E.displayName = "FondueInputExtraActions";
export {
  C as GetStatusIcon,
  v as HelperText,
  S as InputActions,
  E as InputExtraActions,
  G as InputStyles
};
//# sourceMappingURL=input.es.js.map