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

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

"use client";
import { jsxs as C, jsx as t } from "react/jsx-runtime";
import { forwardRef as A, useMemo as D, useCallback as c, useRef as G } from "react";
import I from "classnames";
import { useLocalTheme as H } from "css-vars-hook";
import { IconSwatches as J } from "../../internal/Icons/IconSwatches.js";
import { useValidation as K } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as Q } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as U } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as W } from "../../internal/inputs/useValidationIcon.js";
import { useInternalId as X } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as Y } from "../../internal/hooks/useInternalRef.js";
import l from "./InputColor.module.css.js";
import { invertColor as m } from "./invertColor.js";
const Z = A(
  ({
    className: V,
    placeholder: N = "#??????",
    disabled: x,
    value: y,
    onChange: d = () => {
    },
    onFocus: u = () => {
    },
    onBlur: p = () => {
    },
    onKeyDown: R = () => {
    },
    onKeyUp: w = () => {
    },
    defaultValue: L,
    id: T,
    predefinedColors: f = [],
    errorMessage: F,
    revalidateOnFormChange: b,
    validation: s,
    displayIcon: j = !0,
    ...B
  }, k) => {
    const E = !!s, { validity: h, setValidity: M, validateTextual: O } = K({
      validation: s,
      hasValidators: E
    }), n = X(T), i = Y(k);
    U({ errorMessage: F, inputRef: i, setValidity: M, validation: s }), Q(i, O, b);
    const P = W(h), { LocalRoot: S, setTheme: o } = H(), r = y ?? L, _ = D(
      () => ({
        "selected-color": r,
        "inverted-color": m(r)
      }),
      [r]
    ), $ = c(
      (e) => {
        u(e), o({
          "selected-color": e.target.value,
          "inverted-color": m(e.target.value)
        });
      },
      [u, o]
    ), a = G(null), q = c(
      (e) => {
        o({
          "inverted-color": m(e.target.value)
        }), a != null && a.current && (a.current.innerText = e.target.value), p(e), d(e);
      },
      [o, p, d]
    ), z = c(
      (e) => {
        o({
          "selected-color": e.target.value,
          "inverted-color": "transparent"
        });
      },
      [o]
    ), g = f.length > 0, v = `${n}_predefinedColors`;
    return /* @__PURE__ */ C(S, { theme: _, className: I(l.wrapper, V), children: [
      /* @__PURE__ */ C("div", { className: l.toggle, children: [
        /* @__PURE__ */ t(
          "input",
          {
            ...B,
            id: n,
            ref: i,
            type: "color",
            disabled: x,
            defaultValue: r,
            className: l.input,
            onBlur: q,
            onKeyUp: w,
            onKeyDown: R,
            onFocus: $,
            onChange: z,
            list: g ? v : void 0
          }
        ),
        /* @__PURE__ */ t(J, { className: I(l.icon) })
      ] }),
      /* @__PURE__ */ t("label", { htmlFor: n, className: l.label, ref: a, children: r.toLowerCase() || N }),
      j && h && /* @__PURE__ */ t(P, {}),
      g && /* @__PURE__ */ t("datalist", { id: v, children: f.map((e) => /* @__PURE__ */ t("option", { value: e }, e)) })
    ] });
  }
);
Z.displayName = "InputColor";
export {
  Z as InputColor
};
//# sourceMappingURL=InputColor.js.map