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

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

"use client";
import { jsxs as v, jsx as t } from "react/jsx-runtime";
import { forwardRef as x, useMemo as y, Children as j, isValidElement as w, cloneElement as E } from "react";
import c from "classnames";
import s from "./InputGroup.module.css.js";
const G = x(
  ({ className: d, id: f, label: m, children: l, name: n, disabled: r, hint: a, required: i, onChange: p, ...u }, N) => {
    const h = y(() => j.map(l, (o) => {
      if (w(o)) {
        const e = { name: n };
        return r !== void 0 && typeof o.props.disabled != "boolean" && (e.disabled = r), i !== void 0 && typeof o.props.required != "boolean" && (e.required = i), p !== void 0 && (e.onChange = p), E(o, e);
      }
      return o;
    }), [l, r, n, p, i]);
    return /* @__PURE__ */ v(
      "fieldset",
      {
        ...u,
        className: c(s.wrapper, d),
        disabled: r,
        id: f,
        ref: N,
        children: [
          /* @__PURE__ */ t("legend", { className: c(s.legend, { [s.disabled]: r }), children: m }),
          /* @__PURE__ */ t("div", { className: s.inputs, children: h }),
          a && /* @__PURE__ */ t("div", { className: s.hint, children: a })
        ]
      }
    );
  }
);
G.displayName = "InputGroup";
export {
  G as InputGroup
};
//# sourceMappingURL=InputGroup.js.map