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