@fluid-app/portal-sdk 0.1.302 → 0.1.303

package/dist/{SubscriptionsScreen-CaDhBQSX.mjs → SubscriptionsScreen-CwtJ0PHm.mjs}

@@ -14,7 +14,7 @@ import { a as AddressFormDialog, c as PaymentIcon, f as ConfirmActionDialog, h a
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AlertCircle, CalendarDays, CalendarIcon, ChevronDown, ChevronLeft, ChevronRight, ImageOff, Pause, Play, Repeat, RotateCcw, SkipForward, XCircle } from "lucide-react";
+import { AlertCircle, CalendarDays, CalendarIcon, ChevronDown, ChevronLeft, ChevronRight, ImageOff, Minus, Pause, Play, Plus, Repeat, RotateCcw, SkipForward, XCircle } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 //#region ../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/getDefaultOptions.js
@@ -2693,6 +2693,8 @@ const subscriptionsDomain = 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",
@@ -4148,7 +4150,7 @@ function SubscriptionDetailSkeleton() {
 		})]
 	});
 }
-function QuantityInput({ inputId, quantity, isUpdatingQuantity, onQuantityChange, quantityAriaLabel }) {
+function QuantityInput({ inputId, quantity, maxQuantity, isUpdatingQuantity, onQuantityChange, quantityAriaLabel, decrementAriaLabel, incrementAriaLabel }) {
 	const inputRef = useRef(null);
 	const [inputValue, setInputValue] = useState(String(quantity));
 	const focusEntryQuantityRef = useRef(quantity);
@@ -4171,41 +4173,79 @@ function QuantityInput({ inputId, quantity, isUpdatingQuantity, onQuantityChange
 			focusEntryQuantityRef.current = next;
 		}, 500);
 	};
-	return /* @__PURE__ */ jsx(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: cn$1("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 = cn$1("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__ */ jsxs("div", {
+		className: cn$1("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__ */ jsx("button", {
+				type: "button",
+				onClick: () => stepBy(-1),
+				disabled: decrementDisabled,
+				"aria-label": decrementAriaLabel,
+				"aria-controls": inputId,
+				className: cn$1(stepperButtonClass, decrementDisabled && "opacity-40"),
+				children: /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" })
+			}),
+			/* @__PURE__ */ jsx(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__ */ jsx("button", {
+				type: "button",
+				onClick: () => stepBy(1),
+				disabled: incrementDisabled,
+				"aria-label": incrementAriaLabel,
+				"aria-controls": inputId,
+				className: cn$1(stepperButtonClass, incrementDisabled && "opacity-40"),
+				children: /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" })
+			})
+		]
 	});
 }
 function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBillDate, canEditQuantity = false, onQuantityChange, isUpdatingQuantity = false }) {
@@ -4314,9 +4354,12 @@ function SubscriptionItemsSection({ subscription, displayQuantity, displayNextBi
 							}), /* @__PURE__ */ 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")
 							})]
 						})]
 					})
@@ -5699,4 +5742,4 @@ const subscriptionsScreenPropertySchema = {
 //#endregion
 export { SubscriptionsScreen_exports as n, subscriptionsScreenPropertySchema as r, SubscriptionsScreen as t };
 
-//# sourceMappingURL=SubscriptionsScreen-CaDhBQSX.mjs.map
+//# sourceMappingURL=SubscriptionsScreen-CwtJ0PHm.mjs.map