## Installation ```bash npx shadcn@latest add https://ui.cravejs.com/registry/quantity-selector.json ``` ## Usage ```tsx import { QuantitySelector } from "@/components/restaurant/cart/quantity-selector"; export function QuantitySelectorExample() { const [quantity, setQuantity] = useState(1); return ( ); } ``` ## Variants The Quantity Selector component supports different visual styles: ### Default The default variant with standard sizing and controls. ```tsx ``` ### Compact A smaller variant for tight spaces like cart items. ```tsx ``` ### Large A larger variant for prominent displays. ```tsx ``` ### Inline An inline variant that fits within text flow. ```tsx ``` ## Props | Prop | Type | Default | Description | | ------------ | ----------------------------------------------- | ------------ | -------------------------------------------- | | `value` | `number` | - | **Required.** Current quantity value | | `onChange` | `(value: number) => void` | - | **Required.** Callback when quantity changes | | `min` | `number` | `1` | Minimum allowed value | | `max` | `number` | `99` | Maximum allowed value | | `step` | `number` | `1` | Increment/decrement step | | `variant` | `"default" \| "compact" \| "large" \| "inline"` | `"default"` | Visual variant | | `disabled` | `boolean` | `false` | Disable all controls | | `showLabel` | `boolean` | `false` | Show quantity label | | `label` | `string` | `"Quantity"` | Label text | | `hideInput` | `boolean` | `false` | Hide direct input field | | `allowZero` | `boolean` | `false` | Allow zero quantity | | `showStock` | `boolean` | `false` | Show stock availability | | `stockCount` | `number` | - | Available stock count | | `loading` | `boolean` | `false` | Show loading state | | `className` | `string` | - | Additional CSS classes | ## Examples ### With Stock Display ```tsx ``` ### Cart Item Quantity ```tsx

Classic Burger updateCartItem(itemId, newQty)} allowZero={true} /> ${(price * itemQuantity).toFixed(2)}

``` ### Bulk Order Selector ```tsx ``` ### With Loading State ```tsx { setLoading(true); await updateQuantity(newQty); setLoading(false); }} loading={loading} disabled={loading} /> ``` ### Mobile Optimized ```tsx ``` ## Features - **Increment/Decrement**: Easy +/- controls - **Direct Input**: Type quantity directly - **Validation**: Min/max limits with validation - **Stock Awareness**: Optional stock display - **Keyboard Support**: Arrow keys and number input - **Mobile Friendly**: Large touch targets - **Loading States**: Show async operations - **Zero Quantity**: Optional support for removal ## Keyboard Shortcuts The component supports keyboard navigation: - `ArrowUp` - Increase quantity - `ArrowDown` - Decrease quantity - `Home` - Set to minimum - `End` - Set to maximum - `Enter` - Confirm input value ## State Management ### With Cart Hook ```tsx import { useCart } from "@/hooks/use-cart"; export function CartItemQuantity({ itemId }) { const { getItem, updateQuantity } = useCart(); const item = getItem(itemId); return ( updateQuantity(itemId, qty)} allowZero={true} max={item.maxPerOrder} /> ); } ``` ### With Optimistic Updates ```tsx const [quantity, setQuantity] = useState(1); const [isUpdating, setIsUpdating] = useState(false); const handleQuantityChange = async (newQuantity: number) => { // Optimistic update setQuantity(newQuantity); setIsUpdating(true); try { await api.updateCartQuantity(itemId, newQuantity); } catch (error) { // Revert on error setQuantity(quantity); toast.error("Failed to update quantity"); } finally { setIsUpdating(false); } }; ``` ## Validation ### Custom Validation ```tsx { if (value > stockCount) { return `Only ${stockCount} items available`; } if (value > maxPerCustomer) { return `Maximum ${maxPerCustomer} per customer`; } return true; }} /> ``` ### With Error Display ```tsx const [error, setError] = useState("")

{ if (qty > 10) { setError("Maximum 10 items per order") } else { setError("") setQuantity(qty) } }} max={10} /> {error && (

{error}

)}

``` ## Accessibility The Quantity Selector follows accessibility best practices: - ARIA labels for increment/decrement buttons - Keyboard navigation support - Screen reader announcements for changes - Clear focus indicators - Disabled state handling ## Styling The component uses Tailwind CSS classes and can be customized through: - CSS custom properties for colors - The `className` prop for wrapper styling - Variant-specific classes - Custom button styling ## Related Components - [Cart](/docs/components/cart/cart) - Shopping cart with quantities - [Cart Item](/docs/components/cart/cart-item) - Individual cart items - [Menu Item Card](/docs/components/menu/menu-item-card) - Menu items with quantity - [Modifier Selector](/docs/components/menu/modifier-selector) - Item customization