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