Aurora Number Input

1"use client"
2 
3/**
4 * Aurora NumberInput — stepper control (decrement · value · increment).
5 *
6 * Visual layer is ported from the Claude Design source so it renders
7 * pixel-identical in dark + `.light`: square 32px neutral stepper buttons
8 * flanking a lit, accent-ringed center field that holds the value. The
9 * CSS reads only `--aurora-*` tokens.
10 *
11 * Architecture stays shadcn-compatible: controlled/uncontrolled value,
12 * `min`/`max`/`step` clamping, `onValueChange`, `forwardRef`, `displayName`,
13 * full native input prop pass-through, and a11y labels on the steppers.
14 */
15 
16import * as React from "react"
17import { Minus, Plus } from "lucide-react"
18import { Button } from "./button"
19import { Input } from "./input"
20 
21export interface NumberInputProps
22  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "size"> {
23  value?: number
24  defaultValue?: number
25  min?: number
26  max?: number
27  step?: number
28  onValueChange?: (value: number) => void
29}
30 
31// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
32 
33function NumberInput({ ref, value, defaultValue = 0, min, max, step = 1, onValueChange, className, ...props }: NumberInputProps & { ref?: React.Ref<HTMLInputElement> }) {
34    const controlled = value !== undefined
35    const [internalValue, setInternalValue] = React.useState(defaultValue)
36    const current = controlled ? value : internalValue
37 
38    function clamp(next: number) {
39      if (min !== undefined && next < min) return min
40      if (max !== undefined && next > max) return max
41      return next
42    }
43 
44    function commit(next: number) {
45      const clamped = clamp(next)
46      if (!controlled) setInternalValue(clamped)
47      onValueChange?.(clamped)
48    }
49 
50    return (
51      <div className="aurora-number-input">
52        <Button
53          type="button"
54          variant="neutral"
55          size="sm"
56          aria-label="Decrease value"
57          onClick={() => commit(current - step)}
58          disabled={props.disabled || (min !== undefined && current <= min)}
59          style={{ width: 32, height: 32, padding: 0, borderRadius: 9 }}
60        >
61          <Minus className="size-3.5" aria-hidden />
62        </Button>
63        <Input
64          ref={ref}
65          unstyled
66          type="number"
67          value={current}
68          min={min}
69          max={max}
70          step={step}
71          onChange={(event) => commit(Number(event.target.value))}
72// … truncated