haze-ui 1.33.0 → 1.34.0

package/dist/components/ColorPicker/ColorPicker.js

@@ -2,89 +2,100 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
-import { mergeRefs as n } from "../../utils/refs.js";
-import { FloatingPanel as r, useFloating as i } from "../../utils/floating.js";
-import { cssColor as a, parseColor as o, rgbHexKey as s } from "./color-math.js";
-import { checkerboard as c, panelVisuals as l, swatchFill as u, trigger as d } from "./color-picker-styles.js";
-import f from "./ColorPickerPanel.js";
+import { NativeHiddenFields as n } from "../../utils/native-form.js";
+import { mergeRefs as r } from "../../utils/refs.js";
+import { FloatingPanel as i, useFloating as a } from "../../utils/floating.js";
+import { cssColor as o, formatColor as s, parseColor as c, rgbHexKey as l } from "./color-math.js";
+import { parseGradient as ee, serializeGradient as te } from "./gradient.js";
+import { checkerboard as u, panelVisuals as d, swatchFill as f, trigger as p } from "./color-picker-styles.js";
+import m from "./ColorPickerPanel.js";
 /* empty css                      */
-import { useCallback as p, useEffect as m, useId as h, useRef as g, useState as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { useControl as b } from "react-use-control";
+import { useCallback as h, useEffect as g, useId as ne, useRef as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useControl as x } from "react-use-control";
 //#region src/lib/components/ColorPicker/ColorPicker.tsx
-var x = 10, S = "haze-ColorPicker__container";
-function C({ value: C, onChange: w, open: T, inline: E = !1, format: D = "hex", allowAlpha: O = !1, presets: k, recent: A = !1, className: j, "aria-label": M, ref: N }) {
-	let P = t("colorPicker"), [F, I] = b(C, "#000000"), [L, R] = b(T, !1), z = M ?? P.pickColor, B = o(F)?.rgb ?? {
+var S = 10, C = "haze-ColorPicker__container";
+function w({ value: w, onChange: T, open: re, inline: ie = !1, format: E = "hex", allowAlpha: D = !1, presets: O, recent: k = !1, gradient: A = !1, className: j, name: M, "aria-label": N, ref: P }) {
+	let F = t("colorPicker"), [I, L] = x(w, "#000000"), [R, z] = x(re, !1), B = N ?? F.pickColor, V = c(I)?.rgb ?? {
 		r: 0,
 		g: 0,
 		b: 0
-	}, V = p((e) => {
-		I(e), w?.(e);
-	}, [I, w]), [H, U] = _([]), W = p((e) => {
-		if (!A) return;
-		let t = s(o(e)?.rgb ?? {
-			r: 0,
-			g: 0,
-			b: 0
-		});
-		U((n) => [e, ...n.filter((e) => {
-			let n = o(e);
-			return n === null || s(n.rgb) !== t;
-		})].slice(0, x));
-	}, [A]), G = /* @__PURE__ */ v(f, {
-		value: F,
-		onChange: V,
-		onCommit: W,
-		format: D,
-		allowAlpha: O,
-		presets: k,
-		recentColors: A ? H : void 0
-	}), K = g(null), q = g(null), J = p((e) => n(K, N)(e), [N]), Y = h(), X = i({
-		open: L,
-		setOpen: R,
-		triggerRef: K,
-		panelRef: q,
+	}, H = ee(I), U = H ? te(H) : null, W = U ?? s(V, E, D), G = h((e) => {
+		L(e), T?.(e);
+	}, [L, T]), [K, q] = v([]), J = h((e) => {
+		if (!k) return;
+		let t = c(e);
+		if (!t) return;
+		let n = l(t.rgb);
+		q((t) => [e, ...t.filter((e) => {
+			let t = c(e);
+			return t === null || l(t.rgb) !== n;
+		})].slice(0, S));
+	}, [k]), Y = /* @__PURE__ */ y(m, {
+		value: I,
+		onChange: G,
+		onCommit: J,
+		format: E,
+		allowAlpha: D,
+		presets: O,
+		gradient: A,
+		recentColors: k ? K : void 0
+	}), X = _(null), Z = _(null), ae = h((e) => r(X, P)(e), [P]), Q = ne(), $ = a({
+		open: R,
+		setOpen: z,
+		triggerRef: X,
+		panelRef: Z,
 		animated: !0
 	});
-	return m(() => {
-		X.shown && q.current?.querySelector("[role='slider']")?.focus();
-	}, [X.shown]), E ? /* @__PURE__ */ v("div", {
-		ref: N,
+	return g(() => {
+		$.shown && Z.current?.querySelector("[role='slider']")?.focus();
+	}, [$.shown]), ie ? /* @__PURE__ */ b("div", {
+		ref: P,
 		"data-slot": "color-picker",
-		className: e([l, j]),
-		children: G
-	}) : /* @__PURE__ */ y("span", {
+		className: e([d, j]),
+		children: [Y, /* @__PURE__ */ y(n, {
+			name: M,
+			values: [W]
+		})]
+	}) : /* @__PURE__ */ b("span", {
 		"data-slot": "color-picker",
-		className: S,
-		children: [/* @__PURE__ */ v("button", {
-			ref: J,
-			type: "button",
-			"data-slot": "trigger",
-			style: X.triggerStyle,
-			"aria-label": z,
-			"aria-haspopup": "dialog",
-			"aria-expanded": L,
-			"aria-controls": Y,
-			onPointerDown: X.onTriggerPointerDown,
-			onClick: X.onTriggerClick,
-			className: e([d, c]),
-			children: /* @__PURE__ */ v("span", {
-				"data-slot": "swatch",
-				style: { background: a(B) },
-				className: e([u])
+		className: C,
+		children: [
+			/* @__PURE__ */ y("button", {
+				ref: ae,
+				type: "button",
+				"data-slot": "trigger",
+				style: $.triggerStyle,
+				"aria-label": B,
+				"aria-haspopup": "dialog",
+				"aria-expanded": R,
+				"aria-controls": Q,
+				onPointerDown: $.onTriggerPointerDown,
+				onClick: $.onTriggerClick,
+				className: e([p, u]),
+				children: /* @__PURE__ */ y("span", {
+					"data-slot": "swatch",
+					style: { background: U ?? o(V) },
+					className: e([f])
+				})
+			}),
+			/* @__PURE__ */ y(i, {
+				ref: Z,
+				behavior: $,
+				placement: "bottom",
+				id: Q,
+				role: "dialog",
+				"aria-label": B,
+				visualClass: d,
+				className: j,
+				children: Y
+			}),
+			/* @__PURE__ */ y(n, {
+				name: M,
+				values: [W]
 			})
-		}), /* @__PURE__ */ v(r, {
-			ref: q,
-			behavior: X,
-			placement: "bottom",
-			id: Y,
-			role: "dialog",
-			"aria-label": z,
-			visualClass: l,
-			className: j,
-			children: G
-		})]
+		]
 	});
 }
 //#endregion
-export { C as default };
+export { w as default };

package/dist/components/ColorPicker/ColorPickerCore.js

@@ -3,46 +3,67 @@
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                          */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/lib/components/ColorPicker/ColorPickerCore.tsx
-var i = "haze-ColorPickerCore__container", a = "haze-ColorPickerCore__previewRow", o = "haze-ColorPickerCore__colorInput", s = "haze-ColorPickerCore__textInput", c = "haze-ColorPickerCore__presetsRow", l = "haze-ColorPickerCore__presetBtn", u = "haze-ColorPickerCore__activePreset";
-function d({ value: d, onChange: f, presets: p, className: m, ref: h }) {
-	let g = t("colorPicker");
-	return /* @__PURE__ */ r("div", {
+var a = "haze-ColorPickerCore__container", o = "haze-ColorPickerCore__previewRow", s = "haze-ColorPickerCore__colorInput", c = "haze-ColorPickerCore__textInput", l = "haze-ColorPickerCore__presetsRow", u = "haze-ColorPickerCore__presetBtn", d = "haze-ColorPickerCore__activePreset";
+function f(f) {
+	let p = n(29), { value: m, onChange: h, presets: g, className: _, ref: v } = f, y = t("colorPicker"), b;
+	p[0] === _ ? b = p[1] : (b = [a, _], p[0] = _, p[1] = b);
+	let x;
+	p[2] === Symbol.for("react.memo_cache_sentinel") ? (x = [o], p[2] = x) : x = p[2];
+	let S;
+	p[3] === Symbol.for("react.memo_cache_sentinel") ? (S = [s], p[3] = S) : S = p[3];
+	let C;
+	p[4] === h ? C = p[5] : (C = (e) => h(e.target.value), p[4] = h, p[5] = C);
+	let w;
+	p[6] !== v || p[7] !== y.pickColor || p[8] !== C || p[9] !== m ? (w = /* @__PURE__ */ r("input", {
+		ref: v,
+		type: "color",
+		"data-slot": "color-input",
+		value: m,
+		"aria-label": y.pickColor,
+		onChange: C,
+		className: e(S)
+	}), p[6] = v, p[7] = y.pickColor, p[8] = C, p[9] = m, p[10] = w) : w = p[10];
+	let T;
+	p[11] === Symbol.for("react.memo_cache_sentinel") ? (T = [c], p[11] = T) : T = p[11];
+	let E;
+	p[12] === h ? E = p[13] : (E = (e) => h(e.target.value), p[12] = h, p[13] = E);
+	let D;
+	p[14] !== y.hexColor || p[15] !== E || p[16] !== m ? (D = /* @__PURE__ */ r("input", {
+		type: "text",
+		"data-slot": "text-input",
+		value: m,
+		"aria-label": y.hexColor,
+		onChange: E,
+		className: e(T)
+	}), p[14] = y.hexColor, p[15] = E, p[16] = m, p[17] = D) : D = p[17];
+	let O;
+	p[18] !== w || p[19] !== D ? (O = /* @__PURE__ */ i("div", {
+		"data-slot": "preview",
+		className: e(x),
+		children: [w, D]
+	}), p[18] = w, p[19] = D, p[20] = O) : O = p[20];
+	let k;
+	p[21] !== h || p[22] !== g || p[23] !== m ? (k = g && g.length > 0 && /* @__PURE__ */ r("div", {
+		"data-slot": "swatch-row",
+		className: e([l]),
+		children: g.map((t) => /* @__PURE__ */ r("button", {
+			type: "button",
+			"data-slot": "swatch-item",
+			style: { background: t },
+			"aria-label": t,
+			onClick: () => h(t),
+			className: e([u, m === t && d])
+		}, t))
+	}), p[21] = h, p[22] = g, p[23] = m, p[24] = k) : k = p[24];
+	let A;
+	return p[25] !== b || p[26] !== k || p[27] !== O ? (A = /* @__PURE__ */ i("div", {
 		"data-slot": "color-picker",
-		className: e([i, m]),
-		children: [/* @__PURE__ */ r("div", {
-			"data-slot": "preview",
-			className: e([a]),
-			children: [/* @__PURE__ */ n("input", {
-				ref: h,
-				type: "color",
-				"data-slot": "color-input",
-				value: d,
-				"aria-label": g.pickColor,
-				onChange: (e) => f(e.target.value),
-				className: e([o])
-			}), /* @__PURE__ */ n("input", {
-				type: "text",
-				"data-slot": "text-input",
-				value: d,
-				"aria-label": g.hexColor,
-				onChange: (e) => f(e.target.value),
-				className: e([s])
-			})]
-		}), p && p.length > 0 && /* @__PURE__ */ n("div", {
-			"data-slot": "swatch-row",
-			className: e([c]),
-			children: p.map((t) => /* @__PURE__ */ n("button", {
-				type: "button",
-				"data-slot": "swatch-item",
-				style: { background: t },
-				"aria-label": t,
-				onClick: () => f(t),
-				className: e([l, d === t && u])
-			}, t))
-		})]
-	});
+		className: e(b),
+		children: [O, k]
+	}), p[25] = b, p[26] = k, p[27] = O, p[28] = A) : A = p[28], A;
 }
 //#endregion
-export { d as default };
+export { f as default };