"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface QuantitySelectorProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: number;
  defaultValue?: number;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  onChange?: (nextValue: number) => void;
}

const clampValue = (value: number, min?: number, max?: number) => {
  const lowerBound = min ?? Number.NEGATIVE_INFINITY;
  const upperBound = max ?? Number.POSITIVE_INFINITY;
  return Math.min(upperBound, Math.max(lowerBound, value));
};

export function QuantitySelector({
  value,
  defaultValue,
  min = 1,
  max,
  step = 1,
  disabled,
  onChange,
  className,
  ...props
}: QuantitySelectorProps) {
  const isControlled = value !== undefined;
  const [internalValue, setInternalValue] = React.useState(
    clampValue(defaultValue ?? min, min, max)
  );

  const currentValue = clampValue(isControlled ? value ?? min : internalValue, min, max);

  const updateValue = (nextValue: number) => {
    const clamped = clampValue(nextValue, min, max);
    if (!isControlled) {
      setInternalValue(clamped);
    }
    onChange?.(clamped);
  };

  const isAtMin = currentValue <= min;
  const isAtMax = max !== undefined && currentValue >= max;

  return (
    <div
      className={cn(
        "inline-flex items-center gap-2 rounded-full border border-border bg-card px-2 py-1",
        className
      )}
      {...props}
    >
      <button
        type="button"
        className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-muted text-foreground transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-50"
        onClick={() => updateValue(currentValue - step)}
        disabled={disabled || isAtMin}
        aria-label="Decrease quantity"
      >
        <MinusIcon />
      </button>
      <input
        type="number"
        min={min}
        max={max}
        step={step}
        value={currentValue}
        disabled={disabled}
        onChange={(event) => {
          const nextValue = Number(event.target.value);
          if (Number.isNaN(nextValue)) {
            return;
          }
          updateValue(nextValue);
        }}
        onBlur={() => updateValue(currentValue)}
        className="w-12 bg-transparent text-center text-sm font-medium text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:text-muted-foreground"
        aria-label="Quantity"
      />
      <button
        type="button"
        className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-muted text-foreground transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:pointer-events-none disabled:opacity-50"
        onClick={() => updateValue(currentValue + step)}
        disabled={disabled || isAtMax}
        aria-label="Increase quantity"
      >
        <PlusIcon />
      </button>
    </div>
  );
}

function MinusIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="h-4 w-4">
      <path
        d="M5 12h14"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
      />
    </svg>
  );
}

function PlusIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className="h-4 w-4">
      <path
        d="M12 5v14M5 12h14"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
      />
    </svg>
  );
}
Quantity Selector

Dependencies

Files

Installation
