@packyoung98/vcolor 0.0.2 → 0.0.3

package/dist/vcolor.js

@@ -0,0 +1,1447 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, openBlock as p, readonly as m, ref as h, renderList as g, toDisplayString as _, unref as v, useModel as y, vModelText as ee, vShow as b, watch as x, withDirectives as S, withKeys as C } from "vue";
+//#region src/utils/convert.ts
+function w(e) {
+	return (e % 360 + 360) % 360;
+}
+function T(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function E({ h: e, s: t, v: n, a: r }) {
+	e = w(e), t = T(t, 0, 100) / 100, n = T(n, 0, 100) / 100;
+	let i = n * t, a = i * (1 - Math.abs(e / 60 % 2 - 1)), o = n - i, s = 0, c = 0, l = 0;
+	return e < 60 ? [s, c, l] = [
+		i,
+		a,
+		0
+	] : e < 120 ? [s, c, l] = [
+		a,
+		i,
+		0
+	] : e < 180 ? [s, c, l] = [
+		0,
+		i,
+		a
+	] : e < 240 ? [s, c, l] = [
+		0,
+		a,
+		i
+	] : e < 300 ? [s, c, l] = [
+		a,
+		0,
+		i
+	] : [s, c, l] = [
+		i,
+		0,
+		a
+	], {
+		r: Math.round((s + o) * 255),
+		g: Math.round((c + o) * 255),
+		b: Math.round((l + o) * 255),
+		a: r
+	};
+}
+function D({ r: e, g: t, b: n, a: r }) {
+	e /= 255, t /= 255, n /= 255;
+	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = 0;
+	a !== 0 && (o = i === e ? (t - n) / a % 6 : i === t ? (n - e) / a + 2 : (e - t) / a + 4, o = w(o * 60));
+	let s = i === 0 ? 0 : a / i, c = i;
+	return {
+		h: o,
+		s: s * 100,
+		v: c * 100,
+		a: r
+	};
+}
+function O({ r: e, g: t, b: n, a: r }) {
+	e /= 255, t /= 255, n /= 255;
+	let i = Math.max(e, t, n), a = Math.min(e, t, n), o = i - a, s = 0;
+	o !== 0 && (s = i === e ? (t - n) / o % 6 : i === t ? (n - e) / o + 2 : (e - t) / o + 4, s = w(s * 60));
+	let c = (i + a) / 2, l = o === 0 ? 0 : o / (1 - Math.abs(2 * c - 1));
+	return {
+		h: s,
+		s: l * 100,
+		l: c * 100,
+		a: r
+	};
+}
+function k({ h: e, s: t, l: n, a: r }) {
+	e = w(e), t = T(t, 0, 100) / 100, n = T(n, 0, 100) / 100;
+	let i = (1 - Math.abs(2 * n - 1)) * t, a = i * (1 - Math.abs(e / 60 % 2 - 1)), o = n - i / 2, s = 0, c = 0, l = 0;
+	return e < 60 ? [s, c, l] = [
+		i,
+		a,
+		0
+	] : e < 120 ? [s, c, l] = [
+		a,
+		i,
+		0
+	] : e < 180 ? [s, c, l] = [
+		0,
+		i,
+		a
+	] : e < 240 ? [s, c, l] = [
+		0,
+		a,
+		i
+	] : e < 300 ? [s, c, l] = [
+		a,
+		0,
+		i
+	] : [s, c, l] = [
+		i,
+		0,
+		a
+	], {
+		r: Math.round((s + o) * 255),
+		g: Math.round((c + o) * 255),
+		b: Math.round((l + o) * 255),
+		a: r
+	};
+}
+function A({ r: e, g: t, b: n, a: r }) {
+	let i = (e) => T(Math.round(e), 0, 255).toString(16).padStart(2, "0"), a = `#${i(e)}${i(t)}${i(n)}`;
+	return r < 1 && (a += i(Math.round(r * 255))), a.toUpperCase();
+}
+function j(e) {
+	let t = e.trim().replace(/^#/, "");
+	(t.length === 3 || t.length === 4) && (t = t.split("").map((e) => e + e).join(""));
+	let n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), a = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
+	return {
+		r: Number.isNaN(n) ? 0 : n,
+		g: Number.isNaN(r) ? 0 : r,
+		b: Number.isNaN(i) ? 0 : i,
+		a: Number.isNaN(a) ? 1 : a
+	};
+}
+//#endregion
+//#region src/composables/useColor.ts
+function M(e = "#000000") {
+	let n = h(D(j(e))), r = t(() => E(n.value)), i = t(() => O(r.value)), a = t(() => A(r.value));
+	function o(e) {
+		n.value = { ...e };
+	}
+	function s(e) {
+		n.value = D(e);
+	}
+	function c(e) {
+		n.value = D(k(e));
+	}
+	function l(e) {
+		n.value = D(j(e));
+	}
+	function u(e) {
+		n.value = {
+			...n.value,
+			h: e
+		};
+	}
+	function d(e, t) {
+		n.value = {
+			...n.value,
+			s: e,
+			v: t
+		};
+	}
+	function f(e) {
+		n.value = {
+			...n.value,
+			a: e
+		};
+	}
+	return {
+		hsva: n,
+		rgba: r,
+		hsla: i,
+		hex: a,
+		setFromHsva: o,
+		setFromRgba: s,
+		setFromHsla: c,
+		setFromHex: l,
+		setHue: u,
+		setSaturation: d,
+		setAlpha: f
+	};
+}
+//#endregion
+//#region src/utils/format.ts
+function N(e, t, n = !1) {
+	let r = n ? 1 : e.a, i = E({
+		...e,
+		a: r
+	});
+	if (t === "rgb") return i;
+	if (t === "hsl") {
+		let e = O(i);
+		return {
+			h: Math.round(e.h),
+			s: Math.round(e.s),
+			l: Math.round(e.l),
+			a: e.a
+		};
+	}
+	return A(i);
+}
+//#endregion
+//#region src/composables/usePicker.ts
+function P(e, t) {
+	t != null && (typeof t == "string" ? e.setFromHex(t) : "v" in t ? e.setFromHsva(t) : "l" in t ? e.setFromHsla(t) : e.setFromRgba(t));
+}
+function F(e, t, n, r) {
+	let i = M(typeof e.value == "string" ? e.value : "#FF5733");
+	P(i, e.value);
+	function a() {
+		return N(i.hsva.value, n(), r());
+	}
+	x(e, (e) => {
+		JSON.stringify(e) !== JSON.stringify(a()) && P(i, e);
+	});
+	function o() {
+		let n = a();
+		e.value = n, t("input", n);
+	}
+	function s() {
+		let n = a();
+		e.value = n, t("change", n);
+	}
+	return {
+		...i,
+		output: a,
+		input: o,
+		change: s
+	};
+}
+//#endregion
+//#region src/composables/useEyeDropper.ts
+function I() {
+	let e = h(typeof window < "u" && "EyeDropper" in window), t = h("");
+	async function n() {
+		if (!e.value || !window.EyeDropper) return null;
+		try {
+			let e = await new window.EyeDropper().open();
+			return t.value = e.sRGBHex, e.sRGBHex;
+		} catch {
+			return null;
+		}
+	}
+	return {
+		isSupported: e,
+		sRGBHex: t,
+		open: n
+	};
+}
+//#endregion
+//#region src/composables/useDrag.ts
+function L(e) {
+	return Math.min(1, Math.max(0, e));
+}
+function R(e, t) {
+	let n = h(null);
+	function r(t) {
+		let r = n.value;
+		if (!r) return;
+		let i = r.getBoundingClientRect();
+		e(L((t.clientX - i.left) / i.width), L((t.clientY - i.top) / i.height));
+	}
+	function i() {
+		window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", i), t?.();
+	}
+	function a(e) {
+		e.preventDefault(), n.value?.focus?.(), r(e), window.addEventListener("pointermove", r), window.addEventListener("pointerup", i);
+	}
+	return f(i), {
+		target: n,
+		down: a
+	};
+}
+//#endregion
+//#region src/components/primitives/Saturation.vue?vue&type=script&setup=true&lang.ts
+var te = ["aria-valuetext"], z = /* @__PURE__ */ s({
+	__name: "Saturation",
+	props: {
+		hue: {},
+		saturation: {},
+		value: {}
+	},
+	emits: ["input", "change"],
+	setup(e, { emit: n }) {
+		let r = e, o = n, s = t(() => `hsl(${r.hue}, 100%, 50%)`), c = t(() => `${r.saturation}%`), l = t(() => `${100 - r.value}%`), { target: u, down: f } = R((e, t) => o("input", {
+			s: Math.round(e * 100),
+			v: Math.round((1 - t) * 100)
+		}), () => o("change"));
+		function m(e) {
+			let t = r.saturation, n = r.value;
+			switch (e.key) {
+				case "ArrowLeft":
+					--t;
+					break;
+				case "ArrowRight":
+					t += 1;
+					break;
+				case "ArrowUp":
+					n += 1;
+					break;
+				case "ArrowDown":
+					--n;
+					break;
+				default: return;
+			}
+			e.preventDefault(), o("input", {
+				s: Math.min(100, Math.max(0, t)),
+				v: Math.min(100, Math.max(0, n))
+			}), o("change");
+		}
+		return (t, n) => (p(), i("div", {
+			class: "vc-saturation",
+			ref: "target",
+			style: d({ background: s.value }),
+			onPointerdown: n[0] ||= (...e) => v(f) && v(f)(...e),
+			onKeydown: m,
+			tabindex: "0",
+			role: "slider",
+			"aria-label": "채도/명도 (saturation/value)",
+			"aria-valuetext": `S ${Math.round(e.saturation)}, V ${Math.round(e.value)}`
+		}, [
+			n[1] ||= a("div", { class: "vc-saturation__white" }, null, -1),
+			n[2] ||= a("div", { class: "vc-saturation__black" }, null, -1),
+			a("div", {
+				class: "vc-saturation__pointer",
+				style: d({
+					left: c.value,
+					top: l.value
+				})
+			}, null, 4)
+		], 44, te));
+	}
+}), ne = ["aria-valuenow"], B = /* @__PURE__ */ s({
+	__name: "Hue",
+	props: { hue: {} },
+	emits: ["input", "change"],
+	setup(e, { emit: n }) {
+		let r = e, o = n, s = t(() => `${r.hue / 360 * 100}%`), { target: c, down: l } = R((e) => o("input", Math.round(e * 360)), () => o("change"));
+		function u(e) {
+			let t = r.hue;
+			switch (e.key) {
+				case "ArrowLeft":
+				case "ArrowDown":
+					--t;
+					break;
+				case "ArrowRight":
+				case "ArrowUp":
+					t += 1;
+					break;
+				case "PageDown":
+					t -= 10;
+					break;
+				case "PageUp":
+					t += 10;
+					break;
+				case "Home":
+					t = 0;
+					break;
+				case "End":
+					t = 360;
+					break;
+				default: return;
+			}
+			e.preventDefault(), o("input", Math.min(360, Math.max(0, t))), o("change");
+		}
+		return (t, n) => (p(), i("div", {
+			class: "vc-hue",
+			ref: "target",
+			onPointerdown: n[0] ||= (...e) => v(l) && v(l)(...e),
+			onKeydown: u,
+			tabindex: "0",
+			role: "slider",
+			"aria-label": "색조 (hue)",
+			"aria-valuemin": 0,
+			"aria-valuemax": 360,
+			"aria-valuenow": Math.round(e.hue)
+		}, [a("div", {
+			class: "vc-hue__pointer",
+			style: d({ left: s.value })
+		}, null, 4)], 40, ne));
+	}
+}), re = ["aria-valuenow"], ie = { class: "vc-alpha__track" }, V = /* @__PURE__ */ s({
+	__name: "Alpha",
+	props: { rgba: {} },
+	emits: ["input", "change"],
+	setup(e, { emit: n }) {
+		let r = e, o = n, s = t(() => {
+			let { r: e, g: t, b: n } = r.rgba;
+			return `linear-gradient(to right, rgba(${e},${t},${n},0), rgba(${e},${t},${n},1))`;
+		}), c = t(() => `${r.rgba.a * 100}%`), { target: l, down: u } = R((e) => o("input", Math.round(e * 100) / 100), () => o("change"));
+		function f(e) {
+			let t = r.rgba.a;
+			switch (e.key) {
+				case "ArrowLeft":
+				case "ArrowDown":
+					t -= .05;
+					break;
+				case "ArrowRight":
+				case "ArrowUp":
+					t += .05;
+					break;
+				case "Home":
+					t = 0;
+					break;
+				case "End":
+					t = 1;
+					break;
+				default: return;
+			}
+			e.preventDefault(), t = Math.min(1, Math.max(0, Math.round(t * 100) / 100)), o("input", t), o("change");
+		}
+		return (t, n) => (p(), i("div", {
+			class: "vc-alpha",
+			ref: "target",
+			onPointerdown: n[0] ||= (...e) => v(u) && v(u)(...e),
+			onKeydown: f,
+			tabindex: "0",
+			role: "slider",
+			"aria-label": "투명도 (alpha)",
+			"aria-valuemin": 0,
+			"aria-valuemax": 1,
+			"aria-valuenow": e.rgba.a
+		}, [a("div", ie, [n[1] ||= a("div", { class: "vc-alpha__checker" }, null, -1), a("div", {
+			class: "vc-alpha__grad",
+			style: d({ background: s.value })
+		}, null, 4)]), a("div", {
+			class: "vc-alpha__pointer",
+			style: d({ left: c.value })
+		}, null, 4)], 40, re));
+	}
+}), ae = { class: "vc-input" }, oe = ["value"], se = { class: "vc-input__label" }, H = /* @__PURE__ */ s({
+	__name: "EditableInput",
+	props: {
+		label: {},
+		modelValue: {}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, o = h(String(n.modelValue)), s = h(!1);
+		x(() => n.modelValue, (e) => {
+			s.value || (o.value = String(e));
+		});
+		function c(e) {
+			o.value = e.target.value;
+		}
+		function u() {
+			s.value = !0;
+		}
+		async function d() {
+			s.value = !1, r("update:modelValue", o.value), r("change"), await l(), o.value = String(n.modelValue);
+		}
+		function f(e) {
+			e.target.blur();
+		}
+		return (t, n) => (p(), i("label", ae, [a("input", {
+			class: "vc-input__field",
+			value: o.value,
+			onInput: c,
+			onFocus: u,
+			onBlur: d,
+			onKeyup: C(f, ["enter"])
+		}, null, 40, oe), a("span", se, _(e.label), 1)]));
+	}
+}), U = { class: "vc-chrome__body" }, W = { class: "vc-chrome__sliders" }, G = { class: "vc-chrome__fields" }, K = { class: "vc-input vc-input--wide" }, ce = {
+	key: 3,
+	class: "vc-chrome__switch"
+}, le = { class: "vc-chrome__mode" }, ue = /* @__PURE__ */ s({
+	__name: "ChromePicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		disableAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: "var(--vc-width, 240px)" },
+		inputFormats: { default: () => [
+			"hex",
+			"rgb",
+			"hsl"
+		] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(s, { emit: c }) {
+		let l = y(s, "modelValue"), u = s, f = F(l, c, () => u.format, () => u.disableAlpha), m = I();
+		async function g() {
+			let e = await m.open();
+			e && (f.setFromHex(e), f.input(), f.change());
+		}
+		let b = h(u.inputFormats.includes(u.format) ? u.format : u.inputFormats[0] ?? "hex"), w = t(() => u.inputFormats.length > 1);
+		function T(e) {
+			let t = u.inputFormats;
+			b.value = t[(t.indexOf(b.value) + e + t.length) % t.length];
+		}
+		let E = h(f.hex.value), D = h(!1);
+		x(() => f.hex.value, (e) => {
+			D.value || (E.value = e);
+		});
+		function O() {
+			D.value = !1;
+			let e = E.value.trim().replace(/[^0-9a-fA-F]/g, "").slice(0, 8);
+			f.setFromHex("#" + e), f.input(), E.value = f.hex.value;
+		}
+		function k(e, t) {
+			return Math.max(0, Math.min(t, Math.round(+e || 0)));
+		}
+		function A(e, t) {
+			f.setFromRgba({
+				...f.rgba.value,
+				[e]: k(t, 255)
+			}), f.input();
+		}
+		function j(e, t) {
+			f.setFromHsla({
+				...f.hsla.value,
+				[e]: k(t, e === "h" ? 360 : 100)
+			}), f.input();
+		}
+		function M(e) {
+			f.setAlpha(Math.max(0, Math.min(1, +e || 0))), f.input();
+		}
+		let N = t(() => Math.round(f.rgba.value.a * 100) / 100), P = t(() => ({
+			h: Math.round(f.hsla.value.h),
+			s: Math.round(f.hsla.value.s),
+			l: Math.round(f.hsla.value.l)
+		})), L = t(() => ({ background: f.hex.value }));
+		return (t, c) => (p(), i("div", {
+			class: "vc-chrome",
+			style: d({ width: s.width })
+		}, [
+			o(z, {
+				hue: v(f).hsva.value.h,
+				saturation: v(f).hsva.value.s,
+				value: v(f).hsva.value.v,
+				onInput: c[0] ||= (e) => {
+					v(f).setSaturation(e.s, e.v), v(f).input();
+				},
+				onChange: c[1] ||= (e) => v(f).change()
+			}, null, 8, [
+				"hue",
+				"saturation",
+				"value"
+			]),
+			a("div", U, [
+				a("div", {
+					class: "vc-chrome__preview",
+					style: d(L.value)
+				}, null, 4),
+				v(m).isSupported ? (p(), i("button", {
+					key: 0,
+					type: "button",
+					class: "vc-chrome__eyedropper",
+					"aria-label": "스포이드로 화면 색 추출",
+					title: "스포이드",
+					onClick: g
+				}, [...c[16] ||= [a("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, [a("path", { d: "M11 7l6 6" }), a("path", { d: "M4 16l11.7 -11.7a2.41 2.41 0 0 1 3.4 3.4l-11.7 11.7l-4 1l1 -4z" })], -1)]])) : r("", !0),
+				a("div", W, [o(B, {
+					hue: v(f).hsva.value.h,
+					onInput: c[2] ||= (e) => {
+						v(f).setHue(e), v(f).input();
+					},
+					onChange: c[3] ||= (e) => v(f).change()
+				}, null, 8, ["hue"]), s.disableAlpha ? r("", !0) : (p(), n(V, {
+					key: 0,
+					rgba: v(f).rgba.value,
+					onInput: c[4] ||= (e) => {
+						v(f).setAlpha(e), v(f).input();
+					},
+					onChange: c[5] ||= (e) => v(f).change()
+				}, null, 8, ["rgba"]))])
+			]),
+			a("div", G, [b.value === "hex" ? (p(), i(e, { key: 0 }, [a("label", K, [S(a("input", {
+				class: "vc-input__field",
+				"onUpdate:modelValue": c[6] ||= (e) => E.value = e,
+				onFocus: c[7] ||= (e) => D.value = !0,
+				onChange: O,
+				onKeyup: C(O, ["enter"])
+			}, null, 544), [[ee, E.value]]), c[17] ||= a("span", { class: "vc-input__label" }, "hex", -1)]), s.disableAlpha ? r("", !0) : (p(), n(H, {
+				key: 0,
+				label: "a",
+				modelValue: N.value,
+				"onUpdate:modelValue": M
+			}, null, 8, ["modelValue"]))], 64)) : b.value === "rgb" ? (p(), i(e, { key: 1 }, [
+				o(H, {
+					label: "r",
+					modelValue: v(f).rgba.value.r,
+					"onUpdate:modelValue": c[8] ||= (e) => A("r", e)
+				}, null, 8, ["modelValue"]),
+				o(H, {
+					label: "g",
+					modelValue: v(f).rgba.value.g,
+					"onUpdate:modelValue": c[9] ||= (e) => A("g", e)
+				}, null, 8, ["modelValue"]),
+				o(H, {
+					label: "b",
+					modelValue: v(f).rgba.value.b,
+					"onUpdate:modelValue": c[10] ||= (e) => A("b", e)
+				}, null, 8, ["modelValue"]),
+				s.disableAlpha ? r("", !0) : (p(), n(H, {
+					key: 0,
+					label: "a",
+					modelValue: N.value,
+					"onUpdate:modelValue": M
+				}, null, 8, ["modelValue"]))
+			], 64)) : (p(), i(e, { key: 2 }, [
+				o(H, {
+					label: "h",
+					modelValue: P.value.h,
+					"onUpdate:modelValue": c[11] ||= (e) => j("h", e)
+				}, null, 8, ["modelValue"]),
+				o(H, {
+					label: "s",
+					modelValue: P.value.s,
+					"onUpdate:modelValue": c[12] ||= (e) => j("s", e)
+				}, null, 8, ["modelValue"]),
+				o(H, {
+					label: "l",
+					modelValue: P.value.l,
+					"onUpdate:modelValue": c[13] ||= (e) => j("l", e)
+				}, null, 8, ["modelValue"]),
+				s.disableAlpha ? r("", !0) : (p(), n(H, {
+					key: 0,
+					label: "a",
+					modelValue: N.value,
+					"onUpdate:modelValue": M
+				}, null, 8, ["modelValue"]))
+			], 64)), w.value ? (p(), i("div", ce, [a("button", {
+				type: "button",
+				class: "vc-chrome__chev",
+				"aria-label": "이전 포맷",
+				onClick: c[14] ||= (e) => T(-1)
+			}, " ▲ "), a("button", {
+				type: "button",
+				class: "vc-chrome__chev",
+				"aria-label": "다음 포맷",
+				onClick: c[15] ||= (e) => T(1)
+			}, " ▼ ")])) : r("", !0)]),
+			a("div", le, _(b.value.toUpperCase()), 1)
+		], 4));
+	}
+}), q = [
+	"#D0021B",
+	"#F5A623",
+	"#F8E71C",
+	"#8B572A",
+	"#7ED321",
+	"#417505",
+	"#BD10E0",
+	"#9013FE",
+	"#4A90E2",
+	"#50E3C2",
+	"#B8E986",
+	"#000000",
+	"#4A4A4A",
+	"#9B9B9B",
+	"#FFFFFF"
+], de = [
+	"#F44336",
+	"#E91E63",
+	"#9C27B0",
+	"#673AB7",
+	"#3F51B5",
+	"#2196F3",
+	"#03A9F4",
+	"#00BCD4",
+	"#009688",
+	"#4CAF50",
+	"#8BC34A",
+	"#CDDC39",
+	"#FFEB3B",
+	"#FFC107",
+	"#FF9800",
+	"#FF5722",
+	"#795548",
+	"#607D8B"
+], J = [
+	"#4D4D4D",
+	"#999999",
+	"#FFFFFF",
+	"#F44E3B",
+	"#FE9200",
+	"#FCDC00",
+	"#DBDF00",
+	"#A4DD00",
+	"#68CCCA",
+	"#73D8FF",
+	"#AEA1FF",
+	"#FDA1FF",
+	"#333333",
+	"#808080",
+	"#CCCCCC",
+	"#D33115",
+	"#E27300",
+	"#FCC400",
+	"#B0BC00",
+	"#68BC00",
+	"#16A5A5",
+	"#009CE0",
+	"#7B64FF",
+	"#FA28FF"
+], Y = [
+	"#FF6900",
+	"#FCB900",
+	"#7BDCB5",
+	"#00D084",
+	"#8ED1FC",
+	"#0693E3",
+	"#ABB8C3",
+	"#EB144C",
+	"#F78DA7",
+	"#9900EF"
+], X = Array.from({ length: 15 }, (e, t) => {
+	let n = Math.round(t / 14 * 255).toString(16).padStart(2, "0");
+	return `#${n}${n}${n}`.toUpperCase();
+}), Z = [
+	[
+		"#FFEBEE",
+		"#FFCDD2",
+		"#E57373",
+		"#F44336",
+		"#D32F2F",
+		"#B71C1C"
+	],
+	[
+		"#F3E5F5",
+		"#CE93D8",
+		"#AB47BC",
+		"#9C27B0",
+		"#7B1FA2",
+		"#4A148C"
+	],
+	[
+		"#E3F2FD",
+		"#90CAF9",
+		"#42A5F5",
+		"#2196F3",
+		"#1976D2",
+		"#0D47A1"
+	],
+	[
+		"#E0F2F1",
+		"#80CBC4",
+		"#26A69A",
+		"#009688",
+		"#00796B",
+		"#004D40"
+	],
+	[
+		"#E8F5E9",
+		"#A5D6A7",
+		"#66BB6A",
+		"#4CAF50",
+		"#388E3C",
+		"#1B5E20"
+	],
+	[
+		"#FFFDE7",
+		"#FFF59D",
+		"#FFEE58",
+		"#FFEB3B",
+		"#FBC02D",
+		"#F57F17"
+	],
+	[
+		"#FFF3E0",
+		"#FFCC80",
+		"#FFA726",
+		"#FF9800",
+		"#F57C00",
+		"#E65100"
+	],
+	[
+		"#EFEBE9",
+		"#BCAAA4",
+		"#8D6E63",
+		"#795548",
+		"#5D4037",
+		"#3E2723"
+	]
+], fe = ["aria-label"], Q = /* @__PURE__ */ s({
+	__name: "Swatch",
+	props: {
+		color: {},
+		active: { type: Boolean }
+	},
+	emits: ["select"],
+	setup(e, { emit: t }) {
+		let n = t;
+		return (t, r) => (p(), i("button", {
+			class: u(["vc-swatch", { "is-active": e.active }]),
+			style: d({ background: e.color }),
+			type: "button",
+			"aria-label": e.color,
+			onClick: r[0] ||= (t) => n("select", e.color)
+		}, null, 14, fe));
+	}
+}), pe = { class: "vc-sketch__controls" }, me = { class: "vc-sketch__sliders" }, he = { class: "vc-sketch__field" }, ge = { class: "vc-sketch__presets" }, _e = /* @__PURE__ */ s({
+	__name: "SketchPicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		disableAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		presetColors: { default: () => q },
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(s, { emit: c }) {
+		let l = y(s, "modelValue"), u = s, f = F(l, c, () => u.format, () => u.disableAlpha), m = t(() => ({ background: f.hex.value }));
+		function h(e) {
+			f.setFromHex(e), f.input(), f.change();
+		}
+		function _(e) {
+			f.setFromHex(e), f.input();
+		}
+		return (t, c) => (p(), i("div", {
+			class: "vc-sketch",
+			style: d({ width: s.width })
+		}, [
+			o(z, {
+				hue: v(f).hsva.value.h,
+				saturation: v(f).hsva.value.s,
+				value: v(f).hsva.value.v,
+				onInput: c[0] ||= (e) => {
+					v(f).setSaturation(e.s, e.v), v(f).input();
+				},
+				onChange: c[1] ||= (e) => v(f).change()
+			}, null, 8, [
+				"hue",
+				"saturation",
+				"value"
+			]),
+			a("div", pe, [a("div", me, [o(B, {
+				hue: v(f).hsva.value.h,
+				onInput: c[2] ||= (e) => {
+					v(f).setHue(e), v(f).input();
+				},
+				onChange: c[3] ||= (e) => v(f).change()
+			}, null, 8, ["hue"]), s.disableAlpha ? r("", !0) : (p(), n(V, {
+				key: 0,
+				rgba: v(f).rgba.value,
+				onInput: c[4] ||= (e) => {
+					v(f).setAlpha(e), v(f).input();
+				},
+				onChange: c[5] ||= (e) => v(f).change()
+			}, null, 8, ["rgba"]))]), a("div", {
+				class: "vc-sketch__preview",
+				style: d(m.value)
+			}, null, 4)]),
+			a("div", he, [o(H, {
+				label: "hex",
+				modelValue: v(f).hex.value,
+				"onUpdate:modelValue": _
+			}, null, 8, ["modelValue"])]),
+			a("div", ge, [(p(!0), i(e, null, g(s.presetColors, (e) => (p(), n(Q, {
+				key: e,
+				color: e,
+				onSelect: h
+			}, null, 8, ["color"]))), 128))])
+		], 4));
+	}
+}), ve = { class: "vc-ps__main" }, ye = { class: "vc-ps__hue" }, be = { class: "vc-ps__side" }, xe = { class: "vc-ps__compare" }, Se = /* @__PURE__ */ s({
+	__name: "PhotoshopPicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		disableAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: "var(--vc-width, 280px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c([
+		"change",
+		"input",
+		"ok",
+		"cancel"
+	], ["update:modelValue"]),
+	setup(e, { emit: n }) {
+		let r = y(e, "modelValue"), s = e, c = n, l = F(r, c, () => s.format, () => s.disableAlpha), u = h(A({
+			...l.rgba.value,
+			a: 1
+		})), f = t(() => l.hex.value);
+		function m() {
+			c("ok", l.output()), u.value = l.hex.value;
+		}
+		function g() {
+			l.setFromHex(u.value), l.input(), c("cancel");
+		}
+		return (t, n) => (p(), i("div", {
+			class: "vc-ps",
+			style: d({ width: e.width })
+		}, [a("div", ve, [o(z, {
+			class: "vc-ps__sat",
+			hue: v(l).hsva.value.h,
+			saturation: v(l).hsva.value.s,
+			value: v(l).hsva.value.v,
+			onInput: n[0] ||= (e) => {
+				v(l).setSaturation(e.s, e.v), v(l).input();
+			},
+			onChange: n[1] ||= (e) => v(l).change()
+		}, null, 8, [
+			"hue",
+			"saturation",
+			"value"
+		]), a("div", ye, [o(B, {
+			hue: v(l).hsva.value.h,
+			onInput: n[2] ||= (e) => {
+				v(l).setHue(e), v(l).input();
+			},
+			onChange: n[3] ||= (e) => v(l).change()
+		}, null, 8, ["hue"])])]), a("div", be, [
+			a("div", xe, [a("div", {
+				class: "vc-ps__swatch",
+				style: d({ background: f.value })
+			}, [...n[4] ||= [a("span", null, "new", -1)]], 4), a("div", {
+				class: "vc-ps__swatch",
+				style: d({ background: u.value })
+			}, [...n[5] ||= [a("span", null, "current", -1)]], 4)]),
+			a("button", {
+				type: "button",
+				class: "vc-ps__btn vc-ps__btn--ok",
+				onClick: m
+			}, " OK "),
+			a("button", {
+				type: "button",
+				class: "vc-ps__btn",
+				onClick: g
+			}, "Cancel")
+		])], 4));
+	}
+}), Ce = { class: "vc-compact__grid" }, we = { class: "vc-compact__field" }, Te = /* @__PURE__ */ s({
+	__name: "CompactPicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		presetColors: { default: () => J },
+		columns: {},
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(r, { emit: s }) {
+		let c = y(r, "modelValue"), l = r, u = F(c, s, () => l.format, () => !0), f = t(() => Array.isArray(l.presetColors[0]) ? l.presetColors.flat() : l.presetColors);
+		function m(e) {
+			u.setFromHex(e), u.input(), u.change();
+		}
+		function h(e) {
+			u.setFromHex(e), u.input();
+		}
+		return (t, s) => (p(), i("div", {
+			class: "vc-compact",
+			style: d({
+				width: r.width,
+				...r.columns == null ? {} : { "--vc-swatch-columns": r.columns }
+			})
+		}, [a("div", Ce, [(p(!0), i(e, null, g(f.value, (e) => (p(), n(Q, {
+			key: e,
+			color: e,
+			active: e.toUpperCase() === v(u).hex.value.toUpperCase(),
+			onSelect: m
+		}, null, 8, ["color", "active"]))), 128))]), a("div", we, [a("div", {
+			class: "vc-compact__preview",
+			style: d({ background: v(u).hex.value })
+		}, null, 4), o(H, {
+			label: "hex",
+			modelValue: v(u).hex.value,
+			"onUpdate:modelValue": h
+		}, null, 8, ["modelValue"])])], 4));
+	}
+}), Ee = /* @__PURE__ */ s({
+	__name: "GrayscalePicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		presetColors: { default: () => X },
+		columns: {},
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(r, { emit: a }) {
+		let o = y(r, "modelValue"), s = r, c = F(o, a, () => s.format, () => !0), l = t(() => Array.isArray(s.presetColors[0]) ? s.presetColors.flat() : s.presetColors);
+		function u(e) {
+			c.setFromHex(e), c.input(), c.change();
+		}
+		return (t, a) => (p(), i("div", {
+			class: "vc-gray",
+			style: d({
+				width: r.width,
+				...r.columns == null ? {} : { "--vc-swatch-columns": r.columns }
+			})
+		}, [(p(!0), i(e, null, g(l.value, (e) => (p(), n(Q, {
+			key: e,
+			color: e,
+			active: e.toUpperCase() === v(c).hex.value.toUpperCase(),
+			onSelect: u
+		}, null, 8, ["color", "active"]))), 128))], 4));
+	}
+}), De = { class: "vc-material__rgb" }, Oe = /* @__PURE__ */ s({
+	__name: "MaterialPicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(e, { emit: t }) {
+		let n = y(e, "modelValue"), r = e, s = F(n, t, () => r.format, () => !0);
+		function c(e) {
+			s.setFromHex(e), s.input();
+		}
+		function l(e) {
+			return Math.max(0, Math.min(255, Math.round(+e || 0)));
+		}
+		function u(e, t) {
+			s.setFromRgba({
+				...s.rgba.value,
+				[e]: l(t)
+			}), s.input();
+		}
+		return (t, n) => (p(), i("div", {
+			class: "vc-material",
+			style: d({
+				width: e.width,
+				borderTopColor: v(s).hex.value
+			})
+		}, [o(H, {
+			class: "vc-material__hex",
+			label: "hex",
+			modelValue: v(s).hex.value,
+			"onUpdate:modelValue": c
+		}, null, 8, ["modelValue"]), a("div", De, [
+			o(H, {
+				label: "r",
+				modelValue: v(s).rgba.value.r,
+				"onUpdate:modelValue": n[0] ||= (e) => u("r", e)
+			}, null, 8, ["modelValue"]),
+			o(H, {
+				label: "g",
+				modelValue: v(s).rgba.value.g,
+				"onUpdate:modelValue": n[1] ||= (e) => u("g", e)
+			}, null, 8, ["modelValue"]),
+			o(H, {
+				label: "b",
+				modelValue: v(s).rgba.value.b,
+				"onUpdate:modelValue": n[2] ||= (e) => u("b", e)
+			}, null, 8, ["modelValue"])
+		])], 4));
+	}
+}), ke = { class: "vc-twitter__swatches" }, Ae = { class: "vc-twitter__field" }, je = /* @__PURE__ */ s({
+	__name: "TwitterPicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		presetColors: { default: () => Y },
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(r, { emit: s }) {
+		let c = y(r, "modelValue"), l = r, u = F(c, s, () => l.format, () => !0), f = t(() => Array.isArray(l.presetColors[0]) ? l.presetColors.flat() : l.presetColors);
+		function m(e) {
+			u.setFromHex(e), u.input(), u.change();
+		}
+		function h(e) {
+			u.setFromHex(e), u.input();
+		}
+		return (t, s) => (p(), i("div", {
+			class: "vc-twitter",
+			style: d({ width: r.width })
+		}, [a("div", ke, [(p(!0), i(e, null, g(f.value, (e) => (p(), n(Q, {
+			key: e,
+			color: e,
+			onSelect: m
+		}, null, 8, ["color"]))), 128))]), a("div", Ae, [s[1] ||= a("span", { class: "vc-twitter__hash" }, "#", -1), o(H, {
+			label: "",
+			modelValue: v(u).hex.value.replace("#", ""),
+			"onUpdate:modelValue": s[0] ||= (e) => h("#" + e)
+		}, null, 8, ["modelValue"])])], 4));
+	}
+}), Me = {
+	key: 1,
+	class: "vc-swatches__grid"
+}, Ne = /* @__PURE__ */ s({
+	__name: "SwatchesPicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		presetColors: { default: () => Z },
+		columns: {},
+		width: { default: "var(--vc-width, 260px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(r, { emit: a }) {
+		let o = y(r, "modelValue"), s = r, c = F(o, a, () => s.format, () => !0), l = t(() => Array.isArray(s.presetColors[0])), u = t(() => l.value ? s.presetColors : []);
+		function f(e) {
+			c.setFromHex(e), c.input(), c.change();
+		}
+		function m(e) {
+			return e.toUpperCase() === c.hex.value.toUpperCase();
+		}
+		return (t, a) => (p(), i("div", {
+			class: "vc-swatches",
+			style: d({
+				width: r.width,
+				...r.columns == null ? {} : { "--vc-swatch-columns": r.columns }
+			})
+		}, [l.value ? (p(!0), i(e, { key: 0 }, g(u.value, (t, r) => (p(), i("div", {
+			key: r,
+			class: "vc-swatches__row"
+		}, [(p(!0), i(e, null, g(t, (e) => (p(), n(Q, {
+			key: e,
+			color: e,
+			active: m(e),
+			onSelect: f
+		}, null, 8, ["color", "active"]))), 128))]))), 128)) : (p(), i("div", Me, [(p(!0), i(e, null, g(r.presetColors, (e) => (p(), n(Q, {
+			key: e,
+			color: e,
+			active: m(e),
+			onSelect: f
+		}, null, 8, ["color", "active"]))), 128))]))], 4));
+	}
+}), Pe = /* @__PURE__ */ s({
+	__name: "HueSlider",
+	props: /*@__PURE__*/ c({ width: { default: "var(--vc-width, 240px)" } }, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(e, { emit: t }) {
+		let n = y(e, "modelValue"), r = e, a = t;
+		function s(e) {
+			n.value = e, a("input", e);
+		}
+		function c() {
+			a("change", n.value ?? 0);
+		}
+		return (e, t) => (p(), i("div", {
+			class: "vc-hue-slider",
+			style: d({ width: r.width })
+		}, [o(B, {
+			hue: n.value ?? 0,
+			onInput: s,
+			onChange: c
+		}, null, 8, ["hue"])], 4));
+	}
+}), Fe = { class: "vc-slider__row" }, Ie = { class: "vc-slider__row" }, Le = ["value"], Re = {
+	key: 0,
+	class: "vc-slider__row"
+}, ze = /* @__PURE__ */ s({
+	__name: "SliderPicker",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		disableAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(e, { emit: t }) {
+		let n = y(e, "modelValue"), s = e, c = F(n, t, () => s.format, () => s.disableAlpha);
+		function l(e) {
+			let t = +e.target.value;
+			c.setFromHsla({
+				...c.hsla.value,
+				l: t
+			}), c.input();
+		}
+		return (t, n) => (p(), i("div", {
+			class: "vc-slider",
+			style: d({ width: e.width })
+		}, [
+			a("div", Fe, [n[5] ||= a("span", { class: "vc-slider__label" }, "H", -1), o(B, {
+				hue: v(c).hsva.value.h,
+				onInput: n[0] ||= (e) => {
+					v(c).setHue(e), v(c).input();
+				},
+				onChange: n[1] ||= (e) => v(c).change()
+			}, null, 8, ["hue"])]),
+			a("div", Ie, [n[6] ||= a("span", { class: "vc-slider__label" }, "L", -1), a("input", {
+				class: "vc-slider__range",
+				type: "range",
+				min: "0",
+				max: "100",
+				value: v(c).hsla.value.l,
+				onInput: l,
+				onChange: n[2] ||= (e) => v(c).change()
+			}, null, 40, Le)]),
+			e.disableAlpha ? r("", !0) : (p(), i("div", Re, [n[7] ||= a("span", { class: "vc-slider__label" }, "A", -1), o(V, {
+				rgba: v(c).rgba.value,
+				onInput: n[3] ||= (e) => {
+					v(c).setAlpha(e), v(c).input();
+				},
+				onChange: n[4] ||= (e) => v(c).change()
+			}, null, 8, ["rgba"])]))
+		], 4));
+	}
+}), Be = { class: "vc-sliders__label" }, Ve = [
+	"max",
+	"step",
+	"value",
+	"onInput"
+], $ = { class: "vc-sliders__value" }, He = /* @__PURE__ */ s({
+	__name: "RGBASliders",
+	props: /*@__PURE__*/ c({
+		format: { default: "rgb" },
+		disableAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(t, { emit: n }) {
+		let r = y(t, "modelValue"), o = t, s = F(r, n, () => o.format, () => o.disableAlpha), c = [
+			{
+				key: "r",
+				max: 255,
+				step: 1
+			},
+			{
+				key: "g",
+				max: 255,
+				step: 1
+			},
+			{
+				key: "b",
+				max: 255,
+				step: 1
+			},
+			{
+				key: "a",
+				max: 1,
+				step: .01
+			}
+		];
+		function l(e) {
+			return s.rgba.value[e];
+		}
+		function u(e, t) {
+			let n = +t.target.value;
+			s.setFromRgba({
+				...s.rgba.value,
+				[e]: n
+			}), s.input();
+		}
+		return (n, r) => (p(), i("div", {
+			class: "vc-sliders",
+			style: d({ width: t.width })
+		}, [(p(), i(e, null, g(c, (e) => S(a("div", {
+			class: "vc-sliders__row",
+			key: e.key
+		}, [
+			a("span", Be, _(e.key.toUpperCase()), 1),
+			a("input", {
+				class: "vc-sliders__range",
+				type: "range",
+				min: 0,
+				max: e.max,
+				step: e.step,
+				value: l(e.key),
+				onInput: (t) => u(e.key, t),
+				onChange: r[0] ||= (e) => v(s).change()
+			}, null, 40, Ve),
+			a("span", $, _(e.key === "a" ? l(e.key).toFixed(2) : Math.round(l(e.key))), 1)
+		]), [[b, e.key !== "a" || !t.disableAlpha]])), 64))], 4));
+	}
+}), Ue = { class: "vc-sliders__label" }, We = [
+	"max",
+	"step",
+	"value",
+	"onInput"
+], Ge = { class: "vc-sliders__value" }, Ke = /* @__PURE__ */ s({
+	__name: "HSVSliders",
+	props: /*@__PURE__*/ c({
+		format: { default: "hex" },
+		disableAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(t, { emit: n }) {
+		let r = y(t, "modelValue"), o = t, s = F(r, n, () => o.format, () => o.disableAlpha), c = [
+			{
+				key: "h",
+				max: 360,
+				step: 1
+			},
+			{
+				key: "s",
+				max: 100,
+				step: 1
+			},
+			{
+				key: "v",
+				max: 100,
+				step: 1
+			},
+			{
+				key: "a",
+				max: 1,
+				step: .01
+			}
+		];
+		function l(e) {
+			return s.hsva.value[e];
+		}
+		function u(e, t) {
+			let n = +t.target.value;
+			s.setFromHsva({
+				...s.hsva.value,
+				[e]: n
+			}), s.input();
+		}
+		return (n, r) => (p(), i("div", {
+			class: "vc-sliders",
+			style: d({ width: t.width })
+		}, [(p(), i(e, null, g(c, (e) => S(a("div", {
+			class: "vc-sliders__row",
+			key: e.key
+		}, [
+			a("span", Ue, _(e.key.toUpperCase()), 1),
+			a("input", {
+				class: "vc-sliders__range",
+				type: "range",
+				min: 0,
+				max: e.max,
+				step: e.step,
+				value: l(e.key),
+				onInput: (t) => u(e.key, t),
+				onChange: r[0] ||= (e) => v(s).change()
+			}, null, 40, We),
+			a("span", Ge, _(e.key === "a" ? l(e.key).toFixed(2) : Math.round(l(e.key))), 1)
+		]), [[b, e.key !== "a" || !t.disableAlpha]])), 64))], 4));
+	}
+}), qe = { class: "vc-sliders__label" }, Je = [
+	"max",
+	"step",
+	"value",
+	"onInput"
+], Ye = { class: "vc-sliders__value" }, Xe = /* @__PURE__ */ s({
+	__name: "HSLSliders",
+	props: /*@__PURE__*/ c({
+		format: { default: "hsl" },
+		disableAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		width: { default: "var(--vc-width, 240px)" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
+	setup(t, { emit: n }) {
+		let r = y(t, "modelValue"), o = t, s = F(r, n, () => o.format, () => o.disableAlpha), c = [
+			{
+				key: "h",
+				max: 360,
+				step: 1
+			},
+			{
+				key: "s",
+				max: 100,
+				step: 1
+			},
+			{
+				key: "l",
+				max: 100,
+				step: 1
+			},
+			{
+				key: "a",
+				max: 1,
+				step: .01
+			}
+		];
+		function l(e) {
+			return s.hsla.value[e];
+		}
+		function u(e, t) {
+			let n = +t.target.value;
+			s.setFromHsla({
+				...s.hsla.value,
+				[e]: n
+			}), s.input();
+		}
+		return (n, r) => (p(), i("div", {
+			class: "vc-sliders",
+			style: d({ width: t.width })
+		}, [(p(), i(e, null, g(c, (e) => S(a("div", {
+			class: "vc-sliders__row",
+			key: e.key
+		}, [
+			a("span", qe, _(e.key.toUpperCase()), 1),
+			a("input", {
+				class: "vc-sliders__range",
+				type: "range",
+				min: 0,
+				max: e.max,
+				step: e.step,
+				value: l(e.key),
+				onInput: (t) => u(e.key, t),
+				onChange: r[0] ||= (e) => v(s).change()
+			}, null, 40, Je),
+			a("span", Ye, _(e.key === "a" ? l(e.key).toFixed(2) : Math.round(l(e.key))), 1)
+		]), [[b, e.key !== "a" || !t.disableAlpha]])), 64))], 4));
+	}
+});
+//#endregion
+//#region src/composables/useColorHistory.ts
+function Ze(e = 8) {
+	let t = h([]);
+	function n(n) {
+		let r = n.toUpperCase();
+		t.value = [r, ...t.value.filter((e) => e !== r)].slice(0, e);
+	}
+	function r() {
+		t.value = [];
+	}
+	return {
+		history: m(t),
+		add: n,
+		clear: r
+	};
+}
+//#endregion
+export { V as Alpha, J as COMPACT_PRESETS, ue as ChromePicker, Te as CompactPicker, q as DEFAULT_PRESETS, H as EditableInput, X as GRAYSCALE_PRESETS, Ee as GrayscalePicker, Xe as HSLSliders, Ke as HSVSliders, B as Hue, Pe as HueSlider, Z as MATERIAL_GRID, de as MATERIAL_PRESETS, Oe as MaterialPicker, Se as PhotoshopPicker, He as RGBASliders, z as Saturation, _e as SketchPicker, ze as SliderPicker, Q as Swatch, Ne as SwatchesPicker, Y as TWITTER_PRESETS, je as TwitterPicker, j as hexToRgb, k as hslToRgb, E as hsvToRgb, A as rgbToHex, O as rgbToHsl, D as rgbToHsv, M as useColor, Ze as useColorHistory, R as useDrag, I as useEyeDropper };