// @design-system: primitives/QuantityStepper
// Registered at /design-system#quantitystepper-primitive
'use client';
import { useCallback } from 'react';
import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';
/** Props for the QuantityStepper component */
export interface QuantityStepperProps {
/** Current value (controlled). */
value: number;
/** Minimum allowed value. @default 0 */
min?: number;
/** Maximum allowed value. */
max?: number;
/** Called when value changes. */
onChange: (value: number) => void;
/** Accessible label for the group (e.g. deal title for screen readers). */
label: string;
/** When true, disables all interactions. */
disabled?: boolean;
/** Additional class names. */
className?: string;
}
/**
* QuantityStepper — discrete +/- stepper for cart quantity control.
*
* Distinct from NumberInput: no text input, display-only count between two buttons.
* Supports keyboard ArrowUp/ArrowDown on the count display, disables at bounds.
*
* @example
* ```tsx
*
* ```
*/
export function QuantityStepper({
value,
min = 0,
max,
onChange,
label,
disabled = false,
className,
}: QuantityStepperProps) {
const t = useT('cart');
const decrement = useCallback(() => {
if (disabled) return;
const next = value - 1;
if (min !== undefined && next < min) return;
onChange(next);
}, [disabled, value, min, onChange]);
const increment = useCallback(() => {
if (disabled) return;
const next = value + 1;
if (max !== undefined && next > max) return;
onChange(next);
}, [disabled, value, max, onChange]);
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (e.key === 'ArrowUp') {
e.preventDefault();
increment();
} else if (e.key === 'ArrowDown') {
e.preventDefault();
decrement();
}
},
[increment, decrement],
);
const atMin = min !== undefined && value <= min;
const atMax = max !== undefined && value >= max;
return (
{/* Display-only count, keyboard navigable */}
{value}
);
}