Number stepper

"use client";

import * as React from "react";
import { MinusIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

type NumberStepperProps = Omit<
  React.ComponentProps<typeof Input>,
  "type" | "value" | "defaultValue" | "onChange" | "size" | "min" | "max" | "step"
> & {
  /** Controlled value. Leave out for an uncontrolled field. */
  value?: number;
  /** Starting value for the uncontrolled form. */
  defaultValue?: number;
  /** Fires with the new number after a step, a typed value commits or a clamp. */
  onValueChange?: (value: number) => void;
  /** Lowest value. The minus button disables here. */
  min?: number;
  /** Highest value. The plus button disables here. */
  max?: number;
  /** Amount each step adds or removes. */
  step?: number;
  /** Accessible name for the field, for example "Quantity". */
  label?: string;
  /** Control height. sm is 28px, default is 32px. */
  size?: "sm" | "default";
};

/**
 * A number field with a minus and a plus button inside one border.
 * Arrow keys step, typed values clamp to min and max on blur or Enter.
 */
export function NumberStepper({
  value,
  defaultValue = 0,
  onValueChange,
  min = -Infinity,
  max = Infinity,
  step = 1,
  label,
  size = "default",
  disabled,
  className,
  onKeyDown,
  onBlur,
  ...props
}: NumberStepperProps) {
  const [inner, setInner] = React.useState(defaultValue);
  const controlled = value !== undefined;
  const current = controlled ? value : inner;
  const [text, setText] = React.useState(String(current));
  const [editing, setEditing] = React.useState(false);
  const decimals = (String(step).split(".")[1] ?? "").length;

  const clamp = (n: number) => Number(Math.min(max, Math.max(min, n)).toFixed(decimals));

  const commit = (n: number) => {
    const next = clamp(n);
    if (!controlled) setInner(next);
    if (next !== current) onValueChange?.(next);
    setText(String(next));
  };

  const nudge = (direction: 1 | -1) => commit(current + direction * step);

  const shown = editing ? text : String(current);
  const small = size === "sm";

  return (
    <div
      data-slot="number-stepper"
      data-size={size}
      className={cn(
        "inline-flex items-stretch overflow-hidden rounded-lg border border-input bg-transparent shadow-xs transition-colors has-[input:disabled]:opacity-50 has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-ring/50 dark:bg-input/30",
        small ? "h-7" : "h-8",
        className,
      )}
    >
      <Button
        type="button"
        variant="ghost"
        size={small ? "icon-sm" : "icon"}
        aria-label="Decrease"
        tabIndex={-1}
        disabled={disabled || current <= min}
        onClick={() => nudge(-1)}
        className="h-full rounded-none border-0"
      >
        <MinusIcon aria-hidden="true" />
      </Button>
      <Input
        type="number"
        inputMode="decimal"
        value={shown}
        min={Number.isFinite(min) ? min : undefined}
        max={Number.isFinite(max) ? max : undefined}
        step={step}
        aria-label={label}
        disabled={disabled}
        onFocus={() => {
          setText(String(current));
          setEditing(true);
        }}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={(e) => {
          onKeyDown?.(e);
          if (e.defaultPrevented) return;
          if (e.key === "ArrowUp" || e.key === "ArrowDown") {
            e.preventDefault();
            nudge(e.key === "ArrowUp" ? 1 : -1);
          } else if (e.key === "Enter") {
            e.currentTarget.blur();
          }
        }}
        onBlur={(e) => {
          onBlur?.(e);
          setEditing(false);
          const parsed = Number(text);
          commit(text.trim() === "" || Number.isNaN(parsed) ? current : parsed);
        }}
        className={cn(
          "h-full w-12 [appearance:textfield] rounded-none border-0 bg-transparent px-1 text-center font-mono tabular-nums shadow-none focus-visible:border-transparent focus-visible:ring-0 disabled:bg-transparent disabled:opacity-100 dark:bg-transparent dark:disabled:bg-transparent [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
          small ? "text-xs md:text-xs" : "text-sm md:text-sm",
        )}
        {...props}
      />
      <Button
        type="button"
        variant="ghost"
        size={small ? "icon-sm" : "icon"}
        aria-label="Increase"
        tabIndex={-1}
        disabled={disabled || current >= max}
        onClick={() => nudge(1)}
        className="h-full rounded-none border-0"
      >
        <PlusIcon aria-hidden="true" />
      </Button>
    </div>
  );
}