@elcrm/form 0.0.87 → 0.1.0

package/dist/fields/Color.js

@@ -1,495 +1 @@
-import e from "../styles/Field.module.js";
-import t from "../core/Field.js";
-import { useFormFieldState as n } from "../hooks/use.js";
-import { acquireOverlayZIndex as r, releaseOverlayZIndex as i } from "../overlayZ.js";
-import a from "../styles/Color.module.js";
-import o from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { createPortal as u } from "react-dom";
-//#region src/lib/fields/Color.tsx
-var d = /* @__PURE__ */ "#FF2D55.#FF3B30.#FF453A.#FF6961.#FF8A80.#C11F3E.#AF52DE.#BF5AF2.#DA8FFF.#5856D6.#5E5CE6.#7D7AFF.#007AFF.#0A84FF.#409CFF.#64D2FF.#70D7FF.#5AC8FA.#32ADE6.#64D2FF.#40C8E0.#00C7BE.#63E6E2.#66D4CF.#34C759.#30D158.#30DB5B.#4CD964.#6DE6A0.#8EEDB3.#A8E10C.#B5F200.#D0FF00.#E4FF66.#F2FF99.#C6FF00.#FFCC00.#FFD60A.#FFEA00.#FFE066.#FFF3A3.#FFEB3B.#FF9500.#FF9F0A.#FFB340.#FFB340.#FFD580.#FF8C00.#A2845E.#AC8E68.#C4A484.#8E8E93.#636366.#48484A.#3A3A3C.#2C2C2E.#1C1C1E".split(".");
-function f(e, t, n) {
-	return Math.min(n, Math.max(t, e));
-}
-function p(e) {
-	return Math.round(f(e, 0, 255)).toString(16).padStart(2, "0").toUpperCase();
-}
-function m(e, t, n) {
-	let r = (e % 360 + 360) % 360, i = n * t, a = i * (1 - Math.abs(r / 60 % 2 - 1)), o = n - i, s = 0, c = 0, l = 0;
-	return r < 60 ? [s, c, l] = [
-		i,
-		a,
-		0
-	] : r < 120 ? [s, c, l] = [
-		a,
-		i,
-		0
-	] : r < 180 ? [s, c, l] = [
-		0,
-		i,
-		a
-	] : r < 240 ? [s, c, l] = [
-		0,
-		a,
-		i
-	] : r < 300 ? [s, c, l] = [
-		a,
-		0,
-		i
-	] : [s, c, l] = [
-		i,
-		0,
-		a
-	], {
-		r: (s + o) * 255,
-		g: (c + o) * 255,
-		b: (l + o) * 255
-	};
-}
-function h(e, t, n) {
-	let r = e / 255, i = t / 255, a = n / 255, o = Math.max(r, i, a), s = o - Math.min(r, i, a), c = 0;
-	s !== 0 && (c = o === r ? (i - a) / s % 6 : o === i ? (a - r) / s + 2 : (r - i) / s + 4, c *= 60, c < 0 && (c += 360));
-	let l = o === 0 ? 0 : s / o;
-	return {
-		h: c,
-		s: l,
-		v: o
-	};
-}
-function g(e) {
-	if (typeof e != "string") return null;
-	let t = e.trim();
-	if (!t || (t[0] === "#" && (t = t.slice(1)), ![
-		3,
-		4,
-		6,
-		8
-	].includes(t.length)) || !/^[0-9a-fA-F]+$/.test(t)) return null;
-	let n = 0, r = 0, i = 0, a = 1;
-	return t.length === 3 || t.length === 4 ? (n = parseInt(t[0] + t[0], 16), r = parseInt(t[1] + t[1], 16), i = parseInt(t[2] + t[2], 16), t.length === 4 && (a = parseInt(t[3] + t[3], 16) / 255)) : (n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), t.length === 8 && (a = parseInt(t.slice(6, 8), 16) / 255)), {
-		...h(n, r, i),
-		a
-	};
-}
-function _(e, t) {
-	let { r: n, g: r, b: i } = m(e.h, e.s, e.v), a = `#${p(n)}${p(r)}${p(i)}`;
-	return !t || e.a >= .999 ? a : `${a}${p(e.a * 255)}`;
-}
-function v(e) {
-	let { r: t, g: n, b: r } = m(e.h, e.s, e.v), i = Math.round(t), a = Math.round(n), o = Math.round(r);
-	return e.a >= .999 ? `rgb(${i}, ${a}, ${o})` : `rgba(${i}, ${a}, ${o}, ${Number(e.a.toFixed(3))})`;
-}
-function y(e) {
-	let { r: t, g: n, b: r } = m(e, 1, 1);
-	return `rgb(${Math.round(t)},${Math.round(n)},${Math.round(r)})`;
-}
-function b(e) {
-	let t = g(e);
-	return t ? _(t, t.a < .999) : e.toUpperCase();
-}
-function x(e) {
-	return e == null ? !0 : typeof e == "string" ? e.trim() === "" : !1;
-}
-function S(e) {
-	if (!(e instanceof HTMLElement)) return !1;
-	let t = e.tagName;
-	return t === "INPUT" || t === "TEXTAREA" || t === "SELECT" ? !0 : !!e.isContentEditable;
-}
-function C(e) {
-	let t = (e || "").trim();
-	if (!t) return null;
-	let n = g(t) ?? g(t[0] === "#" ? t : `#${t.replace(/^#/, "")}`);
-	if (n) return n;
-	let r = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(t);
-	if (r) {
-		let e = f(Number(r[1]), 0, 255), t = f(Number(r[2]), 0, 255), n = f(Number(r[3]), 0, 255), i = r[4] === void 0 ? 1 : f(Number(r[4]), 0, 1);
-		return {
-			...h(e, t, n),
-			a: i
-		};
-	}
-	return null;
-}
-function w() {
-	return typeof window < "u" && "EyeDropper" in window;
-}
-var T = {
-	h: 0,
-	s: 1,
-	v: .76,
-	a: 1
-};
-function E({ value: r = "", form: i, onValue: f, onBlur: p, name: m = "", placeholder: h = "#000000", label: v = "", error: y = "", hidden: b = !1, disabled: w = !1, className: E = "", after: O = "", before: k = "", colors: A, alpha: j = !0 }) {
-	let { value: M } = n(i, m, r), N = typeof M == "string" ? M : M == null ? "" : String(M), [P, F] = o.useState(!1), [I, L] = o.useState(null), [R, z] = o.useState(() => g(N) ?? { ...T }), [B, V] = o.useState(() => _(g(N) ?? T, j)), H = A?.length ? A : d, U = g(N), W = U ?? (x(N) ? g(h) : null), G = U ? _(U, j) : "", K = W ? _(W, j) : "transparent";
-	o.useEffect(() => {
-		let e = g(N);
-		e && (z(e), V(_(e, j)));
-	}, [N, j]);
-	let q = o.useCallback((e, t) => {
-		let n = _(e, j), r = {
-			value: n,
-			name: m || ""
-		};
-		i && m && (t === "live" ? i.onValue(r) : i.setValue(r)), f && f !== i?.onValue && f(r), V(n);
-	}, [
-		j,
-		i,
-		m,
-		f
-	]), J = (e) => {
-		if (w) return;
-		let t = g(N) ?? { ...R };
-		z(t), V(_(t, j)), L(e.getBoundingClientRect()), F(!0);
-	}, Y = () => {
-		F(!1), p?.({
-			value: _(R, j),
-			name: m || ""
-		});
-	};
-	o.useEffect(() => {
-		if (!P || w) return;
-		let e = "", t = (t) => {
-			let n = C(t);
-			if (!n) return !1;
-			let r = {
-				...n,
-				a: j ? n.a : 1
-			}, i = _(r, j);
-			return i === e ? !0 : (e = i, z(r), q(r, "commit"), !0);
-		}, n = (e) => {
-			S(e.target) || t(e.clipboardData?.getData("text/plain") ?? "") && (e.preventDefault(), e.stopPropagation());
-		}, r = (e) => {
-			(e.ctrlKey || e.metaKey) && (e.key !== "v" && e.key !== "V" || S(e.target) || navigator.clipboard?.readText && (e.preventDefault(), navigator.clipboard.readText().then((e) => {
-				t(e);
-			})));
-		};
-		return document.addEventListener("paste", n, !0), window.addEventListener("keydown", r, !0), () => {
-			document.removeEventListener("paste", n, !0), window.removeEventListener("keydown", r, !0);
-		};
-	}, [
-		P,
-		w,
-		j,
-		q
-	]);
-	let X = (e) => {
-		if (!w) {
-			if (!P && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
-				e.preventDefault(), J(e.currentTarget);
-				return;
-			}
-			P && e.key === "Escape" && (e.preventDefault(), Y());
-		}
-	};
-	return b && x(N) ? null : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l(t, {
-		type: "color",
-		label: v,
-		error: y,
-		element_blok: { className: [E || ""] },
-		element_input: {
-			className: [e.w],
-			props: { "data-disabled": w ? "true" : void 0 }
-		},
-		children: [
-			k ? /* @__PURE__ */ c("span", {
-				className: e.affix,
-				children: k
-			}) : null,
-			/* @__PURE__ */ l("div", {
-				className: a.trigger,
-				role: "combobox",
-				tabIndex: w ? -1 : 0,
-				"aria-expanded": P,
-				"aria-haspopup": "dialog",
-				"aria-disabled": w,
-				"aria-label": v || "Цвет",
-				onClick: (e) => J(e.currentTarget),
-				onKeyDown: X,
-				children: [/* @__PURE__ */ c("span", {
-					className: a.preview,
-					style: { "--preview-color": K }
-				}), /* @__PURE__ */ c("span", {
-					className: [a.hexText, G ? "" : a.placeholder].filter(Boolean).join(" "),
-					children: G || h
-				})]
-			}),
-			O ? /* @__PURE__ */ c("span", {
-				className: e.affix,
-				children: O
-			}) : null
-		]
-	}), P && u(/* @__PURE__ */ c(D, {
-		parent: I || void 0,
-		hsva: R,
-		setHsva: z,
-		hexDraft: B,
-		setHexDraft: V,
-		alpha: j,
-		palette: H,
-		onLive: (e) => q(e, "live"),
-		onCommit: (e) => q(e, "commit"),
-		onClose: Y
-	}), document.body)] });
-}
-E.displayName = "ColorField";
-function D({ parent: e, hsva: t, setHsva: n, hexDraft: u, setHexDraft: d, alpha: p, palette: m, onLive: h, onCommit: y, onClose: x }) {
-	let [S] = o.useState(() => r());
-	if (o.useEffect(() => () => i(S), [S]), !e) return null;
-	let C = p ? 340 : 300, T = window.innerHeight - e.bottom < C + 8 ? Math.max(8, e.top - C - 8) : Math.min(window.innerHeight - C - 8, e.bottom + 8), E = Math.min(Math.max(8, e.left), window.innerWidth - 260 - 8), D = v({
-		...t,
-		a: 1
-	}), j = b(_(t, p)), N = (e, t) => {
-		n(e), t === "live" ? h(e) : y(e);
-	}, P = () => {
-		let e = g(u);
-		if (!e) {
-			d(_(t, p));
-			return;
-		}
-		N(e, "commit");
-	}, F = (e) => {
-		let n = e.replace(/[^\d]/g, ""), r = f(Number(n || 0), 0, 100);
-		N({
-			...t,
-			a: r / 100
-		}, "commit");
-	}, I = async () => {
-		if (w()) try {
-			let e = window.EyeDropper, n = g((await new e().open()).sRGBHex);
-			n && N({
-				...n,
-				a: t.a
-			}, "commit");
-		} catch {}
-	};
-	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
-		className: a.o,
-		style: { zIndex: S },
-		onClick: x,
-		"aria-hidden": !0
-	}), /* @__PURE__ */ l("div", {
-		className: a.panel,
-		role: "dialog",
-		"aria-label": "Выбор цвета",
-		style: {
-			top: T,
-			left: E,
-			width: 260,
-			zIndex: S + 1
-		},
-		children: [
-			/* @__PURE__ */ c(O, {
-				hsva: t,
-				onChange: (e, n, r) => N({
-					...t,
-					s: e,
-					v: n
-				}, r)
-			}),
-			/* @__PURE__ */ l("div", {
-				className: a.slidersRow,
-				children: [w() ? /* @__PURE__ */ c("button", {
-					type: "button",
-					className: a.eyedropper,
-					"aria-label": "Пипетка",
-					onClick: I,
-					children: /* @__PURE__ */ c(M, {})
-				}) : null, /* @__PURE__ */ l("div", {
-					className: a.sliders,
-					children: [/* @__PURE__ */ c(k, {
-						h: t.h,
-						onChange: (e, n) => N({
-							...t,
-							h: e
-						}, n)
-					}), p ? /* @__PURE__ */ c(A, {
-						a: t.a,
-						color: D,
-						onChange: (e, n) => N({
-							...t,
-							a: e
-						}, n)
-					}) : null]
-				})]
-			}),
-			/* @__PURE__ */ l("div", {
-				className: a.inputs,
-				children: [
-					/* @__PURE__ */ c("span", {
-						className: a.format,
-						children: "Hex"
-					}),
-					/* @__PURE__ */ c("input", {
-						className: a.input,
-						value: u.replace(/^#/, ""),
-						spellCheck: !1,
-						"aria-label": "Hex",
-						onChange: (e) => {
-							let t = e.target.value.replace(/[^0-9a-fA-F]/g, "");
-							d(t ? `#${t}` : "");
-						},
-						onBlur: P,
-						onKeyDown: (e) => {
-							e.key === "Enter" && (e.preventDefault(), e.target.blur());
-						}
-					}),
-					p ? /* @__PURE__ */ c("input", {
-						className: `${a.input} ${a.inputAlpha}`,
-						value: `${Math.round(t.a * 100)} %`,
-						"aria-label": "Прозрачность",
-						onChange: (e) => F(e.target.value),
-						onFocus: (e) => e.target.select()
-					}) : null
-				]
-			}),
-			/* @__PURE__ */ c("div", {
-				className: a.palette,
-				role: "listbox",
-				"aria-label": "Палитра",
-				children: m.map((e) => {
-					let t = b(e) === j;
-					return /* @__PURE__ */ c("button", {
-						type: "button",
-						role: "option",
-						"aria-checked": t,
-						"aria-label": e,
-						className: a.swatchBtn,
-						style: { "--swatch": e },
-						onClick: () => {
-							let t = g(e);
-							t && N({
-								...t,
-								a: p ? t.a : 1
-							}, "commit");
-						}
-					}, e);
-				})
-			})
-		]
-	})] });
-}
-function O({ hsva: e, onChange: t }) {
-	let n = o.useRef(null), r = o.useRef(!1), i = o.useRef(t);
-	i.current = t;
-	let s = (t, r) => {
-		let i = n.current;
-		if (!i) return {
-			s: e.s,
-			v: e.v
-		};
-		let a = i.getBoundingClientRect();
-		return {
-			s: f((t - a.left) / a.width, 0, 1),
-			v: f(1 - (r - a.top) / a.height, 0, 1)
-		};
-	};
-	return o.useEffect(() => {
-		let e = (e) => {
-			if (!r.current) return;
-			let { s: t, v: n } = s(e.clientX, e.clientY);
-			i.current(t, n, "live");
-		}, t = (e) => {
-			if (!r.current) return;
-			r.current = !1;
-			let { s: t, v: n } = s(e.clientX, e.clientY);
-			i.current(t, n, "commit");
-		};
-		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
-			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
-		};
-	}, []), /* @__PURE__ */ l("div", {
-		ref: n,
-		className: a.sv,
-		style: { background: y(e.h) },
-		onPointerDown: (e) => {
-			r.current = !0;
-			let { s: t, v: n } = s(e.clientX, e.clientY);
-			i.current(t, n, "live");
-		},
-		children: [
-			/* @__PURE__ */ c("div", { className: a.svWhite }),
-			/* @__PURE__ */ c("div", { className: a.svBlack }),
-			/* @__PURE__ */ c("div", {
-				className: a.handle,
-				style: {
-					left: `${e.s * 100}%`,
-					top: `${(1 - e.v) * 100}%`,
-					background: v({
-						...e,
-						a: 1
-					})
-				}
-			})
-		]
-	});
-}
-function k({ h: e, onChange: t }) {
-	return /* @__PURE__ */ c(j, {
-		className: `${a.slider} ${a.sliderHue}`,
-		ratio: e / 360,
-		onRatio: (e, n) => t(e * 360, n),
-		handleColor: y(e)
-	});
-}
-function A({ a: e, color: t, onChange: n }) {
-	return /* @__PURE__ */ c(j, {
-		className: `${a.slider} ${a.sliderAlpha}`,
-		style: { "--alpha-color": t },
-		ratio: e,
-		onRatio: n,
-		handleColor: t
-	});
-}
-function j({ className: e, style: t, ratio: n, onRatio: r, handleColor: i }) {
-	let s = o.useRef(null), l = o.useRef(!1), u = (e, t) => {
-		let n = s.current;
-		if (!n) return;
-		let i = n.getBoundingClientRect();
-		r(f((e - i.left) / i.width, 0, 1), t);
-	};
-	return o.useEffect(() => {
-		let e = (e) => {
-			l.current && u(e.clientX, "live");
-		}, t = (e) => {
-			l.current && (l.current = !1, u(e.clientX, "commit"));
-		};
-		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
-			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
-		};
-	}, [r]), /* @__PURE__ */ c("div", {
-		ref: s,
-		className: e,
-		style: t,
-		onPointerDown: (e) => {
-			l.current = !0, u(e.clientX, "live");
-		},
-		children: /* @__PURE__ */ c("div", {
-			className: a.sliderHandle,
-			style: {
-				left: `${f(n, 0, 1) * 100}%`,
-				background: i
-			}
-		})
-	});
-}
-function M() {
-	return /* @__PURE__ */ l("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": !0,
-		children: [
-			/* @__PURE__ */ c("path", { d: "m2 22 1-1h3l9-9" }),
-			/* @__PURE__ */ c("path", { d: "M3 21v-3l9-9" }),
-			/* @__PURE__ */ c("path", { d: "m15 5 3 3" }),
-			/* @__PURE__ */ c("path", { d: "M17.5 2.5a2.12 2.12 0 0 1 3 3L12 14l-4 1 1-4Z" })
-		]
-	});
-}
-//#endregion
-export { d as DEFAULT_COLOR_PALETTE, E as default };
+import e from"../styles/Field.module.js";import t from"../core/Field.js";import{useFormFieldState as n}from"../hooks/use.js";import{acquireOverlayZIndex as r,releaseOverlayZIndex as i}from"../overlayZ.js";import a from"../styles/Color.module.js";import o from"react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{createPortal as u}from"react-dom";var d=`#FF2D55.#FF3B30.#FF453A.#FF6961.#FF8A80.#C11F3E.#AF52DE.#BF5AF2.#DA8FFF.#5856D6.#5E5CE6.#7D7AFF.#007AFF.#0A84FF.#409CFF.#64D2FF.#70D7FF.#5AC8FA.#32ADE6.#64D2FF.#40C8E0.#00C7BE.#63E6E2.#66D4CF.#34C759.#30D158.#30DB5B.#4CD964.#6DE6A0.#8EEDB3.#A8E10C.#B5F200.#D0FF00.#E4FF66.#F2FF99.#C6FF00.#FFCC00.#FFD60A.#FFEA00.#FFE066.#FFF3A3.#FFEB3B.#FF9500.#FF9F0A.#FFB340.#FFB340.#FFD580.#FF8C00.#A2845E.#AC8E68.#C4A484.#8E8E93.#636366.#48484A.#3A3A3C.#2C2C2E.#1C1C1E`.split(`.`);function f(e,t,n){return Math.min(n,Math.max(t,e))}function p(e){return Math.round(f(e,0,255)).toString(16).padStart(2,`0`).toUpperCase()}function m(e,t,n){let r=(e%360+360)%360,i=n*t,a=i*(1-Math.abs(r/60%2-1)),o=n-i,s=0,c=0,l=0;return r<60?[s,c,l]=[i,a,0]:r<120?[s,c,l]=[a,i,0]:r<180?[s,c,l]=[0,i,a]:r<240?[s,c,l]=[0,a,i]:r<300?[s,c,l]=[a,0,i]:[s,c,l]=[i,0,a],{r:(s+o)*255,g:(c+o)*255,b:(l+o)*255}}function h(e,t,n){let r=e/255,i=t/255,a=n/255,o=Math.max(r,i,a),s=o-Math.min(r,i,a),c=0;s!==0&&(c=o===r?(i-a)/s%6:o===i?(a-r)/s+2:(r-i)/s+4,c*=60,c<0&&(c+=360));let l=o===0?0:s/o;return{h:c,s:l,v:o}}function g(e){if(typeof e!=`string`)return null;let t=e.trim();if(!t||(t[0]===`#`&&(t=t.slice(1)),![3,4,6,8].includes(t.length))||!/^[0-9a-fA-F]+$/.test(t))return null;let n=0,r=0,i=0,a=1;return t.length===3||t.length===4?(n=parseInt(t[0]+t[0],16),r=parseInt(t[1]+t[1],16),i=parseInt(t[2]+t[2],16),t.length===4&&(a=parseInt(t[3]+t[3],16)/255)):(n=parseInt(t.slice(0,2),16),r=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16),t.length===8&&(a=parseInt(t.slice(6,8),16)/255)),{...h(n,r,i),a}}function _(e,t){let{r:n,g:r,b:i}=m(e.h,e.s,e.v),a=`#${p(n)}${p(r)}${p(i)}`;return!t||e.a>=.999?a:`${a}${p(e.a*255)}`}function v(e){let{r:t,g:n,b:r}=m(e.h,e.s,e.v),i=Math.round(t),a=Math.round(n),o=Math.round(r);return e.a>=.999?`rgb(${i}, ${a}, ${o})`:`rgba(${i}, ${a}, ${o}, ${Number(e.a.toFixed(3))})`}function y(e){let{r:t,g:n,b:r}=m(e,1,1);return`rgb(${Math.round(t)},${Math.round(n)},${Math.round(r)})`}function b(e){let t=g(e);return t?_(t,t.a<.999):e.toUpperCase()}function x(e){return e==null?!0:typeof e==`string`?e.trim()===``:!1}function S(e){if(!(e instanceof HTMLElement))return!1;let t=e.tagName;return t===`INPUT`||t===`TEXTAREA`||t===`SELECT`?!0:!!e.isContentEditable}function C(e){let t=(e||``).trim();if(!t)return null;let n=g(t)??g(t[0]===`#`?t:`#${t.replace(/^#/,``)}`);if(n)return n;let r=/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(t);if(r){let e=f(Number(r[1]),0,255),t=f(Number(r[2]),0,255),n=f(Number(r[3]),0,255),i=r[4]===void 0?1:f(Number(r[4]),0,1);return{...h(e,t,n),a:i}}return null}function w(){return typeof window<`u`&&`EyeDropper`in window}var T={h:0,s:1,v:.76,a:1};function E({value:r=``,form:i,onValue:f,onBlur:p,name:m=``,placeholder:h=`#000000`,label:v=``,error:y=``,hidden:b=!1,disabled:w=!1,className:E=``,after:O=``,before:k=``,colors:A,alpha:j=!0}){let{value:M}=n(i,m,r),N=typeof M==`string`?M:M==null?``:String(M),[P,F]=o.useState(!1),[I,L]=o.useState(null),[R,z]=o.useState(()=>g(N)??{...T}),[B,V]=o.useState(()=>_(g(N)??T,j)),H=A?.length?A:d,U=g(N),W=U??(x(N)?g(h):null),G=U?_(U,j):``,K=W?_(W,j):`transparent`;o.useEffect(()=>{let e=g(N);e&&(z(e),V(_(e,j)))},[N,j]);let q=o.useCallback((e,t)=>{let n=_(e,j),r={value:n,name:m||``};i&&m&&(t===`live`?i.onValue(r):i.setValue(r)),f&&f!==i?.onValue&&f(r),V(n)},[j,i,m,f]),J=e=>{if(w)return;let t=g(N)??{...R};z(t),V(_(t,j)),L(e.getBoundingClientRect()),F(!0)},Y=()=>{F(!1),p?.({value:_(R,j),name:m||``})};o.useEffect(()=>{if(!P||w)return;let e=``,t=t=>{let n=C(t);if(!n)return!1;let r={...n,a:j?n.a:1},i=_(r,j);return i===e?!0:(e=i,z(r),q(r,`commit`),!0)},n=e=>{S(e.target)||t(e.clipboardData?.getData(`text/plain`)??``)&&(e.preventDefault(),e.stopPropagation())},r=e=>{(e.ctrlKey||e.metaKey)&&(e.key!==`v`&&e.key!==`V`||S(e.target)||navigator.clipboard?.readText&&(e.preventDefault(),navigator.clipboard.readText().then(e=>{t(e)})))};return document.addEventListener(`paste`,n,!0),window.addEventListener(`keydown`,r,!0),()=>{document.removeEventListener(`paste`,n,!0),window.removeEventListener(`keydown`,r,!0)}},[P,w,j,q]);let X=e=>{if(!w){if(!P&&(e.key===`Enter`||e.key===` `||e.key===`ArrowDown`)){e.preventDefault(),J(e.currentTarget);return}P&&e.key===`Escape`&&(e.preventDefault(),Y())}};return b&&x(N)?null:l(s,{children:[l(t,{type:`color`,label:v,error:y,element_blok:{className:[E||``]},element_input:{className:[e.w],props:{"data-disabled":w?`true`:void 0}},children:[k?c(`span`,{className:e.affix,children:k}):null,l(`div`,{className:a.trigger,role:`combobox`,tabIndex:w?-1:0,"aria-expanded":P,"aria-haspopup":`dialog`,"aria-disabled":w,"aria-label":v||`Цвет`,onClick:e=>J(e.currentTarget),onKeyDown:X,children:[c(`span`,{className:a.preview,style:{"--preview-color":K}}),c(`span`,{className:[a.hexText,G?``:a.placeholder].filter(Boolean).join(` `),children:G||h})]}),O?c(`span`,{className:e.affix,children:O}):null]}),P&&u(c(D,{parent:I||void 0,hsva:R,setHsva:z,hexDraft:B,setHexDraft:V,alpha:j,palette:H,onLive:e=>q(e,`live`),onCommit:e=>q(e,`commit`),onClose:Y}),document.body)]})}E.displayName=`ColorField`;function D({parent:e,hsva:t,setHsva:n,hexDraft:u,setHexDraft:d,alpha:p,palette:m,onLive:h,onCommit:y,onClose:x}){let[S]=o.useState(()=>r());if(o.useEffect(()=>()=>i(S),[S]),!e)return null;let C=p?340:300,T=window.innerHeight-e.bottom<C+8?Math.max(8,e.top-C-8):Math.min(window.innerHeight-C-8,e.bottom+8),E=Math.min(Math.max(8,e.left),window.innerWidth-260-8),D=v({...t,a:1}),j=b(_(t,p)),N=(e,t)=>{n(e),t===`live`?h(e):y(e)},P=()=>{let e=g(u);if(!e){d(_(t,p));return}N(e,`commit`)},F=e=>{let n=e.replace(/[^\d]/g,``),r=f(Number(n||0),0,100);N({...t,a:r/100},`commit`)},I=async()=>{if(w())try{let e=window.EyeDropper,n=g((await new e().open()).sRGBHex);n&&N({...n,a:t.a},`commit`)}catch{}};return l(s,{children:[c(`div`,{className:a.o,style:{zIndex:S},onClick:x,"aria-hidden":!0}),l(`div`,{className:a.panel,role:`dialog`,"aria-label":`Выбор цвета`,style:{top:T,left:E,width:260,zIndex:S+1},children:[c(O,{hsva:t,onChange:(e,n,r)=>N({...t,s:e,v:n},r)}),l(`div`,{className:a.slidersRow,children:[w()?c(`button`,{type:`button`,className:a.eyedropper,"aria-label":`Пипетка`,onClick:I,children:c(M,{})}):null,l(`div`,{className:a.sliders,children:[c(k,{h:t.h,onChange:(e,n)=>N({...t,h:e},n)}),p?c(A,{a:t.a,color:D,onChange:(e,n)=>N({...t,a:e},n)}):null]})]}),l(`div`,{className:a.inputs,children:[c(`span`,{className:a.format,children:`Hex`}),c(`input`,{className:a.input,value:u.replace(/^#/,``),spellCheck:!1,"aria-label":`Hex`,onChange:e=>{let t=e.target.value.replace(/[^0-9a-fA-F]/g,``);d(t?`#${t}`:``)},onBlur:P,onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),e.target.blur())}}),p?c(`input`,{className:`${a.input} ${a.inputAlpha}`,value:`${Math.round(t.a*100)} %`,"aria-label":`Прозрачность`,onChange:e=>F(e.target.value),onFocus:e=>e.target.select()}):null]}),c(`div`,{className:a.palette,role:`listbox`,"aria-label":`Палитра`,children:m.map(e=>{let t=b(e)===j;return c(`button`,{type:`button`,role:`option`,"aria-checked":t,"aria-label":e,className:a.swatchBtn,style:{"--swatch":e},onClick:()=>{let t=g(e);t&&N({...t,a:p?t.a:1},`commit`)}},e)})})]})]})}function O({hsva:e,onChange:t}){let n=o.useRef(null),r=o.useRef(!1),i=o.useRef(t);i.current=t;let s=(t,r)=>{let i=n.current;if(!i)return{s:e.s,v:e.v};let a=i.getBoundingClientRect();return{s:f((t-a.left)/a.width,0,1),v:f(1-(r-a.top)/a.height,0,1)}};return o.useEffect(()=>{let e=e=>{if(!r.current)return;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`live`)},t=e=>{if(!r.current)return;r.current=!1;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`commit`)};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[]),l(`div`,{ref:n,className:a.sv,style:{background:y(e.h)},onPointerDown:e=>{r.current=!0;let{s:t,v:n}=s(e.clientX,e.clientY);i.current(t,n,`live`)},children:[c(`div`,{className:a.svWhite}),c(`div`,{className:a.svBlack}),c(`div`,{className:a.handle,style:{left:`${e.s*100}%`,top:`${(1-e.v)*100}%`,background:v({...e,a:1})}})]})}function k({h:e,onChange:t}){return c(j,{className:`${a.slider} ${a.sliderHue}`,ratio:e/360,onRatio:(e,n)=>t(e*360,n),handleColor:y(e)})}function A({a:e,color:t,onChange:n}){return c(j,{className:`${a.slider} ${a.sliderAlpha}`,style:{"--alpha-color":t},ratio:e,onRatio:n,handleColor:t})}function j({className:e,style:t,ratio:n,onRatio:r,handleColor:i}){let s=o.useRef(null),l=o.useRef(!1),u=(e,t)=>{let n=s.current;if(!n)return;let i=n.getBoundingClientRect();r(f((e-i.left)/i.width,0,1),t)};return o.useEffect(()=>{let e=e=>{l.current&&u(e.clientX,`live`)},t=e=>{l.current&&(l.current=!1,u(e.clientX,`commit`))};return window.addEventListener(`pointermove`,e),window.addEventListener(`pointerup`,t),()=>{window.removeEventListener(`pointermove`,e),window.removeEventListener(`pointerup`,t)}},[r]),c(`div`,{ref:s,className:e,style:t,onPointerDown:e=>{l.current=!0,u(e.clientX,`live`)},children:c(`div`,{className:a.sliderHandle,style:{left:`${f(n,0,1)*100}%`,background:i}})})}function M(){return l(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":!0,children:[c(`path`,{d:`m2 22 1-1h3l9-9`}),c(`path`,{d:`M3 21v-3l9-9`}),c(`path`,{d:`m15 5 3 3`}),c(`path`,{d:`M17.5 2.5a2.12 2.12 0 0 1 3 3L12 14l-4 1 1-4Z`})]})}export{d as DEFAULT_COLOR_PALETTE,E as default};