import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import { useBindingState } from "../../form/hooks/useBindingState.js";
import { concat } from "../../utils/classNames.js";
import "../../utils/globals.js";
import "zod";
import { useArmstrongConfig } from "../config/config.context.js";
import "./characterLimit.theme.css.js";
const CharacterLimit = React.forwardRef(
  ({ bind, limit, shouldEnforce, value, className, validationErrorIcon, validationErrorsClassName, validationErrorsTitle, validationMode, ...nativeProps }, ref) => {
    const globals = useArmstrongConfig({
      validationErrorIcon,
      validationMode
    });
    const [boundValue, setBoundValue] = useBindingState(bind, { value });
    const exceeded = boundValue && boundValue.length > limit;
    React.useLayoutEffect(() => {
      if (shouldEnforce && exceeded) {
        setBoundValue == null ? void 0 : setBoundValue(boundValue == null ? void 0 : boundValue.slice(0, limit));
      }
    }, [boundValue, exceeded, limit, setBoundValue, shouldEnforce]);
    return jsxs("div", { ref, className: concat("arm-character-limit", className), "data-exceeded": exceeded, ...nativeProps, children: [jsxs("div", { className: "arm-character-limit-text", children: [boundValue == null ? void 0 : boundValue.length, "/", limit] }), exceeded && jsx("div", { className: concat("arm-character-limit-icon", validationErrorsClassName), title: validationErrorsTitle ?? "Character limit exceeded", children: (globals.validationMode === "both" || globals.validationMode === "icon") && globals.validationErrorIcon })] });
  }
  // type assertion to ensure generic works with RefForwarded component
  // DO NOT CHANGE TYPE WITHOUT CHANGING THIS, FIND TYPE BY INSPECTING React.forwardRef
);
CharacterLimit.displayName = "CharacterLimit";
export {
  CharacterLimit
};
//# sourceMappingURL=characterLimit.component.js.map
