koval-ui/dist/src/lib/FormField/FormField.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as h, jsx as m } from "react/jsx-runtime";
import { forwardRef as F, Children as a, useMemo as N, cloneElement as b } from "react";
import d from "classnames";
import { useInternalId as y } from "../../internal/hooks/useInternalId.js";
import s from "./FormField.module.css.js";
const x = F(
  ({ className: t, children: o, label: n, hint: r, required: c, ...p }, f) => {
    const l = a.only(o).props, e = y(l.id), i = `${e}-hint`, u = N(
      () => b(a.only(o), {
        id: e,
        ...r && { "aria-describedby": i }
      }),
      [o, r, i, e]
    );
    return /* @__PURE__ */ h("div", { ...p, ref: f, className: d(s.wrapper, t), children: [
      /* @__PURE__ */ m(
        "label",
        {
          className: d(s.label, {
            [s.required]: l.required || c
          }),
          htmlFor: e,
          children: n
        }
      ),
      u,
      r && /* @__PURE__ */ m("div", { className: s.hint, id: i, children: r })
    ] });
  }
);
x.displayName = "FormField";
export {
  x as FormField
};
//# sourceMappingURL=FormField.js.map