@postenbring/hedwig-react/dist/chunk-GIFDGUFW.mjs

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

import {
  ValidationMessage
} from "./chunk-7REW23LO.mjs";
import {
  getValidationMessageValue
} from "./chunk-3V4GFS46.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-YOSPWY5K.mjs";

// src/form/input-group/input-group.tsx
import { useId, forwardRef, Children, isValidElement, cloneElement } from "react";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { jsx, jsxs } from "react/jsx-runtime";
var InputGroup = forwardRef(function InputGroup2(_a, ref) {
  var _b = _a, {
    id,
    className,
    style,
    "data-color": dataColor = void 0,
    size = "large",
    validationMessage,
    validationMessageProps,
    errorMessage,
    errorMessageProps,
    labelProps: _c = {}
  } = _b, _d = _c, { className: labelClassName } = _d, labelProps = __objRest(_d, ["className"]), _e = _b, {
    label,
    disabled,
    readOnly,
    children
  } = _e, rest = __objRest(_e, [
    "id",
    "className",
    "style",
    "data-color",
    "size",
    "validationMessage",
    "validationMessageProps",
    "errorMessage",
    "errorMessageProps",
    "labelProps",
    "label",
    "disabled",
    "readOnly",
    "children"
  ]);
  const validationMessageId = useId();
  const inputId = useId();
  const validationColor = errorMessage ? "error" : dataColor;
  const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);
  const renderInput = () => {
    var _a2;
    const inputProps = {
      "aria-describedby": validationMessage ? validationMessageId : void 0,
      "aria-invalid": errorMessage ? true : void 0,
      id: id != null ? id : inputId,
      className: clsx("hds-input-group__input")
    };
    if (typeof children === "function") {
      return children(inputProps);
    }
    const input = Children.toArray(children)[0];
    if (!isValidElement(input)) {
      return;
    }
    return cloneElement(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
      className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
    }));
  };
  return /* @__PURE__ */ jsxs(
    "div",
    __spreadProps(__spreadValues({
      className: clsx(
        "hds-input-group",
        {
          [`hds-input-group--${size}`]: size
        },
        className
      ),
      ref,
      style,
      "data-color": validationColor
    }, rest), {
      children: [
        label !== null && label !== void 0 && label !== false && /* @__PURE__ */ jsx(
          "label",
          __spreadProps(__spreadValues({
            className: clsx("hds-input-group__label", labelClassName)
          }, labelProps), {
            htmlFor: id != null ? id : inputId,
            children: label
          })
        ),
        /* @__PURE__ */ jsx(
          "div",
          {
            className: clsx("hds-input-group__input-wrapper"),
            "data-disabled": disabled,
            "data-readonly": readOnly,
            children: renderInput()
          }
        ),
        /* @__PURE__ */ jsx(
          ValidationMessage,
          __spreadProps(__spreadValues({
            id: validationMessageId
          }, validationMessageProps != null ? validationMessageProps : errorMessageProps), {
            children: validationMessageValue
          })
        )
      ]
    })
  );
});

export {
  InputGroup
};
//# sourceMappingURL=chunk-GIFDGUFW.mjs.map