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

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

"use client";
import { jsxs as z, jsx as i } from "react/jsx-runtime";
import { forwardRef as A, useCallback as u, useEffect as D } from "react";
import s from "classnames";
import { ValidationState as G } from "../../internal/inputs/ValidationProps.js";
import { useValidation as H } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as J } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as K } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as L } from "../../internal/inputs/useValidationIcon.js";
import { useInternalId as M } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as P } from "../../internal/hooks/useInternalRef.js";
import o from "./InputCheckbox.module.css.js";
const Q = A(
  ({
    className: h,
    disabled: I,
    value: V,
    onChange: l = () => {
    },
    onFocus: x = () => {
    },
    onBlur: N = () => {
    },
    onKeyDown: b = () => {
    },
    onKeyUp: v = () => {
    },
    checked: C,
    defaultChecked: k,
    id: R,
    label: m,
    required: e,
    revalidateOnFormChange: w,
    validation: a,
    errorMessage: y,
    indeterminate: r = !1,
    displayIcon: c = !0,
    ...g
  }, j) => {
    const p = M(R), B = !!a || !!e, { validateInteractive: f, validity: d, setValidity: n } = H({
      validation: a,
      hasValidators: B
    }), t = P(j);
    J(t, f, w), K({ errorMessage: y, inputRef: t, setValidity: n, validation: a });
    const E = L(d), F = u(
      (S) => {
        l(S);
      },
      [l]
    ), O = u(() => {
      n(G.error);
    }, [n]);
    return D(() => {
      t.current && (t.current.indeterminate = r);
    }, [r, t]), /* @__PURE__ */ z(
      "div",
      {
        className: s(
          o.wrapper,
          { [o.withValidationIcon]: c },
          h
        ),
        children: [
          /* @__PURE__ */ i(
            "input",
            {
              ...g,
              className: s(o.input, { [o.indeterminate]: r }),
              ref: t,
              disabled: I,
              type: "checkbox",
              id: p,
              value: V,
              checked: C,
              defaultChecked: k,
              onChange: F,
              onBlur: N,
              onFocus: x,
              onKeyUp: v,
              onKeyDown: b,
              onInput: f,
              onInvalid: O,
              required: e
            }
          ),
          m && /* @__PURE__ */ i(
            "label",
            {
              className: s(o.label, { [o.required]: e }),
              htmlFor: p,
              children: m
            }
          ),
          c && d && /* @__PURE__ */ i(E, { className: o.icon })
        ]
      }
    );
  }
);
Q.displayName = "InputCheckbox";
export {
  Q as InputCheckbox
};
//# sourceMappingURL=InputCheckbox.js.map