@etus/ui 0.1.0

package/src/components/forms/NumberInput/README.md

@@ -0,0 +1,766 @@
+# NumberInput
+
+## Visao Geral
+
+O **NumberInput** e um componente de entrada numerica do Design System ETUS, projetado para capturar valores numericos com controles de incremento/decremento integrados. Oferece uma experiencia de usuario aprimorada em comparacao com inputs numericos nativos, com botoes de stepper customizaveis e suporte completo a validacao.
+
+### Casos de Uso
+
+- Entrada de quantidades (e-commerce, inventario)
+- Configuracao de valores numericos (idade, preco, porcentagem)
+- Formularios com campos numericos
+- Spinners de quantidade com min/max/step
+- Entradas de valores monetarios
+
+### Classificacao
+
+**Categoria:** Atom (Forms)
+**Dependencias:** `lucide-react`, `class-variance-authority`
+
+---
+
+## Design Specs
+
+### Variantes (`variant`)
+
+| Variante | Uso | Tokens |
+|----------|-----|--------|
+| `default` | Uso geral | `bg-background`, `border-input` |
+| `filled` | Enfase visual | `bg-muted`, sem borda |
+| `flushed` | Minimalista | Apenas borda inferior |
+| `unstyled` | Customizacao total | Sem estilos visuais |
+
+### Tamanhos (`size`)
+
+| Tamanho | Altura | Stepper Width | Uso |
+|---------|--------|---------------|-----|
+| `xs` | Compacto | `w-5` | Tabelas densas |
+| `sm` | `h-8` (32px) | `w-6` | Espacos compactos |
+| `md` | `h-9` (36px) | `w-7` | Uso geral |
+| `lg` | `h-10` (40px) | `w-8` | Formularios destacados |
+| `xl` | Grande | `w-9` | CTAs, inputs principais |
+
+### Estados
+
+| Estado | Classes/Atributos | Comportamento |
+|--------|-------------------|---------------|
+| Default | - | Aparencia base |
+| Hover | `hover:border-ring` | Borda destaca |
+| Focus | `focus-visible:ring-[3px]` | Ring de 3px com `ring-ring/50` |
+| Disabled | `disabled:opacity-50` | 50% opacidade, sem pointer events |
+| Invalid | `aria-invalid:ring-destructive/20` | Ring vermelho |
+
+### Tokens Utilizados
+
+```css
+/* Cores */
+--background        /* Fundo do input */
+--foreground        /* Texto */
+--muted-foreground  /* Icones stepper */
+--border            /* Borda */
+--input             /* Borda input/stepper */
+--ring              /* Focus ring */
+--muted             /* Hover stepper */
+
+/* Espacamento */
+pr-8               /* Padding direito (stepper md) */
+
+/* Tipografia */
+text-sm            /* 14px */
+
+/* Bordas */
+rounded-md         /* var(--radius) */
+
+/* Transicoes */
+transition-colors  /* Cores */
+```
+
+### data-slot
+
+```html
+<div data-slot="number-input-wrapper">
+  <input data-slot="number-input" />
+  <div data-slot="number-stepper">
+    <button data-slot="increment-button" />
+    <button data-slot="decrement-button" />
+  </div>
+</div>
+```
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Tamanho visual do input |
+| `variant` | `"default" \| "filled" \| "flushed" \| "unstyled"` | `"default"` | Estilo visual |
+| `showStepper` | `boolean` | `true` | Exibe botoes de incremento/decremento |
+| `incrementIcon` | `ReactNode` | `<PlusIcon />` | Icone customizado para incremento |
+| `decrementIcon` | `ReactNode` | `<MinusIcon />` | Icone customizado para decremento |
+| `onIncrement` | `() => void` | - | Callback ao clicar em incrementar |
+| `onDecrement` | `() => void` | - | Callback ao clicar em decrementar |
+| `min` | `number` | - | Valor minimo permitido |
+| `max` | `number` | - | Valor maximo permitido |
+| `step` | `number` | `1` | Incremento/decremento por clique |
+| `disabled` | `boolean` | `false` | Desabilita o input e botoes |
+| `className` | `string` | - | Classes CSS adicionais |
+| `ref` | `Ref<HTMLInputElement>` | - | Referencia ao elemento DOM |
+
+> Herda todas as props de `React.ComponentProps<"input">` exceto `type` e `size`
+
+### Callbacks
+
+| Callback | Tipo | Descricao |
+|----------|------|-----------|
+| `onChange` | `(event: ChangeEvent) => void` | Disparado ao mudar valor |
+| `onIncrement` | `() => void` | Disparado ao clicar incrementar |
+| `onDecrement` | `() => void` | Disparado ao clicar decrementar |
+| `onBlur` | `(event: FocusEvent) => void` | Disparado ao perder foco |
+| `onFocus` | `(event: FocusEvent) => void` | Disparado ao receber foco |
+
+### TypeScript
+
+```typescript
+import type { NumberInputProps } from "@etus/ui"
+import type { InputSize, InputVariant } from "@etus/ui"
+
+// NumberInputProps inclui:
+interface NumberInputProps {
+  size?: InputSize
+  variant?: InputVariant
+  showStepper?: boolean
+  incrementIcon?: ReactNode
+  decrementIcon?: ReactNode
+  onIncrement?: () => void
+  onDecrement?: () => void
+  // ... + todas as props de <input> exceto type e size
+}
+
+// Tipos derivados
+type InputSize = "xs" | "sm" | "md" | "lg" | "xl"
+type InputVariant = "default" | "filled" | "flushed" | "unstyled"
+```
+
+### Comparativo com Design Systems de Referencia
+
+#### Matriz de Features (12 Design Systems)
+
+| Feature | ETUS | Shadcn | Radix | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon |
+|---------|:----:|:------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|
+| **Stepper integrado** | X | - | - | X | - | X | X | - | - | - | X | X |
+| **Tamanhos** | 5 | - | - | 4 | 3 | 5 | 4 | 4 | - | - | 4 | 4 |
+| **Variantes** | 4 | - | - | 4 | 3 | 4 | 2 | 4 | - | - | 3 | 2 |
+| **min/max/step** | X | - | - | X | X | X | X | - | - | - | X | X |
+| **Custom icons** | X | - | - | - | - | X | - | - | - | - | - | - |
+| **Hide stepper** | X | - | - | X | - | X | X | - | - | - | X | X |
+| **Controlled** | X | - | - | X | X | X | X | - | - | - | X | X |
+| **data-slot** | X | X | - | - | - | - | - | X | - | - | - | - |
+| **CVA/cva** | X | X | - | - | - | - | - | X | - | - | - | - |
+| **Format/Parse** | - | - | - | - | - | X | X | - | - | - | - | - |
+| **Prefix/Suffix** | - | - | - | X | X | X | X | - | - | - | X | - |
+| **Keyboard arrows** | X | - | - | X | X | X | X | - | - | - | X | X |
+
+#### Comparativo de Props por Design System
+
+| Prop | ETUS | Chakra | MUI | Mantine | AntD | Fluent |
+|------|:----:|:------:|:---:|:-------:|:----:|:------:|
+| `size` | X | X | `size` | X | X | X |
+| `variant` | X | `variant` | `variant` | `variant` | - | `appearance` |
+| `disabled` | X | `isDisabled` | X | X | X | X |
+| `min/max` | X | X | `inputProps` | X | X | X |
+| `step` | X | X | `inputProps` | X | X | X |
+| `showStepper` | X | `hideControls` inv. | - | `hideControls` inv. | `controls` | `appearance` |
+| `precision` | - | X | - | X | `precision` | - |
+| `clampOnBlur` | - | X | - | X | - | - |
+| `formatter` | - | - | - | X | `formatter` | - |
+| `parser` | - | - | - | X | `parser` | - |
+| `prefix` | - | X | X | X | X | X |
+| `suffix` | - | X | X | X | X | - |
+
+#### Nomenclatura por Design System
+
+| Design System | Nome do Componente | Notas |
+|---------------|-------------------|-------|
+| **ETUS** | `NumberInput` | Stepper integrado |
+| **Chakra UI** | `NumberInput` | Compound component |
+| **MUI** | `TextField` + type="number" | Sem stepper nativo |
+| **Mantine** | `NumberInput` | Muito completo |
+| **Ant Design** | `InputNumber` | Enterprise features |
+| **Fluent UI** | `SpinButton` | Nome diferente |
+| **Carbon** | `NumberInput` | Padrao IBM |
+| **React Aria** | `useNumberField` | Hook approach |
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Uso |
+|----------|-----|
+| `type="number"` | Semantica nativa |
+| `aria-label` | Nos botoes stepper |
+| `aria-disabled` | Quando `disabled={true}` |
+| `aria-valuemin` | Valor minimo (prop `min`) |
+| `aria-valuemax` | Valor maximo (prop `max`) |
+| `aria-valuenow` | Valor atual |
+
+### Suporte a Teclado
+
+| Tecla | Acao |
+|-------|------|
+| `Tab` | Move foco para/do input |
+| `Arrow Up` | Incrementa valor |
+| `Arrow Down` | Decrementa valor |
+| `Page Up` | Incrementa valor (step maior) |
+| `Page Down` | Decrementa valor (step maior) |
+| `Home` | Define valor minimo |
+| `End` | Define valor maximo |
+
+### Focus Management
+
+```tsx
+// Botoes stepper tem tabIndex={-1}
+// Apenas o input recebe foco via Tab
+<button tabIndex={-1} aria-label="Increment value" />
+<button tabIndex={-1} aria-label="Decrement value" />
+```
+
+### Contraste de Cores
+
+Todos os pares de cores seguem WCAG 2.1 AA (minimo 4.5:1):
+
+| Elemento | Foreground | Background | Ratio |
+|----------|------------|------------|-------|
+| Input text | `--foreground` | `--background` | >= 4.5:1 |
+| Stepper icons | `--muted-foreground` | `--background` | >= 3:1 |
+| Focus ring | `--ring` | `--background` | >= 3:1 |
+
+### Screen Readers
+
+- Botoes stepper tem `aria-label` descritivo
+- Valor e anunciado ao mudar via eventos nativos
+- Input tem semantica `type="number"` nativa
+
+### Reduced Motion
+
+```tsx
+// Transicoes sao aplicadas apenas em cores
+transition-colors // Nao afeta motion
+```
+
+### Comparativo A11y (12 Design Systems)
+
+| Feature | ETUS | React Aria | Radix | Chakra | MUI | Mantine | AntD | Fluent | Carbon |
+|---------|:----:|:----------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:------:|
+| **ARIA completo** | ~ | X | - | X | ~ | ~ | ~ | X | X |
+| **Keyboard nav** | X | X | - | X | X | X | X | X | X |
+| **Focus visible** | X | X | - | X | X | X | X | X | X |
+| **aria-valuemin/max** | ~ | X | - | X | ~ | ~ | ~ | X | X |
+| **Live regions** | - | X | - | X | - | - | - | X | X |
+| **Screen reader tested** | - | X | - | ~ | X | ~ | ~ | X | X |
+
+**Legenda:** X = Suporte completo | ~ = Parcial/Manual | - = Nao suportado
+
+---
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { NumberInput } from "@etus/ui"
+
+function Example() {
+  return <NumberInput placeholder="Enter quantity" />
+}
+```
+
+### Com Min/Max/Step
+
+```tsx
+<NumberInput
+  min={0}
+  max={100}
+  step={5}
+  defaultValue={50}
+/>
+```
+
+### Sem Stepper
+
+```tsx
+<NumberInput showStepper={false} placeholder="Enter number" />
+```
+
+### Com Icones Customizados
+
+```tsx
+import { ChevronUp, ChevronDown } from "lucide-react"
+
+<NumberInput
+  incrementIcon={<ChevronUp className="size-4" />}
+  decrementIcon={<ChevronDown className="size-4" />}
+/>
+```
+
+### Tamanhos
+
+```tsx
+<NumberInput size="xs" placeholder="XS" />
+<NumberInput size="sm" placeholder="SM" />
+<NumberInput size="md" placeholder="MD" />
+<NumberInput size="lg" placeholder="LG" />
+<NumberInput size="xl" placeholder="XL" />
+```
+
+### Variantes
+
+```tsx
+<NumberInput variant="default" placeholder="Default" />
+<NumberInput variant="filled" placeholder="Filled" />
+<NumberInput variant="flushed" placeholder="Flushed" />
+<NumberInput variant="unstyled" placeholder="Unstyled" />
+```
+
+### Controlado
+
+```tsx
+import { useState } from "react"
+
+function ControlledExample() {
+  const [value, setValue] = useState("")
+
+  return (
+    <NumberInput
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      min={0}
+      max={10}
+    />
+  )
+}
+```
+
+### Com Callbacks Customizados
+
+```tsx
+function CustomCallbacks() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <NumberInput
+      value={count}
+      onIncrement={() => setCount((c) => Math.min(c + 1, 100))}
+      onDecrement={() => setCount((c) => Math.max(c - 1, 0))}
+      onChange={(e) => setCount(Number(e.target.value) || 0)}
+    />
+  )
+}
+```
+
+### Em Formulario
+
+```tsx
+import { useForm } from "react-hook-form"
+
+function FormExample() {
+  const { register, handleSubmit } = useForm()
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <label>
+        Quantity
+        <NumberInput
+          {...register("quantity", { valueAsNumber: true })}
+          min={1}
+          max={99}
+        />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+```
+
+### Com Label e Error
+
+```tsx
+import { Label } from "@etus/ui"
+
+<div className="space-y-2">
+  <Label htmlFor="price">Price</Label>
+  <NumberInput
+    id="price"
+    min={0}
+    step={0.01}
+    aria-invalid={!!error}
+    aria-describedby="price-error"
+  />
+  {error && (
+    <p id="price-error" className="text-sm text-destructive">
+      {error.message}
+    </p>
+  )}
+</div>
+```
+
+### Desabilitado
+
+```tsx
+<NumberInput disabled defaultValue={42} />
+```
+
+---
+
+## Testes
+
+### Testes Unitarios
+
+```tsx
+// NumberInput.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import { NumberInput } from "./NumberInput"
+
+describe("NumberInput", () => {
+  it("renders input with type number", () => {
+    render(<NumberInput />)
+    expect(screen.getByRole("spinbutton")).toBeInTheDocument()
+  })
+
+  it("applies size classes", () => {
+    render(<NumberInput size="lg" />)
+    expect(screen.getByRole("spinbutton")).toHaveClass("h-10")
+  })
+
+  it("shows stepper buttons by default", () => {
+    render(<NumberInput />)
+    expect(screen.getByLabelText("Increment value")).toBeInTheDocument()
+    expect(screen.getByLabelText("Decrement value")).toBeInTheDocument()
+  })
+
+  it("hides stepper when showStepper is false", () => {
+    render(<NumberInput showStepper={false} />)
+    expect(screen.queryByLabelText("Increment value")).not.toBeInTheDocument()
+  })
+
+  it("has data-slot attributes", () => {
+    render(<NumberInput />)
+    expect(screen.getByRole("spinbutton")).toHaveAttribute(
+      "data-slot",
+      "number-input"
+    )
+  })
+})
+```
+
+### Testes de Interacao
+
+```tsx
+describe("NumberInput interactions", () => {
+  it("increments value when clicking increment button", async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    render(<NumberInput defaultValue={5} onChange={onChange} />)
+
+    await user.click(screen.getByLabelText("Increment value"))
+    expect(screen.getByRole("spinbutton")).toHaveValue(6)
+  })
+
+  it("decrements value when clicking decrement button", async () => {
+    const user = userEvent.setup()
+
+    render(<NumberInput defaultValue={5} />)
+
+    await user.click(screen.getByLabelText("Decrement value"))
+    expect(screen.getByRole("spinbutton")).toHaveValue(4)
+  })
+
+  it("respects min value", async () => {
+    const user = userEvent.setup()
+
+    render(<NumberInput defaultValue={0} min={0} />)
+
+    await user.click(screen.getByLabelText("Decrement value"))
+    expect(screen.getByRole("spinbutton")).toHaveValue(0)
+  })
+
+  it("respects max value", async () => {
+    const user = userEvent.setup()
+
+    render(<NumberInput defaultValue={10} max={10} />)
+
+    await user.click(screen.getByLabelText("Increment value"))
+    expect(screen.getByRole("spinbutton")).toHaveValue(10)
+  })
+
+  it("uses custom step value", async () => {
+    const user = userEvent.setup()
+
+    render(<NumberInput defaultValue={0} step={5} />)
+
+    await user.click(screen.getByLabelText("Increment value"))
+    expect(screen.getByRole("spinbutton")).toHaveValue(5)
+  })
+
+  it("calls onIncrement callback", async () => {
+    const user = userEvent.setup()
+    const onIncrement = vi.fn()
+
+    render(<NumberInput onIncrement={onIncrement} />)
+
+    await user.click(screen.getByLabelText("Increment value"))
+    expect(onIncrement).toHaveBeenCalledTimes(1)
+  })
+
+  it("calls onDecrement callback", async () => {
+    const user = userEvent.setup()
+    const onDecrement = vi.fn()
+
+    render(<NumberInput onDecrement={onDecrement} />)
+
+    await user.click(screen.getByLabelText("Decrement value"))
+    expect(onDecrement).toHaveBeenCalledTimes(1)
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("NumberInput accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(<NumberInput aria-label="Quantity" />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("stepper buttons have aria-label", () => {
+    render(<NumberInput />)
+    expect(screen.getByLabelText("Increment value")).toBeInTheDocument()
+    expect(screen.getByLabelText("Decrement value")).toBeInTheDocument()
+  })
+
+  it("stepper buttons are not focusable via tab", () => {
+    render(<NumberInput />)
+    expect(screen.getByLabelText("Increment value")).toHaveAttribute(
+      "tabIndex",
+      "-1"
+    )
+  })
+
+  it("disables buttons when input is disabled", () => {
+    render(<NumberInput disabled />)
+    expect(screen.getByLabelText("Increment value")).toBeDisabled()
+    expect(screen.getByLabelText("Decrement value")).toBeDisabled()
+  })
+})
+```
+
+### Testes de Keyboard
+
+```tsx
+describe("NumberInput keyboard", () => {
+  it("increments with arrow up", async () => {
+    const user = userEvent.setup()
+
+    render(<NumberInput defaultValue={5} />)
+
+    const input = screen.getByRole("spinbutton")
+    await user.click(input)
+    await user.keyboard("{ArrowUp}")
+
+    expect(input).toHaveValue(6)
+  })
+
+  it("decrements with arrow down", async () => {
+    const user = userEvent.setup()
+
+    render(<NumberInput defaultValue={5} />)
+
+    const input = screen.getByRole("spinbutton")
+    await user.click(input)
+    await user.keyboard("{ArrowDown}")
+
+    expect(input).toHaveValue(4)
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+Baseado na analise comparativa com 14 design systems, as seguintes features sao candidatas para implementacao futura:
+
+### Implementado
+
+#### Stepper integrado
+
+Botoes de incremento/decremento visiveis por padrao.
+
+```tsx
+// API implementada
+<NumberInput showStepper={true} />
+<NumberInput showStepper={false} />
+```
+
+#### Icones customizaveis
+
+Props dedicadas para icones de stepper.
+
+```tsx
+// API implementada
+<NumberInput
+  incrementIcon={<ChevronUp />}
+  decrementIcon={<ChevronDown />}
+/>
+```
+
+### Prioridade Alta
+
+#### `precision`
+
+Controle de casas decimais.
+
+```tsx
+// Proposta de API
+interface NumberInputProps {
+  precision?: number
+}
+
+// Uso
+<NumberInput precision={2} /> // 0.00
+```
+
+**Referencias:** Chakra, Mantine, AntD
+
+#### `clampOnBlur`
+
+Ajusta valor para min/max ao perder foco.
+
+```tsx
+// Proposta de API
+interface NumberInputProps {
+  clampOnBlur?: boolean
+}
+
+// Uso
+<NumberInput min={0} max={100} clampOnBlur />
+```
+
+**Referencias:** Chakra, Mantine
+
+### Prioridade Media
+
+#### `prefix` / `suffix`
+
+Elementos decorativos antes/depois do input.
+
+```tsx
+// Proposta de API
+<NumberInput prefix="$" suffix="USD" />
+<NumberInput prefix={<DollarSign />} />
+```
+
+**Referencias:** Chakra, MUI, Mantine, AntD
+
+#### `formatter` / `parser`
+
+Formatacao customizada de exibicao.
+
+```tsx
+// Proposta de API
+<NumberInput
+  formatter={(value) => `${value}%`}
+  parser={(value) => value.replace('%', '')}
+/>
+```
+
+**Referencias:** Mantine, AntD
+
+### Prioridade Baixa
+
+#### `allowMouseWheel`
+
+Permite alterar valor com scroll do mouse.
+
+```tsx
+// Proposta de API
+<NumberInput allowMouseWheel />
+```
+
+**Referencias:** Chakra
+
+#### Compound Component API
+
+API de composicao para controle granular.
+
+```tsx
+// Proposta de API
+<NumberInput.Root>
+  <NumberInput.Field />
+  <NumberInput.Stepper>
+    <NumberInput.IncrementTrigger />
+    <NumberInput.DecrementTrigger />
+  </NumberInput.Stepper>
+</NumberInput.Root>
+```
+
+**Referencias:** Chakra, Radix patterns
+
+### Decisoes de Design
+
+| Feature | Recomendacao | Justificativa |
+|---------|--------------|---------------|
+| `precision` | Implementar | Comum para valores monetarios |
+| `clampOnBlur` | Implementar | Melhora UX de validacao |
+| `prefix/suffix` | Avaliar | Pode usar composicao externa |
+| `formatter` | Avaliar | Complexidade vs utilidade |
+| `allowMouseWheel` | Evitar | Problemas de a11y |
+| Compound API | Futuro | Maior breaking change |
+
+---
+
+## Referencias
+
+### Design Systems Analisados
+
+| Design System | Documentacao NumberInput | GitHub |
+|---------------|-------------------------|--------|
+| **Shadcn/ui** | [Input](https://ui.shadcn.com/docs/components/input) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
+| **React Aria** | [NumberField](https://react-spectrum.adobe.com/react-aria/NumberField.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
+| **Chakra UI** | [NumberInput](https://chakra-ui.com/docs/components/number-input) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **MUI** | [TextField](https://mui.com/material-ui/react-text-field/) | [mui/material-ui](https://github.com/mui/material-ui) |
+| **Mantine** | [NumberInput](https://mantine.dev/core/number-input/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
+| **Ant Design** | [InputNumber](https://ant.design/components/input-number) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
+| **NextUI** | [Input](https://nextui.org/docs/components/input) | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
+| **Headless UI** | - | [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) |
+| **Ariakit** | - | [ariakit/ariakit](https://github.com/ariakit/ariakit) |
+| **Fluent UI** | [SpinButton](https://react.fluentui.dev/?path=/docs/components-spinbutton--default) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
+| **Carbon** | [NumberInput](https://carbondesignsystem.com/components/number-input/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
+| **Blueprint** | [NumericInput](https://blueprintjs.com/docs/#core/components/numeric-input) | [palantir/blueprint](https://github.com/palantir/blueprint) |
+| **PrimeReact** | [InputNumber](https://primereact.org/inputnumber/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
+
+### Especificacoes e Padroes
+
+- [WAI-ARIA APG - Spinbutton Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/)
+- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN - Input type=number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)
+- [HTML Spec - Number State](https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number))
+
+### Ferramentas Utilizadas
+
+- [CVA - Class Variance Authority](https://cva.style/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Lucide Icons](https://lucide.dev/icons/)