Counter

Stepper numérico compuesto por un botón de decremento, un input numérico y un botón de incremento. Admite valores mínimos y máximos, paso configurable, modo solo lectura y cinco tamaños. El valor se sincroniza con defaultValue cada vez que esa prop cambia.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | defaultValue | number | No | 0 | Valor numérico inicial. Se sincroniza cuando la prop cambia. | | minValue | number | No | -Infinity | Valor mínimo permitido. | | maxValue | number | No | Infinity | Valor máximo permitido. | | step | number | No | 1 | Cantidad incrementada o decrementada por pulsación. | | disabled | boolean | No | false | Deshabilita botones e input. | | readOnly | boolean | No | false | Hace el input solo lectura (los botones siguen funcionando). | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | 'md' | Controla dimensiones y tamaño de fuente. | | buttonType | 'clear' \| 'outline' \| 'solid' | No | — | Estilo visual de los botones. | | buttonColor | string | No | color primario del tema | Color de los botones. | | onValueChange | (value: number) => void | No | — | Se ejecuta al cambiar el valor. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor. | | inputStyle | React.CSSProperties | No | — | Estilos del input numérico. | | buttonStyle | React.CSSProperties | No | — | Estilos de ambos botones. | | inputClassName | string | No | — | Clase CSS del input. |

Uso

Básico

import Counter from '@/components/Counter';

export default function Example() {
  return (
    <Counter
      defaultValue={1}
      minValue={1}
      maxValue={10}
      onValueChange={(value) => console.log('Cantidad:', value)}
    />
  );
}

Selector de cantidad con paso

import Counter from '@/components/Counter';

export default function Example() {
  return (
    <Counter
      defaultValue={0}
      minValue={0}
      maxValue={100}
      step={5}
      size="lg"
      onValueChange={(value) => console.log('Cantidad:', value)}
    />
  );
}