@frontify/fondue/dist/components/FormControl/FormControl.es.js

Design system of Frontify

import { jsxs as u, jsx as s } from "react/jsx-runtime";
import { cloneElement as v, isValidElement as g } from "react";
import { InputLabel as V } from "../InputLabel/InputLabel.es.js";
import { merge as d } from "../../utilities/merge.es.js";
import { Validation as c } from "../../utilities/validation.es.js";
var p = /* @__PURE__ */ ((t) => (t.Primary = "Primary", t.Positive = "Positive", t.Danger = "Danger", t))(p || {});
const N = {
  Primary: c.Default,
  Positive: c.Success,
  Danger: c.Error
}, m = ({
  text: t,
  disabled: e,
  style: i,
  fullWidth: w = !1,
  "data-test-id": a = "form-control"
}) => {
  let r;
  switch (!0) {
    case e:
      r = "tw-text-text-disabled";
      break;
    case i === "Danger":
      r = "tw-text-text-negative";
      break;
    case i === "Positive":
      r = "tw-text-text-positive";
      break;
    default:
      r = "tw-text-text-weak";
      break;
  }
  return /* @__PURE__ */ s(
    "span",
    {
      "data-test-id": `${a}-helper-text`,
      className: `tw-text-s tw-font-sans ${w ? "tw-w-full" : ""} ${r}`,
      children: t
    }
  );
};
m.displayName = "FondueHelperText";
var P = /* @__PURE__ */ ((t) => (t.Before = "Before", t.After = "After", t))(P || {}), k = /* @__PURE__ */ ((t) => (t.Horizontal = "Horizontal", t.Vertical = "Vertical", t))(k || {});
const H = ({
  label: t,
  children: e,
  extra: i,
  name: w,
  helper: a,
  disabled: r,
  clickable: l,
  direction: o = "Vertical",
  style: f = "Primary",
  "data-test-id": n = "form-control"
}) => {
  const x = (a == null ? void 0 : a.position) === "Before";
  return /* @__PURE__ */ u(
    "div",
    {
      "data-test-id": n,
      "data-name": w,
      className: d([
        "tw-flex tw-items-center tw-gap-2",
        o === "Horizontal" ? "tw-flex-row" : "tw-w-full tw-flex-col"
      ]),
      children: [
        t != null && t.children || i ? /* @__PURE__ */ u(
          "div",
          {
            className: d([
              "tw-flex tw-flew-row tw-items-center tw-justify-between",
              o === "Vertical" && "tw-w-full"
            ]),
            children: [
              t != null && t.children ? /* @__PURE__ */ s(V, { ...t, disabled: r, clickable: l }) : null,
              i ? /* @__PURE__ */ s(
                "span",
                {
                  "data-test-id": `${n}-extra`,
                  className: "tw-pl-2 tw-text-black-80 tw-font-sans tw-text-s tw-whitespace-nowrap",
                  children: i
                }
              ) : null
            ]
          }
        ) : null,
        (a == null ? void 0 : a.text) && x && /* @__PURE__ */ s(
          m,
          {
            style: f,
            fullWidth: o === "Vertical",
            text: a.text,
            disabled: r,
            "data-test-id": n
          }
        ),
        e ? /* @__PURE__ */ s(
          "div",
          {
            className: o === "Vertical" ? "tw-w-full tw-grid tw-grid-cols-1 tw-gap-5" : "",
            children: g(e) ? v(e, {
              id: (t == null ? void 0 : t.htmlFor) ?? e.props.id,
              disabled: r,
              validation: N[f]
            }) : e
          }
        ) : null,
        (a == null ? void 0 : a.text) && !x && /* @__PURE__ */ s(
          m,
          {
            fullWidth: o === "Vertical",
            text: a.text,
            disabled: r,
            style: f,
            "data-test-id": n
          }
        )
      ]
    }
  );
};
H.displayName = "FondueFormControl";
export {
  H as FormControl,
  k as FormControlDirection,
  p as FormControlStyle,
  P as HelperPosition
};
//# sourceMappingURL=FormControl.es.js.map