CounterField

CounterField envuelve el componente Counter dentro de un contenedor con etiqueta. Provee botones de incremento y decremento con tamaño, color, estilo, paso, mínimo y máximo configurables. Ideal para selectores de cantidad, inputs de puntuación o cualquier entrada numérica entera.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | number | Sí | — | Valor numérico actual. | | onChange | (value: number) => void | No | — | Llamado con el nuevo valor cuando el contador cambia. | | label | string | No | — | Etiqueta mostrada sobre el contador. | | description | string | No | — | Texto de ayuda mostrado debajo del contenedor. | | disabled | boolean | No | — | Deshabilita ambos botones de incremento y decremento. | | readOnly | boolean | No | — | Hace el contador de solo lectura (los botones no son interactivos). | | minValue | number | No | — | Valor mínimo permitido. | | maxValue | number | No | — | Valor máximo permitido. | | step | number | No | — | Cantidad a incrementar o decrementar por clic. | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | No | — | Preset de tamaño para los botones del contador. | | buttonType | 'clear' \| 'outline' \| 'solid' | No | 'clear' | Estilo visual de los botones de incremento/decremento. | | buttonColor | string | No | themeColors.primary | Color aplicado a los botones. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor raíz. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor raíz. | | id | string | No | — | Atributo id del contenedor raíz. |

Uso

Básico

import React, { useState } from 'react';
import CounterField from '@/components/fields/CounterField';

export default function Example() {
  const [qty, setQty] = useState(1);

  return (
    <CounterField
      label="Cantidad"
      value={qty}
      onChange={setQty}
      minValue={1}
      maxValue={99}
    />
  );
}

Con paso y botones sólidos

<CounterField
  label="Puntuación (0–10)"
  value={rating}
  onChange={setRating}
  minValue={0}
  maxValue={10}
  step={1}
  buttonType="solid"
  size="lg"
/>