@shtabapp/ui-kit 1.33.0 → 1.35.0

package/dist/SColorPicker-BnfGvKy4.js

@@ -0,0 +1,642 @@
+import { n as e } from "./contrastSurfaceTextColor-BDlLSSXC.js";
+import { n as t, o as n, r, t as i } from "./SColorPalette-D2WCADDX.js";
+import { a, n as o } from "./colorValue-CSh0chxp.js";
+import { n as s, r as c, t as l } from "./SButton.types-CpdHQtyx.js";
+import { t as u } from "./SButton-DnU_XZ1C.js";
+import { i as d } from "./useFloatingOverlay-QcumEYEq.js";
+import { t as f } from "./SDropdown-CTQ5Qlez.js";
+import { r as p, t as m } from "./SSelect-XSZjYLBA.js";
+import { Fragment as h, computed as g, createBlock as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onMounted as O, openBlock as k, ref as A, shallowRef as j, toDisplayString as M, toRef as N, unref as P, useModel as F, useTemplateRef as I, vModelText as L, watch as R, withCtx as z, withDirectives as B } from "vue";
+import { ESColorSwatchSize as V, SColorSwatch as ee, useUiKitI18n as H } from "@shtabapp/ui-kit-primitives";
+import { useEventListener as U } from "@vueuse/core";
+//#region src/utils/color/colorFormatChannels.ts
+var W = (e) => Math.max(0, Math.min(255, Math.round(e))), te = (e) => {
+	let t = e % 360;
+	return t < 0 ? t + 360 : t;
+}, G = (e) => Math.max(0, Math.min(100, Math.round(e))), ne = (e) => {
+	let t = e.slice(1);
+	if (t.length === 3) {
+		let e = t[0], n = t[1], r = t[2];
+		return !e || !n || !r ? void 0 : `${e}${e}${n}${n}${r}${r}`;
+	}
+	if (t.length === 6 || t.length === 8) return t.slice(0, 6);
+}, K = (e) => {
+	let t = ne(e);
+	if (!t) return;
+	let n = Number.parseInt(t.slice(0, 2), 16), r = Number.parseInt(t.slice(2, 4), 16), i = Number.parseInt(t.slice(4, 6), 16);
+	if (!(Number.isNaN(n) || Number.isNaN(r) || Number.isNaN(i))) return {
+		first: n,
+		second: r,
+		third: i
+	};
+}, q = (e) => {
+	let t = W(e.first), n = W(e.second), r = W(e.third);
+	return `#${t.toString(16).padStart(2, "0").toUpperCase()}${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}`;
+}, J = (e) => {
+	let t = K(e);
+	if (!t) return;
+	let n = t.first / 255, r = t.second / 255, i = t.third / 255, a = Math.max(n, r, i), o = Math.min(n, r, i), s = a - o, c = 0, l = (a + o) / 2;
+	s !== 0 && (c = a === n ? ((r - i) / s + (r < i ? 6 : 0)) * 60 : a === r ? ((i - n) / s + 2) * 60 : ((n - r) / s + 4) * 60);
+	let u = 0;
+	return s !== 0 && (u = l > .5 ? s / (2 - a - o) : s / (a + o)), {
+		first: Math.round(c),
+		second: Math.round(u * 100),
+		third: Math.round(l * 100)
+	};
+}, re = (e) => {
+	let t = te(e.first), n = G(e.second) / 100, r = G(e.third) / 100, i = (e) => {
+		let i = (t + e) / 30;
+		return W((r - n * Math.min(r, 1 - r) * Math.max(-1, Math.min(i % 2 - 1, 1))) * 255);
+	};
+	return q({
+		first: i(0),
+		second: i(8),
+		third: i(4)
+	});
+}, ie = (t) => {
+	let n = t.toUpperCase(), r = n.startsWith("#") ? n.slice(1) : n;
+	if (!/^[0-9A-F]{3}$/.test(r) && !/^[0-9A-F]{6}$/.test(r)) return;
+	let i = `#${r}`;
+	if (e(i)) return q(K(i) ?? {
+		first: 0,
+		second: 0,
+		third: 0
+	});
+}, ae = (e) => e.slice(1).toUpperCase(), oe = (e) => {
+	let t = e.first / 255, n = e.second / 255, r = e.third / 255, i = Math.max(t, n, r), a = i - Math.min(t, n, r), o = 0;
+	a !== 0 && (o = i === t ? (n - r) / a % 6 : i === n ? (r - t) / a + 2 : (t - n) / a + 4, o = Math.round(o * 60), o < 0 && (o += 360));
+	let s = i === 0 ? 0 : a / i;
+	return {
+		hue: o,
+		saturation: s,
+		value: i
+	};
+}, se = (e) => {
+	let t = e.value * e.saturation, n = e.hue / 60, r = t * (1 - Math.abs(n % 2 - 1)), i = e.value - t, a = 0, o = 0, s = 0;
+	return n >= 0 && n < 1 ? (a = t, o = r) : n >= 1 && n < 2 ? (a = r, o = t) : n >= 2 && n < 3 ? (o = t, s = r) : n >= 3 && n < 4 ? (o = r, s = t) : n >= 4 && n < 5 ? (a = r, s = t) : (a = t, s = r), {
+		first: W((a + i) * 255),
+		second: W((o + i) * 255),
+		third: W((s + i) * 255)
+	};
+}, Y = (e) => {
+	let t = K(e);
+	if (t) return oe(t);
+}, X = (e) => q(se(e)), Z = [
+	n.HEX,
+	n.RGB,
+	n.HSL
+], ce = {
+	[n.HEX]: "Hex",
+	[n.RGB]: "RGB",
+	[n.HSL]: "HSL"
+}, le = (e) => {
+	let t = getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+	if (!t) return;
+	let n = Number.parseInt(t[1] ?? "0", 10), r = Number.parseInt(t[2] ?? "0", 10), i = Number.parseInt(t[3] ?? "0", 10);
+	return `#${n.toString(16).padStart(2, "0").toUpperCase()}${r.toString(16).padStart(2, "0").toUpperCase()}${i.toString(16).padStart(2, "0").toUpperCase()}`;
+}, ue = (t, n) => {
+	if (o(t) && e(t)) return t;
+	if (n) return le(n);
+}, de = (e, t) => t === n.HEX ? ae(e) : t === n.RGB ? K(e) ?? {
+	first: 0,
+	second: 0,
+	third: 0
+} : J(e) ?? {
+	first: 0,
+	second: 0,
+	third: 0
+}, Q = (e) => {
+	let t = Number.parseInt(e, 10);
+	if (!Number.isNaN(t)) return t;
+}, fe = (e, t) => {
+	if (e === n.HEX) return typeof t == "string" ? ie(t) : void 0;
+	if (typeof t == "string") return;
+	if (e === n.RGB) {
+		let e = q({
+			first: Q(String(t.first)) ?? 0,
+			second: Q(String(t.second)) ?? 0,
+			third: Q(String(t.third)) ?? 0
+		});
+		return K(e) ? e : void 0;
+	}
+	let r = re({
+		first: Q(String(t.first)) ?? 0,
+		second: Q(String(t.second)) ?? 0,
+		third: Q(String(t.third)) ?? 0
+	});
+	if (r && J(r)) return r;
+}, pe = 17, me = "#000000", he = (e) => e ?? me, ge = ({ modelValue: e, getEditableHex: t, saturationAreaRef: n, hueSliderRef: r, disabled: i, readonly: a }) => {
+	let o = Y(he(t())) ?? {
+		hue: 0,
+		saturation: 0,
+		value: 0
+	}, s = A(o.hue), c = A(o.saturation), l = A(o.value), u = A(!1), d = A(!1), f = A(!1), p = j(null), m = j(null), h = g(() => X({
+		hue: s.value,
+		saturation: c.value,
+		value: l.value
+	})), _ = g(() => X({
+		hue: s.value,
+		saturation: 1,
+		value: 1
+	})), v = (e) => {
+		s.value = Math.max(0, Math.min(360, e));
+	}, y = (e, t) => {
+		c.value = Math.max(0, Math.min(1, e)), l.value = Math.max(0, Math.min(1, t));
+	}, b = (e) => {
+		let t = Y(he(e));
+		t && (u.value = !0, t.saturation > 0 && (s.value = t.hue), c.value = t.saturation, l.value = t.value, u.value = !1);
+	}, x = () => {
+		let e = t();
+		e && e.toUpperCase() !== h.value.toUpperCase() && b(e);
+	}, S = () => {
+		let n = h.value;
+		t()?.toUpperCase() !== n.toUpperCase() && (u.value = !0, e.value = n, u.value = !1);
+	};
+	R([
+		s,
+		c,
+		l
+	], () => {
+		u.value || S();
+	}), R(e, () => {
+		u.value || x();
+	}), O(() => {
+		T(() => {
+			C(), w(), x();
+		});
+	});
+	let C = () => {
+		p.value = n.value?.getBoundingClientRect() ?? null;
+	}, w = () => {
+		m.value = r.value?.getBoundingClientRect() ?? null;
+	}, E = g(() => {
+		let e = p.value;
+		return e ? { transform: `translate3d(calc(${c.value * e.width}px - 50%), calc(${(1 - l.value) * e.height}px - 50%), 0)` } : {};
+	}), D = g(() => {
+		let e = m.value;
+		return e ? { transform: `translate3d(-50%, calc(${s.value / 360 * e.height}px - 50%), 0)` } : {};
+	}), k = () => !i.value && !a.value, M = (e) => {
+		let t = p.value;
+		if (!t) return;
+		let n = Math.max(0, Math.min(e.clientX - t.left, t.width)), r = Math.max(0, Math.min(e.clientY - t.top, t.height));
+		y(n / t.width, 1 - r / t.height);
+	}, N = (e) => {
+		let t = m.value;
+		t && v(Math.max(0, Math.min(e.clientY - t.top, t.height)) / t.height * 360);
+	}, P = (e) => {
+		k() && (C(), d.value = !0, M(e), e.currentTarget instanceof HTMLElement && e.currentTarget.setPointerCapture(e.pointerId));
+	}, F = (e) => {
+		k() && (w(), f.value = !0, N(e), e.currentTarget instanceof HTMLElement && e.currentTarget.setPointerCapture(e.pointerId));
+	}, I = () => {
+		d.value = !1;
+	}, L = () => {
+		f.value = !1;
+	};
+	return U(n, "pointermove", (e) => {
+		d.value && M(e);
+	}), U(n, "pointerup", I), U(n, "pointercancel", I), U(n, "lostpointercapture", I), U(r, "pointermove", (e) => {
+		f.value && N(e);
+	}), U(r, "pointerup", L), U(r, "pointercancel", L), U(r, "lostpointercapture", L), {
+		hexColor: h,
+		hueBackground: _,
+		saturationPointerStyle: E,
+		huePointerStyle: D,
+		handleSaturationPointerDown: P,
+		handleHuePointerDown: F,
+		syncFromModelValue: x
+	};
+}, _e = (e) => {
+	if (!e) return null;
+	let t = e.$el;
+	if (!(t instanceof HTMLElement)) return null;
+	let n = t.querySelector(".s-ui-color-swatch__fill");
+	return n instanceof HTMLElement ? n : null;
+}, ve = { class: "s-ui-color-area__canvas-row" }, ye = ["aria-label"], be = ["aria-label", "aria-disabled"], xe = /* @__PURE__ */ S({
+	__name: "SColorArea",
+	props: /*@__PURE__*/ C({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let t = F(e, "modelValue"), { t: n } = H(), r = I("colorResolutionSwatchRef"), i = I("saturationAreaRef"), o = I("hueSliderRef"), s = () => ue(t.value, _e(r.value)), c = g(() => a(t.value)), { hexColor: l, hueBackground: u, saturationPointerStyle: d, huePointerStyle: f, handleSaturationPointerDown: p, handleHuePointerDown: m } = ge({
+			modelValue: t,
+			getEditableHex: s,
+			saturationAreaRef: i,
+			hueSliderRef: o,
+			disabled: N(() => e.disabled),
+			readonly: N(() => e.readonly)
+		});
+		return (t, a) => (k(), v("div", w({ class: ["s-ui-color-area", {
+			"s-ui-color-area--disabled": e.disabled,
+			"s-ui-color-area--readonly": e.readonly
+		}] }, t.$attrs), [x(P(ee), {
+			ref_key: "colorResolutionSwatchRef",
+			ref: r,
+			class: "s-ui-color-area__color-resolution",
+			color: c.value,
+			size: P(V).SIZE_24,
+			tabindex: "-1",
+			"aria-hidden": "true"
+		}, null, 8, ["color", "size"]), y("div", ve, [y("div", {
+			ref_key: "saturationAreaRef",
+			ref: i,
+			class: "s-ui-color-area__canvas",
+			role: "img",
+			"aria-label": P(n)("colorArea.saturationBrightness"),
+			style: D({ "--s-ui-color-area-hue": P(u) }),
+			onPointerdown: a[0] ||= (...e) => P(p) && P(p)(...e)
+		}, [y("div", {
+			class: "s-ui-color-area__canvas-pointer",
+			style: D({
+				...P(d),
+				backgroundColor: P(l)
+			})
+		}, null, 4)], 44, ye), y("div", {
+			ref_key: "hueSliderRef",
+			ref: o,
+			class: "s-ui-color-area__hue",
+			role: "slider",
+			"aria-label": P(n)("colorArea.hue"),
+			"aria-valuemin": "0",
+			"aria-valuemax": "360",
+			"aria-disabled": e.disabled || e.readonly,
+			onPointerdown: a[1] ||= (...e) => P(m) && P(m)(...e)
+		}, [y("div", {
+			class: "s-ui-color-area__hue-pointer",
+			style: D({
+				...P(f),
+				backgroundColor: P(u)
+			})
+		}, null, 4)], 40, be)])], 16));
+	}
+}), Se = { class: "s-ui-color-values__left" }, Ce = { class: "s-ui-color-values__format" }, we = { class: "s-ui-color-values__value-group" }, Te = { class: "s-ui-color-values__inputs" }, Ee = {
+	key: 0,
+	class: "s-ui-color-values__input-wrap"
+}, De = [
+	"disabled",
+	"readonly",
+	"aria-label"
+], Oe = { class: "s-ui-color-values__input-wrap" }, ke = [
+	"disabled",
+	"readonly",
+	"aria-label"
+], Ae = { class: "s-ui-color-values__input-wrap" }, je = [
+	"disabled",
+	"readonly",
+	"aria-label"
+], Me = { class: "s-ui-color-values__input-wrap" }, Ne = [
+	"disabled",
+	"readonly",
+	"aria-label"
+], $ = /* @__PURE__ */ S({
+	__name: "SColorValues",
+	props: /*@__PURE__*/ C({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		formats: { default: () => Z }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {},
+		format: { default: n.HEX },
+		formatModifiers: {}
+	}),
+	emits: /*@__PURE__*/ C(["formatDropdownOpen", "formatDropdownClose"], ["update:modelValue", "update:format"]),
+	setup(e, { emit: t }) {
+		let { t: r } = H(), i = F(e, "modelValue"), o = F(e, "format"), d = t, f = I("previewSwatchRef"), p = A(""), _ = A("0"), b = A("0"), S = A("0"), C = g(() => (e.formats.length > 0 ? e.formats : Z).map((e) => ({
+			value: e,
+			label: ce[e]
+		}))), E = g(() => a(i.value)), D = g(() => ue(i.value, _e(f.value))), j = g(() => o.value === n.RGB ? r("colorValues.redChannel") : r("colorValues.hueChannel")), M = g(() => o.value === n.RGB ? r("colorValues.greenChannel") : r("colorValues.saturationChannel")), N = g(() => o.value === n.RGB ? r("colorValues.blueChannel") : r("colorValues.lightnessChannel")), z = () => {
+			let e = D.value;
+			if (!e) return;
+			let t = de(e, o.value);
+			if (o.value === n.HEX && typeof t == "string") {
+				p.value = t;
+				return;
+			}
+			typeof t == "object" && (_.value = String(t.first), b.value = String(t.second), S.value = String(t.third));
+		};
+		R([
+			i,
+			o,
+			D
+		], () => {
+			z();
+		}), O(() => {
+			T(() => {
+				z();
+			});
+		});
+		let U = () => {
+			if (e.disabled || e.readonly) return;
+			if (o.value === n.HEX) {
+				let e = fe(n.HEX, p.value);
+				e && (i.value = e), z();
+				return;
+			}
+			let t = fe(o.value, {
+				first: Number.parseInt(_.value, 10),
+				second: Number.parseInt(b.value, 10),
+				third: Number.parseInt(S.value, 10)
+			});
+			t && (i.value = t), z();
+		}, W = (e) => {
+			e.key === "Enter" && (e.preventDefault(), U());
+		};
+		return (t, i) => (k(), v("div", w({ class: ["s-ui-color-values", {
+			"s-ui-color-values--disabled": e.disabled,
+			"s-ui-color-values--readonly": e.readonly
+		}] }, t.$attrs), [y("div", Se, [x(P(ee), {
+			ref_key: "previewSwatchRef",
+			ref: f,
+			class: "s-ui-color-values__preview",
+			color: E.value,
+			size: P(V).SIZE_32,
+			disabled: e.disabled,
+			tabindex: "-1",
+			"aria-hidden": "true"
+		}, null, 8, [
+			"color",
+			"size",
+			"disabled"
+		]), y("div", Ce, [x(P(m), {
+			modelValue: o.value,
+			"onUpdate:modelValue": i[0] ||= (e) => o.value = e,
+			class: "s-ui-color-values__format-select",
+			options: C.value,
+			disabled: e.disabled,
+			readonly: e.readonly,
+			bordered: !0,
+			clearable: !1,
+			"close-on-select": !0,
+			"fit-viewport": !1,
+			"aria-label": P(r)("colorValues.format"),
+			onOpen: i[1] ||= (e) => d("formatDropdownOpen"),
+			onClose: i[2] ||= (e) => d("formatDropdownClose")
+		}, null, 8, [
+			"modelValue",
+			"options",
+			"disabled",
+			"readonly",
+			"aria-label"
+		])])]), y("div", we, [
+			x(P(u), {
+				class: "s-ui-color-values__pipette",
+				appearance: P(l).BARE,
+				variant: P(c).NEUTRAL,
+				size: P(s).SMALL,
+				icon: "pipette",
+				"aria-label": P(r)("colorValues.pickColor"),
+				"aria-disabled": "true",
+				disabled: e.disabled,
+				tabindex: "-1"
+			}, null, 8, [
+				"appearance",
+				"variant",
+				"size",
+				"aria-label",
+				"disabled"
+			]),
+			i[9] ||= y("span", {
+				class: "s-ui-color-values__separator",
+				"aria-hidden": "true"
+			}, null, -1),
+			y("div", Te, [o.value === P(n).HEX ? (k(), v("div", Ee, [B(y("input", {
+				"onUpdate:modelValue": i[3] ||= (e) => p.value = e,
+				class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+				type: "text",
+				inputmode: "text",
+				spellcheck: "false",
+				disabled: e.disabled,
+				readonly: e.readonly,
+				"aria-label": P(r)("colorValues.hexValue"),
+				onBlur: U,
+				onKeydown: W
+			}, null, 40, De), [[L, p.value]])])) : (k(), v(h, { key: 1 }, [
+				y("div", Oe, [B(y("input", {
+					"onUpdate:modelValue": i[4] ||= (e) => _.value = e,
+					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+					type: "text",
+					inputmode: "numeric",
+					spellcheck: "false",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					"aria-label": j.value,
+					onBlur: U,
+					onKeydown: W
+				}, null, 40, ke), [[L, _.value]])]),
+				i[7] ||= y("span", {
+					class: "s-ui-color-values__separator",
+					"aria-hidden": "true"
+				}, null, -1),
+				y("div", Ae, [B(y("input", {
+					"onUpdate:modelValue": i[5] ||= (e) => b.value = e,
+					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+					type: "text",
+					inputmode: "numeric",
+					spellcheck: "false",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					"aria-label": M.value,
+					onBlur: U,
+					onKeydown: W
+				}, null, 40, je), [[L, b.value]])]),
+				i[8] ||= y("span", {
+					class: "s-ui-color-values__separator",
+					"aria-hidden": "true"
+				}, null, -1),
+				y("div", Me, [B(y("input", {
+					"onUpdate:modelValue": i[6] ||= (e) => S.value = e,
+					class: "s-ui-color-values__input s-ui-typography-body-14-regular",
+					type: "text",
+					inputmode: "numeric",
+					spellcheck: "false",
+					disabled: e.disabled,
+					readonly: e.readonly,
+					"aria-label": N.value,
+					onBlur: U,
+					onKeydown: W
+				}, null, 40, Ne), [[L, S.value]])])
+			], 64))])
+		])], 16));
+	}
+}), Pe = { class: "s-ui-color-picker__section" }, Fe = { class: "s-ui-color-picker__label" }, Ie = { class: "s-ui-color-picker__section" }, Le = { class: "s-ui-color-picker__label" }, Re = { class: "s-ui-color-picker__custom-editor" }, ze = { class: "s-ui-color-picker__custom-actions" }, Be = /* @__PURE__ */ S({
+	__name: "SColorPicker",
+	props: /*@__PURE__*/ C({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		recommendedColors: {},
+		recentColors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ C([
+		"select",
+		"customEditorOpen",
+		"customEditorClose",
+		"formatDropdownOpen",
+		"formatDropdownClose"
+	], ["update:modelValue"]),
+	setup(e, { emit: a }) {
+		let o = F(e, "modelValue"), m = a, { t: h } = H(), v = A(!1), S = A("#526DE3"), C = A(n.HEX), T = g(() => e.recommendedColors && e.recommendedColors.length > 0 ? e.recommendedColors : r), D = g(() => e.recentColors.length <= 17 ? e.recentColors : e.recentColors.slice(0, 17)), O = () => {
+			if (o.value) {
+				S.value = o.value;
+				return;
+			}
+			S.value = "#526DE3";
+		}, j = (e) => {
+			m("select", e);
+		}, N = () => {
+			o.value = S.value, m("select", S.value), v.value = !1;
+		}, I = () => {
+			v.value = !1;
+		};
+		return R(v, (e, t) => {
+			if (e && !t) {
+				O(), m("customEditorOpen");
+				return;
+			}
+			!e && t && m("customEditorClose");
+		}), (n, r) => (k(), _(P(p), w({ width: 336 }, n.$attrs), {
+			default: z(() => [y("div", { class: E(["s-ui-color-picker", { "s-ui-color-picker--disabled": e.disabled }]) }, [y("section", Pe, [y("span", Fe, M(P(h)("colorPicker.recommendedColors")), 1), x(P(i), {
+				modelValue: o.value,
+				"onUpdate:modelValue": r[0] ||= (e) => o.value = e,
+				class: "s-ui-color-picker__palette",
+				layout: P(t).GRID,
+				colors: T.value,
+				size: P(V).SIZE_32,
+				disabled: e.disabled,
+				onSelect: j
+			}, null, 8, [
+				"modelValue",
+				"layout",
+				"colors",
+				"size",
+				"disabled"
+			])]), y("section", Ie, [y("span", Le, M(P(h)("colorPicker.recentColors")), 1), x(P(i), {
+				modelValue: o.value,
+				"onUpdate:modelValue": r[7] ||= (e) => o.value = e,
+				class: "s-ui-color-picker__palette",
+				layout: P(t).ROW,
+				colors: D.value,
+				size: P(V).SIZE_32,
+				disabled: e.disabled,
+				onSelect: j
+			}, {
+				append: z(() => [x(P(f), {
+					modelValue: v.value,
+					"onUpdate:modelValue": r[6] ||= (e) => v.value = e,
+					placement: P(d).RIGHT_START,
+					offset: 8,
+					shift: !0,
+					flip: !0,
+					disabled: e.disabled,
+					"dismiss-on-click-outside": !0,
+					"dismiss-on-escape": !0
+				}, {
+					trigger: z(({ toggle: t, triggerProps: n }) => [x(P(u), w(n, {
+						class: "s-ui-color-picker__add-button",
+						appearance: P(l).OUTLINED,
+						variant: P(c).NEUTRAL,
+						size: P(s).SMALL,
+						icon: "plus",
+						"aria-label": P(h)("colorPicker.addCustomColor"),
+						disabled: e.disabled,
+						onClick: t
+					}), null, 16, [
+						"appearance",
+						"variant",
+						"size",
+						"aria-label",
+						"disabled",
+						"onClick"
+					])]),
+					content: z(() => [x(P(p), { width: 320 }, {
+						footer: z(() => [y("div", ze, [x(P(u), {
+							class: "s-ui-color-picker__save-button",
+							appearance: P(l).MAJOR,
+							variant: P(c).MAIN,
+							size: P(s).SMALL,
+							disabled: e.disabled,
+							onClick: N
+						}, {
+							default: z(() => [b(M(P(h)("colorPicker.save")), 1)]),
+							_: 1
+						}, 8, [
+							"appearance",
+							"variant",
+							"size",
+							"disabled"
+						]), x(P(u), {
+							class: "s-ui-color-picker__cancel-button",
+							appearance: P(l).MINOR,
+							variant: P(c).NEUTRAL,
+							size: P(s).SMALL,
+							disabled: e.disabled,
+							onClick: I
+						}, {
+							default: z(() => [b(M(P(h)("colorPicker.cancel")), 1)]),
+							_: 1
+						}, 8, [
+							"appearance",
+							"variant",
+							"size",
+							"disabled"
+						])])]),
+						default: z(() => [y("div", Re, [x(xe, {
+							modelValue: S.value,
+							"onUpdate:modelValue": r[1] ||= (e) => S.value = e,
+							disabled: e.disabled
+						}, null, 8, ["modelValue", "disabled"]), x($, {
+							modelValue: S.value,
+							"onUpdate:modelValue": r[2] ||= (e) => S.value = e,
+							format: C.value,
+							"onUpdate:format": r[3] ||= (e) => C.value = e,
+							disabled: e.disabled,
+							onFormatDropdownOpen: r[4] ||= (e) => m("formatDropdownOpen"),
+							onFormatDropdownClose: r[5] ||= (e) => m("formatDropdownClose")
+						}, null, 8, [
+							"modelValue",
+							"format",
+							"disabled"
+						])])]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, [
+					"modelValue",
+					"placement",
+					"disabled"
+				])]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"layout",
+				"colors",
+				"size",
+				"disabled"
+			])])], 2)]),
+			_: 1
+		}, 16));
+	}
+});
+//#endregion
+export { pe as i, $ as n, xe as r, Be as t };