Quantity Stepper Button

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
"use client";
 
import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
import { Minus, Plus } from "lucide-react";
 
export type QuantityStepperButtonProps = Readonly<
  {
    value?: number;
    min?: number;
    max?: number;
    onChange?: (value: number) => void;
  } & Omit<ComponentPropsWithoutRef<"div">, "onChange">
>;
 
// Quantity stepper — minus, count, plus in one inline control.
export const QuantityStepperButton = forwardRef<
  HTMLDivElement,
  QuantityStepperButtonProps
>(
  (
    {
      className,
      value: defaultValue = 1,
      min = 0,
      max = 99,
      onChange,
      ...props
    },
    ref,
  ) => {
    const [value, setValue] = useState(defaultValue);
 
    const update = (next: number) => {
      const clamped = Math.min(max, Math.max(min, next));
      setValue(clamped);
      onChange?.(clamped);
    };
 
    return (
      <div
        ref={ref}
        data-slot="quantity-stepper-button"
        className={cn(
          "inline-flex h-11 items-stretch overflow-hidden rounded-xl border border-neutral-200 bg-white font-sans text-sm font-medium shadow-sm select-none",
          className,
        )}
        {...props}
      >
        <button
          type="button"
          aria-label="Decrease quantity"
          disabled={value <= min}
          onClick={() => update(value - 1)}
          className="flex w-11 cursor-pointer items-center justify-center text-neutral-500 transition-colors hover:bg-neutral-50 disabled:cursor-default disabled:opacity-30"
        >
          <Minus size={15} strokeWidth={2} />
        </button>
 
        <span
          className="flex min-w-10 items-center justify-center border-x border-neutral-100 px-2 tabular-nums text-neutral-900"
          aria-live="polite"
        >
          {value}
        </span>
 
        <button
          type="button"
          aria-label="Increase quantity"
          disabled={value >= max}
          onClick={() => update(value + 1)}
          className="flex w-11 cursor-pointer items-center justify-center text-neutral-500 transition-colors hover:bg-neutral-50 disabled:cursor-default disabled:opacity-30"
        >
          <Plus size={15} strokeWidth={2} />
        </button>
      </div>
    );
  },
);
 
QuantityStepperButton.displayName = "QuantityStepperButton";