@clubmed/trident-ui/molecules/Forms/FormControl.js

Shared ClubMed React UI components

import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { useInternalStatus as h } from "../../hooks/useInternalStatus.js";
import { FormLabel as S } from "./FormLabel.js";
import { Icon as b } from "../../atoms/Icons/Icon.js";
import "@clubmed/trident-icons";
import { c as g } from "../../chunks/index.js";
const w = ({
  id: t,
  label: r,
  description: o,
  disabled: m,
  required: n,
  className: i,
  validationStatus: l = "default",
  children: p,
  errorMessage: a,
  dataTestId: c,
  dataName: d,
  hideRequiredStar: x,
  layout: f
}) => {
  const u = h({
    isDisabled: !!m,
    validationStatus: l
  }) === "error" && a;
  return /* @__PURE__ */ s(
    "div",
    {
      className: g("flex flex-col gap-4", i),
      "data-name": d,
      "data-testid": c,
      children: [
        r && t && /* @__PURE__ */ e(
          S,
          {
            description: o,
            id: t,
            layout: f,
            required: n,
            hideRequiredStar: x,
            children: r
          }
        ),
        p,
        u && /* @__PURE__ */ s("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
          /* @__PURE__ */ e(b, { name: "Error", width: "20px" }),
          a
        ] })
      ]
    }
  );
};
export {
  w as FormControl
};
//# sourceMappingURL=FormControl.js.map