react-color-pikr
Version:
A modern, customizable React color picker component library with 8-digit HEX alpha support
977 lines (976 loc) • 26.9 kB
JavaScript
import he, { useState as Q, useRef as oe, useEffect as ae, useCallback as I } from "react";
var K = { exports: {} }, H = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ue;
function pe() {
if (ue) return H;
ue = 1;
var r = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
function o(c, i, a) {
var d = null;
if (a !== void 0 && (d = "" + a), i.key !== void 0 && (d = "" + i.key), "key" in i) {
a = {};
for (var l in i)
l !== "key" && (a[l] = i[l]);
} else a = i;
return i = a.ref, {
$$typeof: r,
type: c,
key: d,
ref: i !== void 0 ? i : null,
props: a
};
}
return H.Fragment = n, H.jsx = o, H.jsxs = o, H;
}
var z = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var le;
function be() {
return le || (le = 1, process.env.NODE_ENV !== "production" && function() {
function r(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === G ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case $:
return "Fragment";
case q:
return "Profiler";
case B:
return "StrictMode";
case L:
return "Suspense";
case X:
return "SuspenseList";
case J:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case M:
return "Portal";
case O:
return (e.displayName || "Context") + ".Provider";
case w:
return (e._context.displayName || "Context") + ".Consumer";
case Y:
var s = e.render;
return e = e.displayName, e || (e = s.displayName || s.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case T:
return s = e.displayName || null, s !== null ? s : r(e.type) || "Memo";
case F:
s = e._payload, e = e._init;
try {
return r(e(s));
} catch {
}
}
return null;
}
function n(e) {
return "" + e;
}
function o(e) {
try {
n(e);
var s = !1;
} catch {
s = !0;
}
if (s) {
s = console;
var p = s.error, R = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return p.call(
s,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
R
), n(e);
}
}
function c(e) {
if (e === $) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === F)
return "<...>";
try {
var s = r(e);
return s ? "<" + s + ">" : "<...>";
} catch {
return "<...>";
}
}
function i() {
var e = A.A;
return e === null ? null : e.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function d(e) {
if (Z.call(e, "key")) {
var s = Object.getOwnPropertyDescriptor(e, "key").get;
if (s && s.isReactWarning) return !1;
}
return e.key !== void 0;
}
function l(e, s) {
function p() {
t || (t = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
s
));
}
p.isReactWarning = !0, Object.defineProperty(e, "key", {
get: p,
configurable: !0
});
}
function h() {
var e = r(this.type);
return u[e] || (u[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function x(e, s, p, R, j, y, te, re) {
return p = y.ref, e = {
$$typeof: P,
type: e,
key: s,
props: y,
_owner: j
}, (p !== void 0 ? p : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: h
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: te
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: re
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function S(e, s, p, R, j, y, te, re) {
var E = s.children;
if (E !== void 0)
if (R)
if (U(E)) {
for (R = 0; R < E.length; R++)
k(E[R]);
Object.freeze && Object.freeze(E);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else k(E);
if (Z.call(s, "key")) {
E = r(e);
var D = Object.keys(s).filter(function(de) {
return de !== "key";
});
R = 0 < D.length ? "{key: someKey, " + D.join(": ..., ") + ": ...}" : "{key: someKey}", C[E + R] || (D = 0 < D.length ? "{" + D.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
R,
E,
D,
E
), C[E + R] = !0);
}
if (E = null, p !== void 0 && (o(p), E = "" + p), d(s) && (o(s.key), E = "" + s.key), "key" in s) {
p = {};
for (var ne in s)
ne !== "key" && (p[ne] = s[ne]);
} else p = s;
return E && l(
p,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), x(
e,
E,
y,
j,
i(),
p,
te,
re
);
}
function k(e) {
typeof e == "object" && e !== null && e.$$typeof === P && e._store && (e._store.validated = 1);
}
var f = he, P = Symbol.for("react.transitional.element"), M = Symbol.for("react.portal"), $ = Symbol.for("react.fragment"), B = Symbol.for("react.strict_mode"), q = Symbol.for("react.profiler"), w = Symbol.for("react.consumer"), O = Symbol.for("react.context"), Y = Symbol.for("react.forward_ref"), L = Symbol.for("react.suspense"), X = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), J = Symbol.for("react.activity"), G = Symbol.for("react.client.reference"), A = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Z = Object.prototype.hasOwnProperty, U = Array.isArray, W = console.createTask ? console.createTask : function() {
return null;
};
f = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var t, u = {}, b = f.react_stack_bottom_frame.bind(
f,
a
)(), v = W(c(a)), C = {};
z.Fragment = $, z.jsx = function(e, s, p, R, j) {
var y = 1e4 > A.recentlyCreatedOwnerStacks++;
return S(
e,
s,
p,
!1,
R,
j,
y ? Error("react-stack-top-frame") : b,
y ? W(c(e)) : v
);
}, z.jsxs = function(e, s, p, R, j) {
var y = 1e4 > A.recentlyCreatedOwnerStacks++;
return S(
e,
s,
p,
!0,
R,
j,
y ? Error("react-stack-top-frame") : b,
y ? W(c(e)) : v
);
};
}()), z;
}
var fe;
function xe() {
return fe || (fe = 1, process.env.NODE_ENV === "production" ? K.exports = pe() : K.exports = be()), K.exports;
}
var g = xe();
function me(r) {
const n = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
r
);
if (n)
return {
r: parseInt(n[1], 16),
g: parseInt(n[2], 16),
b: parseInt(n[3], 16),
a: parseInt(n[4], 16) / 255
};
const o = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
return o ? {
r: parseInt(o[1], 16),
g: parseInt(o[2], 16),
b: parseInt(o[3], 16)
} : null;
}
function se(r, n, o) {
const c = (i) => {
const a = Math.round(Math.max(0, Math.min(255, i))).toString(16);
return a.length === 1 ? "0" + a : a;
};
return `#${c(r)}${c(n)}${c(o)}`;
}
function ge(r, n, o, c) {
const i = (l) => {
const h = Math.round(Math.max(0, Math.min(255, l))).toString(16);
return h.length === 1 ? "0" + h : h;
}, a = Math.round(Math.max(0, Math.min(1, c)) * 255).toString(16), d = a.length === 1 ? "0" + a : a;
return `#${i(r)}${i(n)}${i(o)}${d}`;
}
function ee(r, n, o) {
r /= 255, n /= 255, o /= 255;
const c = Math.max(r, n, o), i = Math.min(r, n, o), a = c - i;
let d = 0;
const l = c === 0 ? 0 : a / c, h = c;
if (a !== 0)
switch (c) {
case r:
d = ((n - o) / a + (n < o ? 6 : 0)) / 6;
break;
case n:
d = ((o - r) / a + 2) / 6;
break;
case o:
d = ((r - n) / a + 4) / 6;
break;
}
return {
h: Math.round(d * 360),
s: Math.round(l * 100),
v: Math.round(h * 100)
};
}
function V(r, n, o) {
r = r / 360, n = n / 100, o = o / 100;
const c = Math.floor(r * 6), i = r * 6 - c, a = o * (1 - n), d = o * (1 - i * n), l = o * (1 - (1 - i) * n);
let h, x, S;
switch (c % 6) {
case 0:
h = o, x = l, S = a;
break;
case 1:
h = d, x = o, S = a;
break;
case 2:
h = a, x = o, S = l;
break;
case 3:
h = a, x = d, S = o;
break;
case 4:
h = l, x = a, S = o;
break;
case 5:
h = o, x = a, S = d;
break;
default:
h = x = S = 0;
}
return {
r: Math.round(h * 255),
g: Math.round(x * 255),
b: Math.round(S * 255)
};
}
function ve(r, n, o) {
r /= 255, n /= 255, o /= 255;
const c = Math.max(r, n, o), i = Math.min(r, n, o), a = c - i;
let d = 0, l = 0;
const h = (c + i) / 2;
if (a !== 0)
switch (l = h > 0.5 ? a / (2 - c - i) : a / (c + i), c) {
case r:
d = ((n - o) / a + (n < o ? 6 : 0)) / 6;
break;
case n:
d = ((o - r) / a + 2) / 6;
break;
case o:
d = ((r - n) / a + 4) / 6;
break;
}
return {
h: Math.round(d * 360),
s: Math.round(l * 100),
l: Math.round(h * 100)
};
}
function we(r, n, o) {
r = r / 360, n = n / 100, o = o / 100;
const c = (l, h, x) => (x < 0 && (x += 1), x > 1 && (x -= 1), x < 1 / 6 ? l + (h - l) * 6 * x : x < 1 / 2 ? h : x < 2 / 3 ? l + (h - l) * (2 / 3 - x) * 6 : l);
let i, a, d;
if (n === 0)
i = a = d = o;
else {
const l = o < 0.5 ? o * (1 + n) : o + n - o * n, h = 2 * o - l;
i = c(h, l, r + 1 / 3), a = c(h, l, r), d = c(h, l, r - 1 / 3);
}
return {
r: Math.round(i * 255),
g: Math.round(a * 255),
b: Math.round(d * 255)
};
}
function N(r) {
if (r.startsWith("#"))
return me(r);
const n = r.match(
/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
);
return n ? {
r: parseInt(n[1]),
g: parseInt(n[2]),
b: parseInt(n[3]),
a: n[4] ? parseFloat(n[4]) : void 0
} : null;
}
function ie(r) {
return r.a !== void 0 ? `rgba(${r.r}, ${r.g}, ${r.b}, ${r.a})` : `rgb(${r.r}, ${r.g}, ${r.b})`;
}
function Re(r) {
return (0.299 * r.r + 0.587 * r.g + 0.114 * r.b) / 255 > 0.5 ? "#000000" : "#ffffff";
}
const ce = {
colorSwatch: {
borderRadius: "4px",
border: "2px solid #ffffff",
cursor: "pointer",
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
transition: "transform 0.1s ease, box-shadow 0.1s ease",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
colorSwatchSelected: {
transform: "scale(1.1)",
boxShadow: "0 0 0 2px #007bff"
},
swatchCheckmark: {
fontSize: "12px",
fontWeight: "bold",
userSelect: "none",
pointerEvents: "none"
}
}, Ee = ({
color: r,
size: n = 24,
selected: o = !1,
onClick: c,
className: i = ""
}) => {
const a = N(r), d = a ? Re(a) : "#000000";
return /* @__PURE__ */ g.jsx(
"div",
{
style: {
...ce.colorSwatch,
...o ? ce.colorSwatchSelected : {},
width: n,
height: n,
backgroundColor: r,
cursor: c ? "pointer" : "default"
},
className: i,
onClick: c,
role: c ? "button" : void 0,
tabIndex: c ? 0 : void 0,
onKeyDown: (l) => {
c && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), c());
},
children: o && /* @__PURE__ */ g.jsx("div", { style: { ...ce.swatchCheckmark, color: d }, children: "✓" })
}
);
}, m = {
colorPicker: {
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif',
background: "#ffffff",
borderRadius: "8px",
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
padding: "16px",
userSelect: "none"
},
colorPickerDisabled: {
opacity: 0.6,
pointerEvents: "none"
},
colorPreview: {
marginBottom: "12px"
},
colorPreviewCurrent: {
width: "100%",
height: "40px",
borderRadius: "6px",
border: "1px solid #e0e0e0",
background: "#ffffff",
transition: "border-color 0.2s ease",
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
cursor: "pointer"
},
saturationArea: {
position: "relative",
marginBottom: "12px",
borderRadius: "4px",
cursor: "crosshair",
overflow: "hidden"
},
saturationOverlay: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0
},
saturationPointer: {
position: "absolute",
width: "14px",
height: "14px",
border: "2px solid #ffffff",
borderRadius: "50%",
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3)",
transform: "translate(-50%, -50%)",
pointerEvents: "none",
cursor: "crosshair",
transition: "box-shadow 0.1s ease"
},
hueSlider: {
position: "relative",
height: "12px",
marginBottom: "12px",
borderRadius: "6px",
background: "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)",
cursor: "pointer"
},
huePointer: {
position: "absolute",
top: "-3px",
width: "18px",
height: "18px",
border: "2px solid #ffffff",
borderRadius: "50%",
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3)",
transform: "translateX(-50%)",
pointerEvents: "none",
cursor: "pointer",
transition: "box-shadow 0.1s ease"
},
alphaSlider: {
position: "relative",
height: "12px",
marginBottom: "12px",
borderRadius: "6px",
cursor: "pointer"
},
alphaBackground: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
background: "#f0f0f0",
borderRadius: "6px"
},
alphaOverlay: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
borderRadius: "6px"
},
alphaPointer: {
position: "absolute",
top: "-3px",
width: "18px",
height: "18px",
border: "2px solid #ffffff",
borderRadius: "50%",
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.3)",
transform: "translateX(-50%)",
pointerEvents: "none",
cursor: "pointer",
transition: "box-shadow 0.1s ease"
},
formatToggle: {
display: "flex",
gap: "4px",
marginBottom: "12px"
},
formatButton: {
padding: "6px 12px",
border: "1px solid #e0e0e0",
borderRadius: "4px",
background: "#ffffff",
color: "#666666",
fontSize: "12px",
fontWeight: "500",
cursor: "pointer",
transition: "all 0.2s ease",
fontFamily: "inherit"
},
formatButtonActive: {
background: "#007bff",
color: "#ffffff",
borderColor: "#007bff"
},
formatButtonDisabled: {
opacity: 0.6,
cursor: "not-allowed"
},
colorInput: {
width: "100%",
padding: "8px 12px",
border: "1px solid #e0e0e0",
borderRadius: "4px",
fontSize: "14px",
fontFamily: "Monaco, Menlo, Ubuntu Mono, monospace",
background: "#ffffff",
color: "#2c3e50",
marginBottom: "12px",
transition: "border-color 0.2s ease",
boxSizing: "border-box"
},
presets: {
display: "flex",
flexWrap: "wrap",
gap: "6px",
marginTop: "8px"
}
}, _ = (...r) => Object.assign({}, ...r.filter(Boolean)), ke = [
"#FF0000",
"#FF8000",
"#FFFF00",
"#80FF00",
"#00FF00",
"#00FF80",
"#00FFFF",
"#0080FF",
"#0000FF",
"#8000FF",
"#FF00FF",
"#FF0080",
"#000000",
"#404040",
"#808080",
"#BFBFBF",
"#FFFFFF"
], Fe = ({
value: r = "#FF0000",
onChange: n,
format: o = "hex",
onFormatChange: c,
showAlpha: i = !1,
showColorFormat: a = !0,
showPresets: d = !0,
presetColors: l = ke,
width: h = 280,
height: x = 200,
className: S = "",
disabled: k = !1
}) => {
const [f, P] = Q(() => {
const t = typeof r == "string" ? N(r) || { r: 255, g: 0, b: 0 } : r;
return ee(t.r, t.g, t.b);
}), [M, $] = Q(null), [B, q] = Q(o), [w, O] = Q(() => {
if (typeof r == "string") {
const t = N(r);
return t?.a !== void 0 ? t.a : 1;
}
return typeof r == "object" && r.a !== void 0 ? r.a : 1;
}), Y = oe(null), L = oe(null), X = oe(null);
ae(() => {
if (typeof r == "string") {
const t = N(r);
t && (P(ee(t.r, t.g, t.b)), t.a !== void 0 && O(t.a));
}
}, [r]), ae(() => {
q(o);
}, [o]);
const T = I(() => {
const t = V(f.h, f.s, f.v);
switch (B) {
case "hex":
return i && w < 1 ? ge(t.r, t.g, t.b, w) : se(t.r, t.g, t.b);
case "rgb":
return i && w < 1 ? `rgba(${t.r}, ${t.g}, ${t.b}, ${w.toFixed(2)})` : `rgb(${t.r}, ${t.g}, ${t.b})`;
case "hsv":
return i && w < 1 ? `hsva(${f.h.toFixed(2)}, ${f.s.toFixed(
2
)}%, ${f.v.toFixed(2)}%, ${w.toFixed(2)})` : `hsv(${f.h.toFixed(2)}, ${f.s.toFixed(
2
)}%, ${f.v.toFixed(2)}%)`;
case "hsl": {
const u = ve(t.r, t.g, t.b);
return i && w < 1 ? `hsla(${u.h.toFixed(2)}, ${u.s.toFixed(2)}%, ${u.l.toFixed(
2
)}%, ${w.toFixed(2)})` : `hsl(${u.h.toFixed(2)}, ${u.s.toFixed(2)}%, ${u.l.toFixed(
2
)}%)`;
}
default:
return se(t.r, t.g, t.b);
}
}, [f, B, i, w]), F = I(
(t) => {
if (P(t), n) {
const u = T();
n(u);
}
},
[n, T]
), J = I(
(t) => {
if (k) return;
$("saturation");
const u = "touches" in t ? t.touches[0].clientX : t.clientX, b = "touches" in t ? t.touches[0].clientY : t.clientY, v = Y.current?.getBoundingClientRect();
if (v) {
const C = Math.max(
0,
Math.min(100, (u - v.left) / v.width * 100)
), e = Math.max(
0,
Math.min(100, (1 - (b - v.top) / v.height) * 100)
);
F({ ...f, s: C, v: e });
}
t.preventDefault();
},
[k, f, F]
), G = I(
(t) => {
if (k) return;
$("hue");
const u = "touches" in t ? t.touches[0].clientX : t.clientX, b = L.current?.getBoundingClientRect();
if (b) {
const v = Math.max(
0,
Math.min(360, (u - b.left) / b.width * 360)
);
F({ ...f, h: v });
}
t.preventDefault();
},
[k, f, F]
), A = I(
(t) => {
if (k || !i) return;
$("alpha");
const u = "touches" in t ? t.touches[0].clientX : t.clientX, b = X.current?.getBoundingClientRect();
if (b) {
const v = Math.max(
0,
Math.min(1, (u - b.left) / b.width)
);
O(v), n && n(T());
}
t.preventDefault();
},
[k, i, n, T]
), Z = I(
(t) => {
if (k) return;
const u = N(t);
if (u) {
const b = ee(u.r, u.g, u.b);
P(b), u.a !== void 0 && O(u.a), n && n(t);
}
},
[k, n]
);
ae(() => {
const t = (b) => {
if (!M) return;
const v = "touches" in b ? b.touches[0].clientX : b.clientX, C = "touches" in b ? b.touches[0].clientY : b.clientY;
if (M === "saturation") {
const e = Y.current?.getBoundingClientRect();
if (e) {
const s = Math.max(
0,
Math.min(100, (v - e.left) / e.width * 100)
), p = Math.max(
0,
Math.min(100, (1 - (C - e.top) / e.height) * 100)
);
F({ ...f, s, v: p });
}
} else if (M === "hue") {
const e = L.current?.getBoundingClientRect();
if (e) {
const s = Math.max(
0,
Math.min(360, (v - e.left) / e.width * 360)
);
F({ ...f, h: s });
}
} else if (M === "alpha") {
const e = X.current?.getBoundingClientRect();
if (e) {
const s = Math.max(
0,
Math.min(1, (v - e.left) / e.width)
);
O(s), n && n(T());
}
}
b.preventDefault();
}, u = () => {
$(null);
};
return M && (document.addEventListener("mousemove", t), document.addEventListener("mouseup", u), document.addEventListener("touchmove", t), document.addEventListener("touchend", u)), () => {
document.removeEventListener("mousemove", t), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", t), document.removeEventListener("touchend", u);
};
}, [
M,
f,
F,
n,
T
]);
const U = V(f.h, f.s, f.v), W = `linear-gradient(to right, #fff, ${se(
V(f.h, 100, 100).r,
V(f.h, 100, 100).g,
V(f.h, 100, 100).b
)})`;
return /* @__PURE__ */ g.jsxs(
"div",
{
style: _(
m.colorPicker,
k ? m.colorPickerDisabled : void 0,
{ width: h, minHeight: x }
),
className: S,
children: [
/* @__PURE__ */ g.jsx("div", { style: m.colorPreview, children: /* @__PURE__ */ g.jsx(
"div",
{
style: _(m.colorPreviewCurrent, {
backgroundColor: ie(i ? { ...U, a: w } : U)
})
}
) }),
/* @__PURE__ */ g.jsx(
"div",
{
ref: Y,
style: _(m.saturationArea, {
background: W,
height: x * 0.6
}),
onMouseDown: J,
onTouchStart: J,
children: /* @__PURE__ */ g.jsx(
"div",
{
style: _(m.saturationOverlay, {
background: "linear-gradient(to top, #000, transparent)"
}),
children: /* @__PURE__ */ g.jsx(
"div",
{
style: _(m.saturationPointer, {
left: `${f.s}%`,
top: `${100 - f.v}%`
})
}
)
}
)
}
),
/* @__PURE__ */ g.jsx(
"div",
{
ref: L,
style: m.hueSlider,
onMouseDown: G,
onTouchStart: G,
children: /* @__PURE__ */ g.jsx(
"div",
{
style: _(m.huePointer, {
left: `${f.h / 360 * 100}%`
})
}
)
}
),
i && /* @__PURE__ */ g.jsxs(
"div",
{
ref: X,
style: m.alphaSlider,
onMouseDown: A,
onTouchStart: A,
children: [
/* @__PURE__ */ g.jsx("div", { style: m.alphaBackground }),
/* @__PURE__ */ g.jsx(
"div",
{
style: _(m.alphaOverlay, {
background: `linear-gradient(to right, transparent, ${ie(
U
)})`
})
}
),
/* @__PURE__ */ g.jsx(
"div",
{
style: _(m.alphaPointer, {
left: `${w * 100}%`
})
}
)
]
}
),
a && /* @__PURE__ */ g.jsx("div", { style: m.formatToggle, children: ["hex", "rgb", "hsv", "hsl"].map((t) => /* @__PURE__ */ g.jsx(
"button",
{
style: _(
m.formatButton,
B === t ? m.formatButtonActive : void 0,
k ? m.formatButtonDisabled : void 0
),
onClick: () => {
q(t), c && c(t);
},
disabled: k,
children: t.toUpperCase()
},
t
)) }),
/* @__PURE__ */ g.jsx(
"input",
{
type: "text",
value: T(),
onChange: (t) => {
const u = N(t.target.value);
if (u) {
const b = ee(u.r, u.g, u.b);
F(b);
}
},
disabled: k,
style: m.colorInput
}
),
d && l && l.length > 0 && /* @__PURE__ */ g.jsx("div", { style: m.presets, children: l.map((t, u) => /* @__PURE__ */ g.jsx(
Ee,
{
color: t,
size: 20,
onClick: () => Z(t)
},
u
)) })
]
}
);
};
export {
Fe as ColorPicker,
Ee as ColorSwatch,
me as hexToRgb,
we as hslToRgb,
V as hsvToRgb,
se as rgbToHex,
ge as rgbToHexAlpha,
ve as rgbToHsl,
ee as rgbToHsv
};