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 { forwardRef as p } from "react";
import d from "@uiw/react-color-alpha";
import C from "@uiw/react-color-shade-slider";
import f from "@uiw/react-color-wheel";
import x from "clsx";
/* empty css                 */
const s = 180, N = p((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 = x("xtrColorPicker", h);
  return /* @__PURE__ */ n(
    "div",
    {
      ref: t,
      className: c,
      children: [
        /* @__PURE__ */ a(
          f,
          {
            className: "wheel",
            color: o,
            width: s,
            height: s,
            onChange: (r) => e(r.hsva)
          }
        ),
        m && /* @__PURE__ */ a(
          C,
          {
            className: "shade",
            hsva: o,
            onChange: ({ v: r }) => e({ ...o, v: r })
          }
        ),
        i && /* @__PURE__ */ a(
          d,
          {
            className: "alpha",
            hsva: o,
            onChange: ({ a: r }) => e({ ...o, a: r })
          }
        )
      ]
    }
  );
});
N.displayName = "ColorPicker";
export {
  N as ColorPicker
};