haze-ui 1.33.0 → 1.34.0

package/dist/components/ColorPicker/ColorPickerPanel.js

@@ -2,134 +2,171 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import { cssColor as n, formatColor as r, hsvToRgb as i, parseColor as a, rgbHexKey as o, rgbToHsv as s } from "./color-math.js";
-import { checkerboard as c, hueTrack as l, panelContent as u, svArea as d, svThumb as f, swatchBtn as p, swatchFill as m, swatchRow as h, track as g, trackThumb as _, valueInput as v } from "./color-picker-styles.js";
-import { useRef as y, useState as b } from "react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { gradientFromColor as ee, parseGradient as c, serializeGradient as l } from "./gradient.js";
+import { checkerboard as u, gradientSwatch as te, hueTrack as ne, panelContent as re, svArea as ie, svThumb as ae, swatchBtn as oe, swatchFill as se, swatchRow as ce, track as le, trackThumb as ue, valueInput as de } from "./color-picker-styles.js";
+import { c as d } from "react/compiler-runtime";
+import { Fragment as fe, useId as pe, useRef as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/lib/components/ColorPicker/ColorPickerPanel.tsx
-var w = {
+var _ = {
 	r: 0,
 	g: 0,
 	b: 0
 };
-function T(e) {
+function v(e) {
 	return Math.min(Math.max(e, 0), 1);
 }
-function E(e) {
+function y(e) {
 	let t = e.getBoundingClientRect();
 	return t.width > 0 && t.height > 0 ? t : null;
 }
-function D(e, t, n) {
-	let r = y(null);
-	return {
+function b(e, t, n) {
+	let r = d(4), i = f(null), a;
+	return r[0] !== t || r[1] !== n || r[2] !== e ? (a = {
 		onPointerDown(n) {
 			if (n.button !== 0) return;
-			let i = e(n);
-			if (i !== null) {
-				if (n.preventDefault(), r.current = n.pointerId, typeof n.currentTarget.setPointerCapture == "function") try {
+			let r = e(n);
+			if (r !== null) {
+				if (n.preventDefault(), i.current = n.pointerId, typeof n.currentTarget.setPointerCapture == "function") try {
 					n.currentTarget.setPointerCapture(n.pointerId);
 				} catch {}
-				t(i);
+				t(r);
 			}
 		},
 		onPointerMove(n) {
-			if (r.current !== n.pointerId) return;
-			let i = e(n);
-			i !== null && t(i);
+			if (i.current !== n.pointerId) return;
+			let r = e(n);
+			r !== null && t(r);
 		},
 		onPointerUp(t) {
-			if (r.current !== t.pointerId) return;
-			r.current = null;
-			let i = e(t);
-			i !== null && n(i);
+			if (i.current !== t.pointerId) return;
+			i.current = null;
+			let r = e(t);
+			r !== null && n(r);
 		},
 		onPointerCancel(e) {
-			r.current === e.pointerId && (r.current = null);
+			i.current === e.pointerId && (i.current = null);
 		}
-	};
+	}, r[0] = t, r[1] = n, r[2] = e, r[3] = a) : a = r[3], a;
+}
+function x(e) {
+	let t = y(e.currentTarget);
+	return t ? v((e.clientX - t.left) / t.width) : null;
+}
+function S(e) {
+	return String(Math.round(e * 100) / 100);
 }
-function O(e) {
-	let t = E(e.currentTarget);
-	return t ? T((e.clientX - t.left) / t.width) : null;
+function me(e, t) {
+	let n = a(e)?.rgb ?? _, i = a(t)?.rgb ?? _;
+	return r({
+		r: Math.round((n.r + i.r) / 2),
+		g: Math.round((n.g + i.g) / 2),
+		b: Math.round((n.b + i.b) / 2),
+		a: ((n.a ?? 1) + (i.a ?? 1)) / 2
+	}, "hex", !0);
 }
-function k({ value: y, onChange: k, onCommit: A, format: j = "hex", allowAlpha: M = !1, presets: N, recentColors: P, className: F }) {
-	let I = t("colorPicker"), L = a(y)?.rgb ?? w, R = M ? L.a ?? 1 : 1, z = s(L), B = o({
+function C({ value: d, onChange: f, onCommit: C, format: w = "hex", allowAlpha: T = !1, presets: E, recentColors: D, gradient: O = !1, className: he }) {
+	let k = t("colorPicker"), A = pe(), j = O ? c(d) : null, M = j !== null, [N, P] = p(0), F = M ? Math.min(N, j.stops.length - 1) : 0, I = j?.stops ?? [], L = M ? a(I[F]?.color ?? "")?.rgb ?? _ : a(d)?.rgb ?? _, R = T ? L.a ?? 1 : 1, z = s(L), ge = o({
 		...L,
 		a: R
-	}), V = (e, t) => {
+	}), B = j ? l(j) : null, V = (e, t) => {
+		let n = l(e);
+		f(n), t && C?.(n);
+	}, H = (e, t) => {
 		let n = r({
 			...e,
-			a: M ? e.a : void 0
-		}, j, M);
-		k(n), t && A?.(n);
-	}, H = (e, t) => {
-		V({
+			a: T ? e.a : void 0
+		}, w, T);
+		f(n), t && C?.(n);
+	}, U = (e, t) => {
+		if (j) {
+			V({
+				angle: j.angle,
+				stops: j.stops.map((t, n) => n === F ? {
+					...t,
+					color: r({
+						...e,
+						a: T ? e.a : void 0
+					}, "hex", !0)
+				} : t)
+			}, t);
+			return;
+		}
+		H(e, t);
+	}, W = (e) => {
+		e === "gradient" && !M ? (V(ee({
+			...L,
+			a: R
+		}), !0), P(0)) : e === "solid" && M && H(a(I[0]?.color ?? "")?.rgb ?? _, !0);
+	}, G = (e, t) => {
+		U({
 			...i(e),
 			a: R
 		}, t);
-	}, U = (e, t) => {
-		V({
+	}, K = (e, t) => {
+		U({
 			...L,
 			a: e
 		}, t);
-	}, W = D((e) => {
-		let t = E(e.currentTarget);
+	}, _e = b((e) => {
+		let t = y(e.currentTarget);
 		return t ? {
 			h: z.h,
-			s: T((e.clientX - t.left) / t.width),
-			v: 1 - T((e.clientY - t.top) / t.height)
+			s: v((e.clientX - t.left) / t.width),
+			v: 1 - v((e.clientY - t.top) / t.height)
 		} : null;
-	}, (e) => H(e, !1), (e) => H(e, !0)), G = D((e) => {
-		let t = O(e);
+	}, (e) => G(e, !1), (e) => G(e, !0)), ve = b((e) => {
+		let t = x(e);
 		return t === null ? null : t * 360;
-	}, (e) => H({
+	}, (e) => G({
 		...z,
 		h: e
-	}, !1), (e) => H({
+	}, !1), (e) => G({
 		...z,
 		h: e
-	}, !0)), K = D((e) => O(e), (e) => U(e, !1), (e) => U(e, !0)), q = (e) => {
+	}, !0)), ye = b((e) => x(e), (e) => K(e, !1), (e) => K(e, !0)), be = (e) => {
 		let t = (e.shiftKey ? 10 : 1) / 100;
 		switch (e.key) {
 			case "ArrowLeft":
-				H({
+				G({
 					...z,
-					s: T(z.s - t)
+					s: v(z.s - t)
 				}, !0);
 				break;
 			case "ArrowRight":
-				H({
+				G({
 					...z,
-					s: T(z.s + t)
+					s: v(z.s + t)
 				}, !0);
 				break;
 			case "ArrowDown":
-				H({
+				G({
 					...z,
-					v: T(z.v - t)
+					v: v(z.v - t)
 				}, !0);
 				break;
 			case "ArrowUp":
-				H({
+				G({
 					...z,
-					v: T(z.v + t)
+					v: v(z.v + t)
 				}, !0);
 				break;
 			default: return;
 		}
 		e.preventDefault();
-	}, J = (e) => {
+	}, xe = (e) => {
 		let t = e.shiftKey ? 10 : 1;
 		switch (e.key) {
 			case "ArrowLeft":
 			case "ArrowDown":
-				H({
+				G({
 					...z,
 					h: ((z.h - t) % 360 + 360) % 360
 				}, !0);
 				break;
 			case "ArrowRight":
 			case "ArrowUp":
-				H({
+				G({
 					...z,
 					h: (z.h + t) % 360
 				}, !0);
@@ -137,141 +174,307 @@ function k({ value: y, onChange: k, onCommit: A, format: j = "hex", allowAlpha:
 			default: return;
 		}
 		e.preventDefault();
-	}, Y = (e) => {
+	}, Se = (e) => {
 		let t = (e.shiftKey ? 10 : 1) / 100;
 		switch (e.key) {
 			case "ArrowLeft":
 			case "ArrowDown":
-				U(T(R - t), !0);
+				K(v(R - t), !0);
 				break;
 			case "ArrowRight":
 			case "ArrowUp":
-				U(T(R + t), !0);
+				K(v(R + t), !0);
 				break;
 			default: return;
 		}
 		e.preventDefault();
-	}, [X, Z] = b(null), ee = X ?? r({
+	}, [q, J] = p(null), Ce = q ?? r({
 		...L,
 		a: R
-	}, j, M), Q = () => {
-		if (X === null) return;
-		let e = a(X);
-		Z(null), e && V(e.rgb, !0);
-	}, $ = (t, r) => /* @__PURE__ */ S("div", {
+	}, w, T), Y = () => {
+		if (q === null) return;
+		let e = a(q);
+		if (J(null), e) {
+			U(e.rgb, !0);
+			return;
+		}
+		let t = O ? c(q) : null;
+		t && V(t, !0);
+	}, [we, X] = p(null), Te = we ?? (j ? S(j.angle) : "0"), Ee = (e) => {
+		X(e);
+		let t = Number(e);
+		e.trim() !== "" && Number.isFinite(t) && j && V({
+			angle: (Math.round(t) % 360 + 360) % 360,
+			stops: j.stops
+		}, !0);
+	}, [Z, Q] = p(null), De = (e, t) => {
+		Q({
+			index: e,
+			value: t
+		});
+		let n = Number(t);
+		t.trim() !== "" && Number.isFinite(n) && j && V({
+			angle: j.angle,
+			stops: j.stops.map((t, r) => r === e ? {
+				...t,
+				position: Math.min(Math.max(n, 0), 100)
+			} : t)
+		}, !0);
+	}, Oe = (e) => {
+		!j || j.stops.length <= 2 || (V({
+			angle: j.angle,
+			stops: j.stops.filter((t, n) => n !== e)
+		}, !0), N > e && P(N - 1));
+	}, ke = () => {
+		if (!j) return;
+		let e = j.stops, t = 0, n = -1;
+		for (let r = 0; r < e.length - 1; r++) {
+			let i = (e[r + 1]?.position ?? 0) - (e[r]?.position ?? 0);
+			i > n && (n = i, t = r);
+		}
+		let r = e[t] ?? e[0], i = e[t + 1] ?? e[e.length - 1], a = {
+			color: me(r.color, i.color),
+			position: (r.position + i.position) / 2
+		}, o = [...e, a];
+		V({
+			angle: j.angle,
+			stops: o
+		}, !0);
+		let s = [...o].sort((e, t) => e.position - t.position);
+		P(s.indexOf(a));
+	}, Ae = M ? null : ge, je = (E ?? []).filter((e) => typeof e == "string"), Me = (E ?? []).filter((e) => typeof e != "string"), $ = (t, r) => /* @__PURE__ */ h("div", {
 		"data-slot": "swatch-row",
-		className: e([h]),
+		className: e([ce]),
 		children: t.map((t) => {
 			let i = a(t)?.rgb;
-			return i ? /* @__PURE__ */ S("button", {
+			return i ? /* @__PURE__ */ h("button", {
 				type: "button",
 				"data-slot": "swatch-item",
 				"aria-label": t,
-				onClick: () => V(i, !0),
+				onClick: () => H(i, !0),
 				className: e([
-					p,
-					c,
-					o(i) === B && "haze-color-picker-styles__swatchActive"
+					oe,
+					u,
+					o(i) === Ae && "haze-color-picker-styles__swatchActive"
 				]),
-				children: /* @__PURE__ */ S("span", {
+				children: /* @__PURE__ */ h("span", {
 					"data-slot": "swatch",
 					style: { background: n(i) },
-					className: e([m])
+					className: e([se])
 				})
 			}, `${r}:${t}`) : null;
 		})
-	});
-	return /* @__PURE__ */ C("div", {
+	}), Ne = (t, n) => {
+		if ("colors" in t) return /* @__PURE__ */ g(fe, { children: [t.label !== void 0 && /* @__PURE__ */ h("div", {
+			"data-slot": "group-label",
+			className: e(["haze-color-picker-styles__groupLabel"]),
+			children: t.label
+		}), $(t.colors, n)] }, n);
+		let r = c(t.gradient);
+		if (!r) return null;
+		let i = l(r);
+		return /* @__PURE__ */ h("button", {
+			type: "button",
+			"data-slot": "gradient-swatch",
+			"aria-label": t.label ?? t.gradient,
+			style: { background: i },
+			onClick: () => V(r, !0),
+			className: e([
+				te,
+				u,
+				i === B && "haze-color-picker-styles__swatchActive"
+			])
+		}, n);
+	};
+	return /* @__PURE__ */ g("div", {
 		"data-slot": "panel",
-		className: e([u, F]),
+		className: e([re, he]),
 		children: [
-			/* @__PURE__ */ S("div", {
+			O && /* @__PURE__ */ g("div", {
+				"data-slot": "mode-toggle",
+				role: "group",
+				className: e(["haze-color-picker-styles__modeToggle"]),
+				children: [/* @__PURE__ */ h("button", {
+					type: "button",
+					"data-slot": "mode-button",
+					"aria-pressed": !M,
+					onClick: () => W("solid"),
+					className: e(["haze-color-picker-styles__modeBtn"]),
+					children: k.solid
+				}), /* @__PURE__ */ h("button", {
+					type: "button",
+					"data-slot": "mode-button",
+					"aria-pressed": M,
+					onClick: () => W("gradient"),
+					className: e(["haze-color-picker-styles__modeBtn"]),
+					children: k.gradient
+				})]
+			}),
+			M && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+				"data-slot": "gradient-preview",
+				"aria-hidden": "true",
+				style: { background: B ?? void 0 },
+				className: e(["haze-color-picker-styles__gradientPreview", "haze-color-picker-styles__checkerboard"])
+			}), /* @__PURE__ */ g("div", {
+				"data-slot": "angle-row",
+				className: e(["haze-color-picker-styles__angleRow"]),
+				children: [/* @__PURE__ */ h("label", {
+					htmlFor: A,
+					children: k.angle
+				}), /* @__PURE__ */ h("input", {
+					id: A,
+					type: "number",
+					min: 0,
+					max: 360,
+					step: 1,
+					"data-slot": "angle-input",
+					value: Te,
+					onChange: (e) => Ee(e.target.value),
+					onBlur: () => X(null),
+					className: e(["haze-color-picker-styles__numberInput"])
+				})]
+			})] }),
+			/* @__PURE__ */ h("div", {
 				"data-slot": "saturation",
 				role: "slider",
 				tabIndex: 0,
-				"aria-label": I.saturationBrightness,
+				"aria-label": k.saturationBrightness,
 				"aria-valuemin": 0,
 				"aria-valuemax": 100,
 				"aria-valuenow": Math.round(z.s * 100),
 				"aria-valuetext": r(L, "hex", !1),
 				style: { background: `linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)), hsl(${z.h}, 100%, 50%)` },
-				onKeyDown: q,
-				...W,
-				className: e([d]),
-				children: /* @__PURE__ */ S("span", {
+				onKeyDown: be,
+				..._e,
+				className: e([ie]),
+				children: /* @__PURE__ */ h("span", {
 					"data-slot": "thumb",
 					style: {
 						left: `${z.s * 100}%`,
 						top: `${(1 - z.v) * 100}%`
 					},
-					className: e([f])
+					className: e([ae])
 				})
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ h("div", {
 				"data-slot": "hue-track",
 				role: "slider",
 				tabIndex: 0,
-				"aria-label": I.hue,
+				"aria-label": k.hue,
 				"aria-valuemin": 0,
 				"aria-valuemax": 360,
 				"aria-valuenow": Math.round(z.h),
 				"aria-valuetext": `${Math.round(z.h)}deg`,
-				onKeyDown: J,
-				...G,
-				className: e([g, l]),
-				children: /* @__PURE__ */ S("span", {
+				onKeyDown: xe,
+				...ve,
+				className: e([le, ne]),
+				children: /* @__PURE__ */ h("span", {
 					"data-slot": "thumb",
 					style: { left: `${z.h / 360 * 100}%` },
-					className: e([_])
+					className: e([ue])
 				})
 			}),
-			M && /* @__PURE__ */ C("div", {
+			T && /* @__PURE__ */ g("div", {
 				"data-slot": "alpha-track",
 				role: "slider",
 				tabIndex: 0,
-				"aria-label": I.alpha,
+				"aria-label": k.alpha,
 				"aria-valuemin": 0,
 				"aria-valuemax": 100,
 				"aria-valuenow": Math.round(R * 100),
 				"aria-valuetext": `${Math.round(R * 100)}%`,
-				onKeyDown: Y,
-				...K,
+				onKeyDown: Se,
+				...ye,
 				className: e(["haze-color-picker-styles__track", "haze-color-picker-styles__checkerboard"]),
-				children: [/* @__PURE__ */ S("span", {
+				children: [/* @__PURE__ */ h("span", {
 					"data-slot": "fill",
 					style: { background: `linear-gradient(to right, rgba(${L.r}, ${L.g}, ${L.b}, 0), rgba(${L.r}, ${L.g}, ${L.b}, 1))` },
 					className: e(["haze-color-picker-styles__trackFill"])
-				}), /* @__PURE__ */ S("span", {
+				}), /* @__PURE__ */ h("span", {
 					"data-slot": "thumb",
 					style: { left: `${R * 100}%` },
 					className: e(["haze-color-picker-styles__trackThumb"])
 				})]
 			}),
-			/* @__PURE__ */ S("input", {
+			/* @__PURE__ */ h("input", {
 				type: "text",
 				"data-slot": "input",
-				"aria-label": I.hexColor,
+				"aria-label": k.hexColor,
 				spellCheck: !1,
-				value: ee,
-				onChange: (e) => Z(e.target.value),
-				onBlur: Q,
+				value: Ce,
+				onChange: (e) => J(e.target.value),
+				onBlur: Y,
 				onKeyDown: (e) => {
-					e.key === "Enter" ? (e.preventDefault(), Q()) : e.key === "Escape" && (e.stopPropagation(), Z(null));
+					e.key === "Enter" ? (e.preventDefault(), Y()) : e.key === "Escape" && (e.stopPropagation(), J(null));
 				},
-				className: e([v])
+				className: e([de])
 			}),
-			N !== void 0 && N.length > 0 && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+			M && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+				"data-slot": "stops-list",
+				className: e(["haze-color-picker-styles__stopsList"]),
+				children: I.map((t, n) => /* @__PURE__ */ g("div", {
+					"data-slot": "stop-item",
+					className: e(["haze-color-picker-styles__stopRow"]),
+					children: [
+						/* @__PURE__ */ h("button", {
+							type: "button",
+							"data-slot": "stop-swatch",
+							"aria-label": `${k.stopColor} ${n + 1}: ${t.color}`,
+							onClick: () => P(n),
+							className: e([
+								"haze-color-picker-styles__stopSwatchBtn",
+								"haze-color-picker-styles__checkerboard",
+								n === F && "haze-color-picker-styles__stopSwatchActive"
+							]),
+							children: /* @__PURE__ */ h("span", {
+								"data-slot": "swatch",
+								style: { background: t.color },
+								className: e(["haze-color-picker-styles__swatchFill"])
+							})
+						}),
+						/* @__PURE__ */ h("input", {
+							type: "number",
+							min: 0,
+							max: 100,
+							step: 1,
+							"data-slot": "stop-position-input",
+							"aria-label": `${k.stopPosition} ${n + 1}`,
+							value: Z?.index === n ? Z.value : S(t.position),
+							onChange: (e) => De(n, e.target.value),
+							onBlur: () => Q(null),
+							className: e(["haze-color-picker-styles__numberInput"])
+						}),
+						/* @__PURE__ */ h("button", {
+							type: "button",
+							"data-slot": "stop-remove-button",
+							"aria-label": `${k.removeStop} ${n + 1}`,
+							disabled: I.length <= 2,
+							onClick: () => Oe(n),
+							className: e(["haze-color-picker-styles__stopRemoveBtn"]),
+							children: "×"
+						})
+					]
+				}, `${n}:${t.color}`))
+			}), /* @__PURE__ */ h("button", {
+				type: "button",
+				"data-slot": "add-stop-button",
+				onClick: ke,
+				className: e(["haze-color-picker-styles__addStopBtn"]),
+				children: k.addStop
+			})] }),
+			je.length > 0 && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
 				"data-slot": "group-label",
 				className: e(["haze-color-picker-styles__groupLabel"]),
-				children: I.presetsLabel
-			}), $(N, "preset")] }),
-			P !== void 0 && P.length > 0 && /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+				children: k.presetsLabel
+			}), $(je, "preset")] }),
+			Me.map((e, t) => Ne(e, `preset-${t}`)),
+			D !== void 0 && D.length > 0 && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
 				"data-slot": "group-label",
 				className: e(["haze-color-picker-styles__groupLabel"]),
-				children: I.recentColors
-			}), $(P, "recent")] })
+				children: k.recentColors
+			}), $(D, "recent")] })
 		]
 	});
 }
 //#endregion
-export { k as default };
+export { C as default };

package/dist/components/ColorPicker/color-picker-styles.js

@@ -2,6 +2,6 @@
 "use client";
 /* empty css                              */
 //#region src/lib/components/ColorPicker/color-picker-styles.ts
-var e = "haze-color-picker-styles__panelVisuals", t = "haze-color-picker-styles__panelContent", n = "haze-color-picker-styles__svArea", r = "haze-color-picker-styles__svThumb", i = "haze-color-picker-styles__track", a = "haze-color-picker-styles__hueTrack", o = "haze-color-picker-styles__checkerboard", s = "haze-color-picker-styles__trackFill", c = "haze-color-picker-styles__trackThumb", l = "haze-color-picker-styles__valueInput", u = "haze-color-picker-styles__groupLabel", d = "haze-color-picker-styles__swatchRow", f = "haze-color-picker-styles__swatchBtn", p = "haze-color-picker-styles__swatchFill", m = "haze-color-picker-styles__swatchActive", h = "haze-color-picker-styles__trigger";
+var e = "haze-color-picker-styles__panelVisuals", t = "haze-color-picker-styles__panelContent", n = "haze-color-picker-styles__svArea", r = "haze-color-picker-styles__svThumb", i = "haze-color-picker-styles__track", a = "haze-color-picker-styles__hueTrack", o = "haze-color-picker-styles__checkerboard", s = "haze-color-picker-styles__trackFill", c = "haze-color-picker-styles__trackThumb", l = "haze-color-picker-styles__valueInput", u = "haze-color-picker-styles__groupLabel", d = "haze-color-picker-styles__swatchRow", f = "haze-color-picker-styles__swatchBtn", p = "haze-color-picker-styles__swatchFill", m = "haze-color-picker-styles__swatchActive", h = "haze-color-picker-styles__modeToggle", g = "haze-color-picker-styles__modeBtn", _ = "haze-color-picker-styles__gradientPreview", v = "haze-color-picker-styles__angleRow", y = "haze-color-picker-styles__numberInput", b = "haze-color-picker-styles__stopsList", x = "haze-color-picker-styles__stopRow", S = "haze-color-picker-styles__stopSwatchBtn", C = "haze-color-picker-styles__stopSwatchActive", w = "haze-color-picker-styles__stopRemoveBtn", T = "haze-color-picker-styles__addStopBtn", E = "haze-color-picker-styles__gradientSwatch", D = "haze-color-picker-styles__trigger";
 //#endregion
-export { o as checkerboard, u as groupLabel, a as hueTrack, t as panelContent, e as panelVisuals, n as svArea, r as svThumb, m as swatchActive, f as swatchBtn, p as swatchFill, d as swatchRow, i as track, s as trackFill, c as trackThumb, h as trigger, l as valueInput };
+export { T as addStopBtn, v as angleRow, o as checkerboard, _ as gradientPreview, E as gradientSwatch, u as groupLabel, a as hueTrack, g as modeBtn, h as modeToggle, y as numberInput, t as panelContent, e as panelVisuals, w as stopRemoveBtn, x as stopRow, C as stopSwatchActive, S as stopSwatchBtn, b as stopsList, n as svArea, r as svThumb, m as swatchActive, f as swatchBtn, p as swatchFill, d as swatchRow, i as track, s as trackFill, c as trackThumb, D as trigger, l as valueInput };