@fluid-app/portal-sdk 0.1.301 → 0.1.303

package/dist/{SubscriptionsScreen-YL-1_nFd.cjs → SubscriptionsScreen-BxnLHm31.cjs}

@@ -2754,6 +2754,8 @@ const subscriptionsDomain = require_static_dict_adapter.createDomainTranslations
 		no_image: "No image",
 		quantity_label: "Quantity",
 		quantity_aria: "Quantity",
+		decrease_quantity_aria: "Decrease quantity",
+		increase_quantity_aria: "Increase quantity",
 		subtotal: "Subtotal",
 		discount: "Discount",
 		total_label: "Total",
@@ -4209,7 +4211,7 @@ function SubscriptionDetailSkeleton() {
 		})]
 	});
 }
-function QuantityInput({ inputId, quantity, isUpdatingQuantity, onQuantityChange, quantityAriaLabel }) {
+function QuantityInput({ inputId, quantity, maxQuantity, isUpdatingQuantity, onQuantityChange, quantityAriaLabel, decrementAriaLabel, incrementAriaLabel }) {
 	const inputRef = (0, react.useRef)(null);
 	const [inputValue, setInputValue] = (0, react.useState)(String(quantity));
 	const focusEntryQuantityRef = (0, react.useRef)(quantity);
@@ -4232,41 +4234,79 @@ function QuantityInput({ inputId, quantity, isUpdatingQuantity, onQuantityChange
 			focusEntryQuantityRef.current = next;
 		}, 500);
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
-		ref: inputRef,
-		id: inputId,
-		type: "number",
-		min: 1,
-		step: 1,
-		value: inputValue,
-		onFocus: () => {
-			focusEntryQuantityRef.current = quantity;
-		},
-		onChange: (e) => {
-			const raw = e.target.value;
-			setInputValue(raw);
-			if (raw === "") {
-				if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-				return;
-			}
-			const next = parseInt(raw, 10);
-			if (Number.isFinite(next) && next > 0) scheduleCommit(next);
-		},
-		onBlur: () => {
-			if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-			const parsed = parseInt(inputValue, 10);
-			if (Number.isFinite(parsed) && parsed > 0) {
-				if (parsed !== quantity) onQuantityChange(parsed);
-				focusEntryQuantityRef.current = parsed;
-			} else {
-				const restore = focusEntryQuantityRef.current;
-				setInputValue(String(restore));
-				if (restore !== quantity) onQuantityChange(restore);
-			}
-		},
-		readOnly: isUpdatingQuantity,
-		className: require_src.cn("border-border bg-background h-10 w-16 border text-center", isUpdatingQuantity && "opacity-60"),
-		"aria-label": quantityAriaLabel
+	const parsedInput = parseInt(inputValue, 10);
+	const currentValue = Number.isFinite(parsedInput) && parsedInput > 0 ? parsedInput : quantity;
+	const decrementDisabled = isUpdatingQuantity || currentValue <= 1;
+	const incrementDisabled = isUpdatingQuantity || maxQuantity != null && currentValue >= maxQuantity;
+	const clampToBounds = (n) => maxQuantity != null ? Math.min(maxQuantity, Math.max(1, n)) : Math.max(1, n);
+	const stepBy = (delta) => {
+		const clamped = clampToBounds(currentValue + delta);
+		if (clamped === currentValue) return;
+		setInputValue(String(clamped));
+		scheduleCommit(clamped);
+	};
+	const stepperButtonClass = require_src.cn("text-muted-foreground hover:text-foreground hover:bg-muted flex h-7 w-7 shrink-0 items-center justify-center rounded-full shadow-xs disabled:cursor-not-allowed");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_src.cn("border-border bg-background focus-within:border-ring focus-within:ring-ring/50 flex h-7.5 items-center justify-between rounded-2xl border focus-within:ring-[3px]", isUpdatingQuantity && "opacity-60"),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => stepBy(-1),
+				disabled: decrementDisabled,
+				"aria-label": decrementAriaLabel,
+				"aria-controls": inputId,
+				className: require_src.cn(stepperButtonClass, decrementDisabled && "opacity-40"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, { className: "h-3 w-3" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+				ref: inputRef,
+				id: inputId,
+				type: "number",
+				min: 1,
+				max: maxQuantity ?? void 0,
+				step: 1,
+				value: inputValue,
+				onFocus: () => {
+					focusEntryQuantityRef.current = currentValue;
+				},
+				onChange: (e) => {
+					const raw = e.target.value;
+					setInputValue(raw);
+					if (raw === "") {
+						if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+						return;
+					}
+					const next = parseInt(raw, 10);
+					if (Number.isFinite(next) && next > 0) scheduleCommit(clampToBounds(next));
+				},
+				onBlur: () => {
+					if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+					const parsed = parseInt(inputValue, 10);
+					if (Number.isFinite(parsed) && parsed > 0) {
+						const clamped = clampToBounds(parsed);
+						if (clamped !== parsed) setInputValue(String(clamped));
+						if (clamped !== quantity) onQuantityChange(clamped);
+						focusEntryQuantityRef.current = clamped;
+					} else {
+						const restore = focusEntryQuantityRef.current;
+						setInputValue(String(restore));
+						if (restore !== quantity) onQuantityChange(restore);
+					}
+				},
+				readOnly: isUpdatingQuantity,
+				className: "text-foreground h-7 w-10 rounded-none border-0 bg-transparent px-0 text-center text-xs font-semibold shadow-none [-moz-appearance:textfield] focus-visible:border-0 focus-visible:ring-0 md:text-xs [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+				"aria-label": quantityAriaLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => stepBy(1),
+				disabled: incrementDisabled,
+				"aria-label": incrementAriaLabel,
+				"aria-controls": inputId,
+				className: require_src.cn(stepperButtonClass, incrementDisabled && "opacity-40"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "h-3 w-3" })
+			})
+		]
 	});
 }
 function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBillDate, canEditQuantity = false, onQuantityChange, isUpdatingQuantity = false }) {
@@ -4375,9 +4415,12 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuantityInput, {
 								inputId: quantityInputId,
 								quantity,
+								maxQuantity: subscription.subscription_plan.max_quantity,
 								isUpdatingQuantity,
 								onQuantityChange,
-								quantityAriaLabel: t("quantity_aria")
+								quantityAriaLabel: t("quantity_aria"),
+								decrementAriaLabel: t("decrease_quantity_aria"),
+								incrementAriaLabel: t("increase_quantity_aria")
 							})]
 						})]
 					})
@@ -5767,4 +5810,4 @@ Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
 	}
 });
 
-//# sourceMappingURL=SubscriptionsScreen-YL-1_nFd.cjs.map
+//# sourceMappingURL=SubscriptionsScreen-BxnLHm31.cjs.map