@photoroom/ui 0.1.136 → 0.1.138

package/index.mjs

@@ -1786,17 +1786,18 @@ function xr({ icon: e, stacked: t, children: n }) {
 var Sr = W("focus-visible:misc-border-size-focus-ring relative inline-flex w-fit max-w-full appearance-none items-center justify-center truncate overflow-hidden text-center outline-hidden transition-all duration-200 disabled:pointer-events-none disabled:cursor-not-allowed", {
 	variants: {
 		variant: {
-			accent: "bg-content-accent hover:bg-accent-400 focus-visible:bg-accent-400 focus-visible:ring-accent-alpha-5 active:bg-accent-600 text-white",
-			"secondary-accent": "bg-accent-alpha-1 text-content-accent hover:bg-accent-alpha-2 focus-visible:bg-accent-alpha-3 focus-visible:ring-accent-alpha-5 active:bg-accent-alpha-3",
-			"borderless-accent": "text-content-accent hover:bg-accent-alpha-2 focus-visible:bg-accent-alpha-3 focus-visible:ring-accent-alpha-5 active:bg-accent-alpha-3 bg-transparent",
-			primary: "bg-background-default text-content-white-primary-inverted hover:bg-background-hover focus-visible:bg-background-hover focus-visible:ring-accent-alpha-5 active:bg-background-down",
-			secondary: "bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-accent-alpha-5 active:bg-background-subdued-down",
-			borderless: "text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-accent-alpha-5 active:bg-background-subdued-down",
-			negative: "bg-negative-alpha-1 text-content-negative hover:bg-negative-alpha-2 focus-visible:bg-negative-alpha-2 focus-visible:ring-accent-alpha-5 active:bg-negative-alpha-3",
-			pro: "bg-content-accent! bg-background-pro hover:bg-background-pro-hover focus-visible:ring-accent-alpha-5 focus-visible:bg-background-pro-hover active:bg-background-pro-down text-white",
+			accent: "bg-content-accent hover:bg-accent-400 focus-visible:bg-accent-400 focus-visible:ring-misc-focus-indicator active:bg-accent-600 text-white",
+			"secondary-accent": "bg-accent-alpha-1 text-content-accent hover:bg-accent-alpha-2 focus-visible:bg-accent-alpha-3 focus-visible:ring-misc-focus-indicator active:bg-accent-alpha-3",
+			"borderless-accent": "text-content-accent hover:bg-accent-alpha-2 focus-visible:bg-accent-alpha-3 focus-visible:ring-misc-focus-indicator active:bg-accent-alpha-3 bg-transparent",
+			primary: "bg-background-default text-content-white-primary-inverted hover:bg-background-hover focus-visible:bg-background-hover focus-visible:ring-misc-focus-indicator active:bg-background-down",
+			secondary: "bg-background-subdued text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
+			borderless: "text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down",
+			"secondary-outline": "border-misc-border misc-border-size-default text-content-primary hover:bg-background-subdued-hover focus-visible:bg-background-subdued-hover focus-visible:ring-misc-focus-indicator active:bg-background-subdued-down bg-transparent",
+			negative: "bg-negative-alpha-1 text-content-negative hover:bg-negative-alpha-2 focus-visible:bg-negative-alpha-2 focus-visible:ring-misc-focus-indicator active:bg-negative-alpha-3",
+			pro: "bg-content-accent! bg-background-pro hover:bg-background-pro-hover focus-visible:ring-misc-focus-indicator focus-visible:bg-background-pro-hover active:bg-background-pro-down text-white",
 			"on-dark": "bg-background-white hover:bg-background-white-hover focus-visible:bg-background-white-hover focus-visible:ring-misc-white-focus-indicator active:bg-background-white text-black",
 			"secondary-on-dark": "bg-background-white-subdued text-content-white-primary hover:bg-background-white-subdued-hover focus-visible:bg-background-white-subdued-hover focus-visible:ring-misc-white-focus-indicator active:bg-background-white-subdued-down",
-			"borderless-on-dark": "hover:bg-background-white-subdued-hover focus-visible:bg-background-white-subdued-hover active:bg-background-white-subdued-down text-white focus-visible:ring-white"
+			"borderless-on-dark": "hover:bg-background-white-subdued-hover focus-visible:bg-background-white-subdued-hover active:bg-background-white-subdued-down focus-visible:ring-misc-white-focus-indicator text-white"
 		},
 		density: {
 			compact: "rounded-400",
@@ -35067,7 +35068,7 @@ var Nq = {
 	return e instanceof iJ ? e : new iJ(e);
 };
 //#endregion
-//#region ../../node_modules/.pnpm/react-colorful@5.6.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-colorful/dist/index.mjs
+//#region ../../node_modules/.pnpm/react-colorful@5.7.0_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/react-colorful/dist/index.mjs
 function oJ() {
 	return (oJ = Object.assign || function(e) {
 		for (var t = 1; t < arguments.length; t++) {
@@ -35107,48 +35108,61 @@ var lJ = function(e, t, n) {
 }, pJ = function(e) {
 	!uJ(e) && e.preventDefault();
 }, mJ = t.memo(function(e) {
-	var n = e.onMove, r = e.onKey, i = sJ(e, ["onMove", "onKey"]), a = S(null), o = cJ(n), s = cJ(r), c = S(null), l = S(!1), u = b(function() {
+	var n = e.onMove, r = e.onKey, i = e.onEnd, a = sJ(e, [
+		"onMove",
+		"onKey",
+		"onEnd"
+	]), o = S(null), s = cJ(n), c = cJ(r), l = cJ(i), u = S(null), d = S(!1), f = b(function() {
 		var e = function(e) {
-			pJ(e), (uJ(e) ? e.touches.length > 0 : e.buttons > 0) && a.current ? o(fJ(a.current, e, c.current)) : n(!1);
+			pJ(e), (uJ(e) ? e.touches.length > 0 : e.buttons > 0) && o.current ? s(fJ(o.current, e, u.current)) : (n(!1), l());
 		}, t = function() {
-			return n(!1);
+			n(!1), l();
 		};
 		function n(n) {
-			var r = l.current, i = dJ(a.current), o = n ? i.addEventListener : i.removeEventListener;
-			o(r ? "touchmove" : "mousemove", e), o(r ? "touchend" : "mouseup", t);
+			var r = d.current, i = dJ(o.current), a = n ? i.addEventListener : i.removeEventListener;
+			a(r ? "touchmove" : "mousemove", e), a(r ? "touchend" : "mouseup", t);
 		}
 		return [
 			function(e) {
-				var t = e.nativeEvent, r = a.current;
+				var t = e.nativeEvent, r = o.current;
 				if (r && (pJ(t), !function(e, t) {
 					return t && !uJ(e);
-				}(t, l.current) && r)) {
+				}(t, d.current) && r)) {
 					if (uJ(t)) {
-						l.current = !0;
+						d.current = !0;
 						var i = t.changedTouches || [];
-						i.length && (c.current = i[0].identifier);
+						i.length && (u.current = i[0].identifier);
 					}
-					r.focus(), o(fJ(r, t, c.current)), n(!0);
+					r.focus(), s(fJ(r, t, u.current)), n(!0);
 				}
 			},
 			function(e) {
 				var t = e.which || e.keyCode;
-				t < 37 || t > 40 || (e.preventDefault(), s({
+				t < 37 || t > 40 || (e.preventDefault(), c({
 					left: t === 39 ? .05 : t === 37 ? -.05 : 0,
 					top: t === 40 ? .05 : t === 38 ? -.05 : 0
 				}));
 			},
+			function(e) {
+				var t = e.which || e.keyCode;
+				t >= 37 && t <= 40 && l();
+			},
 			n
 		];
-	}, [s, o]), d = u[0], f = u[1], p = u[2];
+	}, [
+		c,
+		s,
+		l
+	]), p = f[0], m = f[1], g = f[2], _ = f[3];
 	return h(function() {
-		return p;
-	}, [p]), t.createElement("div", oJ({}, i, {
-		onTouchStart: d,
-		onMouseDown: d,
+		return _;
+	}, [_]), t.createElement("div", oJ({}, a, {
+		onTouchStart: p,
+		onMouseDown: p,
 		className: "react-colorful__interactive",
-		ref: a,
-		onKeyDown: f,
+		ref: o,
+		onKeyDown: m,
+		onKeyUp: g,
 		tabIndex: 0,
 		role: "slider"
 	}));
@@ -35243,14 +35257,15 @@ var vJ = function(e) {
 		a: i
 	};
 }, DJ = t.memo(function(e) {
-	var n = e.hue, r = e.onChange, i = hJ(["react-colorful__hue", e.className]);
-	return t.createElement("div", { className: i }, t.createElement(mJ, {
+	var n = e.hue, r = e.onChange, i = e.onChangeEnd, a = hJ(["react-colorful__hue", e.className]);
+	return t.createElement("div", { className: a }, t.createElement(mJ, {
 		onMove: function(e) {
 			r({ h: 360 * e.left });
 		},
 		onKey: function(e) {
 			r({ h: lJ(n + 360 * e.left, 0, 360) });
 		},
+		onEnd: i,
 		"aria-label": "Hue",
 		"aria-valuenow": _J(n),
 		"aria-valuemax": "360",
@@ -35266,7 +35281,7 @@ var vJ = function(e) {
 		})
 	})));
 }), OJ = t.memo(function(e) {
-	var n = e.hsva, r = e.onChange, i = { backgroundColor: SJ({
+	var n = e.hsva, r = e.onChange, i = e.onChangeEnd, a = { backgroundColor: SJ({
 		h: n.h,
 		s: 100,
 		v: 100,
@@ -35274,7 +35289,7 @@ var vJ = function(e) {
 	}) };
 	return t.createElement("div", {
 		className: "react-colorful__saturation",
-		style: i
+		style: a
 	}, t.createElement(mJ, {
 		onMove: function(e) {
 			r({
@@ -35288,6 +35303,7 @@ var vJ = function(e) {
 				v: lJ(n.v - 100 * e.top, 0, 100)
 			});
 		},
+		onEnd: i,
 		"aria-label": "Color",
 		"aria-valuetext": "Saturation " + _J(n.s) + "%, Brightness " + _J(n.v) + "%"
 	}, t.createElement(gJ, {
@@ -35303,36 +35319,42 @@ var vJ = function(e) {
 }, AJ = function(e, t) {
 	return e.toLowerCase() === t.toLowerCase() || kJ(yJ(e), yJ(t));
 };
-function jJ(e, t, n) {
-	var r = cJ(n), i = C(function() {
+function jJ(e, t, n, r) {
+	var i = cJ(n), a = cJ(r), o = C(function() {
 		return e.toHsva(t);
-	}), a = i[0], o = i[1], s = S({
+	}), s = o[0], c = o[1], l = S({
 		color: t,
-		hsva: a
-	});
+		hsva: s
+	}), u = S(!1);
 	return h(function() {
-		if (!e.equal(t, s.current.color)) {
+		if (!e.equal(t, l.current.color)) {
 			var n = e.toHsva(t);
-			s.current = {
+			l.current = {
 				hsva: n,
 				color: t
-			}, o(n);
+			}, c(n), u.current = !1;
 		}
 	}, [t, e]), h(function() {
 		var t;
-		kJ(a, s.current.hsva) || e.equal(t = e.fromHsva(a), s.current.color) || (s.current = {
-			hsva: a,
+		kJ(s, l.current.hsva) || e.equal(t = e.fromHsva(s), l.current.color) || (l.current = {
+			hsva: s,
 			color: t
-		}, r(t));
+		}, i(t), u.current = !0);
 	}, [
-		a,
+		s,
 		e,
-		r
-	]), [a, p(function(e) {
-		o(function(t) {
-			return Object.assign({}, t, e);
-		});
-	}, [])];
+		i
+	]), [
+		s,
+		p(function(e) {
+			c(function(t) {
+				return Object.assign({}, t, e);
+			});
+		}, []),
+		p(function() {
+			u.current && (u.current = !1, a(l.current.color));
+		}, [a])
+	];
 }
 var MJ, NJ = typeof window < "u" ? y : h, PJ = function() {
 	return MJ || (typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0);
@@ -35347,23 +35369,26 @@ var MJ, NJ = typeof window < "u" ? y : h, PJ = function() {
 		}
 	}, []);
 }, LJ = function(e) {
-	var n = e.className, r = e.colorModel, i = e.color, a = i === void 0 ? r.defaultColor : i, o = e.onChange, s = sJ(e, [
+	var n = e.className, r = e.colorModel, i = e.color, a = i === void 0 ? r.defaultColor : i, o = e.onChange, s = e.onChangeEnd, c = sJ(e, [
 		"className",
 		"colorModel",
 		"color",
-		"onChange"
-	]), c = S(null);
-	IJ(c);
-	var l = jJ(r, a, o), u = l[0], d = l[1], f = hJ(["react-colorful", n]);
-	return t.createElement("div", oJ({}, s, {
-		ref: c,
-		className: f
+		"onChange",
+		"onChangeEnd"
+	]), l = S(null);
+	IJ(l);
+	var u = jJ(r, a, o, s), d = u[0], f = u[1], p = u[2], m = hJ(["react-colorful", n]);
+	return t.createElement("div", oJ({}, c, {
+		ref: l,
+		className: m
 	}), t.createElement(OJ, {
-		hsva: u,
-		onChange: d
+		hsva: d,
+		onChange: f,
+		onChangeEnd: p
 	}), t.createElement(DJ, {
-		hue: u.h,
-		onChange: d,
+		hue: d.h,
+		onChange: f,
+		onChangeEnd: p,
 		className: "react-colorful__last-control"
 	}));
 }, RJ = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.136",
+  "version": "0.1.138",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [
@@ -60,7 +60,7 @@
     "fuse.js": "7.3.0",
     "lodash-es": "4.18.1",
     "motion": "12.38.0",
-    "react-colorful": "5.6.1",
+    "react-colorful": "5.7.0",
     "react-device-detect": "2.2.3",
     "react-intersection-observer": "10.0.3",
     "react-moveable": "0.56.0",