@photoroom/ui 0.1.523 → 0.1.525

package/index.mjs

@@ -52621,110 +52621,122 @@ var n9 = {
 		}, e))
 	});
 }, h_e = 120, g_e = 200, __e = ({ value: e, onChange: r, min: a = -Infinity, max: o = Infinity, step: s = 1, disabled: c, options: l, className: u, size: d = "default", ...f }) => {
-	let p = d === "compact", m = V(!1), h = V(null), g = V(null), [_, v] = Me(e.toString()), y = V(_), [b, x] = Me(null), S = V(null), C = B((e) => {
+	let p = d === "compact", m = V(!1), h = V(null), g = V(null), [_, v] = Me(e.toString()), y = V(_), b = V(!1), x = V(null), [S, C] = Me(null), w = V(null), T = B((e) => {
 		if (e === "") return !1;
 		let t = Number(e);
 		return !isNaN(t) && (a === void 0 || t >= a) && (o === void 0 || t <= o);
-	}, [a, o]), w = B(() => {
-		S.current &&= (clearInterval(S.current), null);
-	}, []), T = B((e) => {
+	}, [a, o]), E = B(() => {
+		w.current &&= (clearInterval(w.current), null);
+	}, []), D = B((e) => {
 		v((t) => {
 			let n = (() => {
 				let n = (e > 0 ? Math.floor : Math.ceil)(Number(t) + e);
-				return C(n) ? n.toString() : (w(), t);
+				return T(n) ? n.toString() : (E(), t);
 			})();
-			return C(n) && r(Number(n)), n;
+			return T(n) && r(Number(n)), n;
 		});
 	}, [
-		w,
-		C,
+		E,
+		T,
 		r
-	]), E = B((e) => {
-		m.current || (m.current = !0, T(e), w(), S.current = window.setInterval(() => {
-			T(e);
+	]), O = B((e) => {
+		m.current || (m.current = !0, D(e), E(), w.current = window.setInterval(() => {
+			D(e);
 		}, h_e));
-	}, [w, T]), D = B((e) => {
-		w(), S.current = window.setTimeout(() => {
-			E(e);
+	}, [E, D]), k = B((e) => {
+		E(), w.current = window.setTimeout(() => {
+			O(e);
 		}, g_e);
-	}, [w, E]), O = B((e) => {
-		r(e), v(e.toString());
-	}, [r]), k = B((e) => {
+	}, [E, O]), A = B((e) => {
+		b.current = !1, r(e), v(e.toString());
+	}, [r]), j = B(() => {
+		let t = b.current;
+		if (b.current = !1, t && T(_)) {
+			x.current = Number(_), r(x.current);
+			return;
+		}
+		T(_) && x.current === Number(_) || v(e.toString());
+	}, [
+		T,
+		_,
+		r,
+		e
+	]), M = B((e) => {
 		let t = e.shiftKey && s === 1 ? 10 : s;
 		switch (e.key) {
 			case "ArrowUp":
 				if (e.preventDefault(), l) {
-					x((e) => e === null || e - 1 < 0 ? l.length - 1 : e - 1);
+					C((e) => e === null || e - 1 < 0 ? l.length - 1 : e - 1);
 					return;
 				}
-				E(t);
+				O(t);
 				break;
 			case "ArrowDown":
 				if (e.preventDefault(), l) {
-					x((e) => e === null || e + 1 >= l.length ? 0 : e + 1);
+					C((e) => e === null || e + 1 >= l.length ? 0 : e + 1);
 					return;
 				}
-				E(-t);
+				O(-t);
 				break;
-			case "Enter":
-				if (e.preventDefault(), b === null) return;
-				O(l[b]), x(null);
+			case "Enter": {
+				e.preventDefault();
+				let t = S === null ? void 0 : l[S];
+				if (t === void 0) {
+					j();
+					return;
+				}
+				A(t), C(null);
 				break;
+			}
 			case "Escape":
-				e.preventDefault(), x(null), w();
+				e.preventDefault(), C(null), E();
 				break;
 			default:
-				x(null);
+				C(null);
 				break;
 		}
 	}, [
-		w,
+		E,
+		j,
 		l,
+		A,
+		S,
 		O,
-		b,
-		E,
 		s
-	]), A = B((e) => {
+	]), N = B((e) => {
 		switch (e.key) {
 			case "ArrowUp":
 			case "ArrowDown":
-				e.preventDefault(), m.current = !1, w();
+				e.preventDefault(), m.current = !1, E();
 				break;
 		}
-	}, [w]), j = B((e) => {
-		let t = e.target.value;
-		v(t), C(t) && r(Number(t));
-	}, [C, r]), M = B(() => {
-		l && x(l.indexOf(e) ?? 0), h.current?.select();
-	}, [l, e]), N = B(() => {
-		l && x(null);
-		let t = e.toString();
-		_ !== t && v(t);
-	}, [
-		_,
-		l,
-		e
-	]), ee = Ae(() => C(Number(_) + s), [
-		C,
+	}, [E]), ee = B((e) => {
+		b.current = !0, v(e.target.value);
+	}, []), P = B(() => {
+		b.current = !1, x.current = null, l && C(l.indexOf(e) ?? 0), h.current?.select();
+	}, [l, e]), F = B(() => {
+		l && C(null), j();
+	}, [j, l]), te = Ae(() => T(Number(_) + s), [
+		T,
 		_,
 		s
-	]), P = Ae(() => C(Number(_) - s), [
-		C,
+	]), I = Ae(() => T(Number(_) - s), [
+		T,
 		_,
 		s
 	]);
 	return we(() => () => {
-		w();
-	}, [w]), we(() => {
-		if (b === null) {
+		E();
+	}, [E]), we(() => {
+		if (S === null) {
 			g.current?.close();
 			return;
 		}
 		g.current?.open();
-	}, [b]), we(() => {
+	}, [S]), we(() => {
 		y.current = _;
 	}, [_]), we(() => {
-		e !== Number(y.current) && v(e.toString());
+		x.current = null, document.activeElement !== h.current && e !== Number(y.current) && v(e.toString());
 	}, [e]), /* @__PURE__ */ n("div", {
 		className: U("relative inline-block", u),
 		children: [/* @__PURE__ */ n("span", {
@@ -52732,25 +52744,25 @@ var n9 = {
 			children: [
 				/* @__PURE__ */ t(r9, {
 					size: d,
-					disabled: !P,
+					disabled: !I,
 					"aria-label": "-",
 					onClick: () => {
-						T(-s);
+						D(-s);
 					},
 					onMouseDown: () => {
-						D(-s);
+						k(-s);
 					},
 					onTouchStart: () => {
-						D(-s);
+						k(-s);
 					},
 					onMouseUp: () => {
-						m.current = !1, w();
+						m.current = !1, E();
 					},
 					onTouchEnd: () => {
-						m.current = !1, w();
+						m.current = !1, E();
 					},
 					onMouseLeave: () => {
-						il.isMobile || (m.current = !1, w());
+						il.isMobile || (m.current = !1, E());
 					},
 					onContextMenu: (e) => e.preventDefault(),
 					children: /* @__PURE__ */ t(ie, { className: "text-content-primary h-4 w-4" })
@@ -52762,33 +52774,33 @@ var n9 = {
 					type: "number",
 					className: H(p ? "size-h-400" : "size-h-500", "component-500 border-misc-border bg-surface-high text-content-primary w-10 border-0 border-y p-0 text-center focus:ring-0", "focus-visible:border-content-accent focus-visible:border focus-visible:outline-hidden", "focus-visible:ring-misc-focus-indicator focus-visible:misc-border-size-focus-ring focus-visible:rounded-150", "focus-visible:relative focus-visible:z-10", "group-hover:not-focus-visible:border-misc-border-hover", "group-focus-visible:not-focus-visible:border-misc-border-hover", "group-disabled:opacity-30"),
 					value: _,
-					onFocus: M,
-					onChange: j,
-					onBlur: N,
-					onKeyDown: k,
-					onKeyUp: A
+					onFocus: P,
+					onChange: ee,
+					onBlur: F,
+					onKeyDown: M,
+					onKeyUp: N
 				}),
 				/* @__PURE__ */ t(r9, {
 					size: d,
-					disabled: !ee,
+					disabled: !te,
 					"aria-label": "+",
 					onClick: () => {
-						T(s);
+						D(s);
 					},
 					onMouseDown: () => {
-						D(s);
+						k(s);
 					},
 					onTouchStart: () => {
-						D(s);
+						k(s);
 					},
 					onMouseUp: () => {
-						m.current = !1, w();
+						m.current = !1, E();
 					},
 					onTouchEnd: () => {
-						m.current = !1, w();
+						m.current = !1, E();
 					},
 					onMouseLeave: () => {
-						il.isMobile || (m.current = !1, w());
+						il.isMobile || (m.current = !1, E());
 					},
 					onContextMenu: (e) => e.preventDefault(),
 					children: /* @__PURE__ */ t(i, { className: "text-content-primary h-4 w-4" })
@@ -52800,9 +52812,9 @@ var n9 = {
 			preventAutoFocus: !0,
 			children: /* @__PURE__ */ t(m_e, {
 				values: l,
-				selectedIndex: b,
+				selectedIndex: S,
 				onSelect: (e) => {
-					O(e), x(null);
+					A(e), C(null);
 				}
 			})
 		})]
@@ -53395,28 +53407,29 @@ var M_e = ({ title: e, summary: r, snapshot: i, className: a, ...o }) => /* @__P
 			})]
 		})]
 	});
-}, P_e = ({ titleBlock: e, children: r, columns: i = 3, showMoreLabel: a, ...o }) => {
-	let [s, c] = Me(!1), l = V(null), u = fe.toArray(r), d = i * 2, f = !s && !!a && u.length > d, p = () => {
-		let e = l.current;
-		Ie(() => c(!0)), e?.querySelector("a, button")?.focus();
+}, P_e = ({ titleBlock: e, children: r, columns: i = 3, showMoreLabel: a, background: o = "surface-default", ...s }) => {
+	let [c, l] = Me(!1), u = V(null), d = fe.toArray(r), f = i * 2, p = !c && !!a && d.length > f, m = () => {
+		let e = u.current;
+		Ie(() => l(!0)), e?.querySelector("a, button")?.focus();
 	};
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ n(u9, {
+		variant: o,
 		className: H("pt-e700 pb-e1000 gap-i600 flex flex-col", "px-4 sm:px-6 md:px-8 xl:px-10"),
-		...o,
+		...s,
 		children: [e, /* @__PURE__ */ n("div", {
 			className: "mx-auto flex w-full flex-col gap-10 xl:max-w-[1200px]",
 			children: [/* @__PURE__ */ t("div", {
 				className: H("grid grid-cols-1 gap-y-6", "sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8", "lg:grid-cols-3", { "xl:grid-cols-4": i === 4 }),
-				children: u.map((e, n) => /* @__PURE__ */ t("div", {
-					ref: f && n === d ? l : void 0,
-					className: H("flex", { hidden: f && n >= d }),
+				children: d.map((e, n) => /* @__PURE__ */ t("div", {
+					ref: p && n === f ? u : void 0,
+					className: H("flex", { hidden: p && n >= f }),
 					children: e
 				}, n))
-			}), f && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(Vu, {
+			}), p && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(Vu, {
 				as: "button",
 				type: "button",
 				variant: "accent",
-				onClick: p,
+				onClick: m,
 				children: a
 			}) })]
 		})]
@@ -55456,11 +55469,12 @@ var rye = Object.assign(R9, {
 			})
 		]
 	});
-}, dye = ({ title: e, overline: r, placement: i = "default" }) => /* @__PURE__ */ n("div", {
-	className: H("mx-auto flex w-full max-w-[1200px] flex-col gap-1", {
+}, dye = ({ title: e, overline: r, placement: i = "default", className: a, ...o }) => /* @__PURE__ */ n("div", {
+	className: U("mx-auto flex w-full max-w-[1200px] flex-col gap-1", {
 		"items-center text-center": i === "default",
 		"items-start text-start": i === "side"
-	}),
+	}, a),
+	...o,
 	children: [!!r && /* @__PURE__ */ t("div", {
 		className: "component-700 text-content-accent max-w-[600px]",
 		children: r

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.523",
+  "version": "0.1.525",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [