xtreme-ui/dist/components/base/ColorPicker/ColorPicker.js

Collection of reusable components that can be used in web projects

"use client";
import { jsxs as n, jsx as a } from "react/jsx-runtime";
import p from "@uiw/react-color-alpha";
import d from "@uiw/react-color-shade-slider";
import C from "@uiw/react-color-wheel";
import f from "clsx";
import { forwardRef as x } from "react";
import './colorPicker.css';/* empty css                 */
const s = 180, N = x((l, t) => {
  const { className: h, shade: m = !0, alpha: i = !0, color: o = { h: 0, s: 0, v: 100, a: 1 }, setColor: e } = l, c = f("xtrColorPicker", h);
  return /* @__PURE__ */ n("div", { ref: t, className: c, children: [
    /* @__PURE__ */ a(C, { className: "wheel", color: o, width: s, height: s, onChange: (r) => e(r.hsva) }),
    m && /* @__PURE__ */ a(d, { className: "shade", hsva: o, onChange: ({ v: r }) => e({ ...o, v: r }) }),
    i && /* @__PURE__ */ a(p, { className: "alpha", hsva: o, onChange: ({ a: r }) => e({ ...o, a: r }) })
  ] });
});
N.displayName = "ColorPicker";
export {
  N as ColorPicker
};