componente · @solu30/ui-kit/input

QuantityStepper

Control de cantidad con menos y más, y número tipeable cuando el rango útil es de cientos.

Seguir leyendo — 2 párrafos más

Pill-shaped +/N/- stepper for quantity inputs. Controlled: caller owns the value via onChange.

Con editable, el número del medio es un campo tipeable: el draft es local mientras se escribe y se commitea (clampeado a [min,max]) en blur o Enter — así onChange no dispara una mutación por tecla. Escape descarta el draft.

10 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
cmp-packages
gestorsalon
luigi

El componente, montado

Cargando el espécimen…

export function NumericFieldsMatrix() {
  const [deposit, setDeposit] = useState('150000')
  const [tables, setTables] = useState(8)
  const [guests, setGuests] = useState(186)
  const [flour, setFlour] = useState<string | null>('2.5')
  const [flourUnit, setFlourUnit] = useState('kg')
  const [milk, setMilk] = useState<string | null>('5')
  const [milkUnit, setMilkUnit] = useState('L')

  return (
    <Stage label="Campos numéricos · moneda, stepper editable y cantidad+unidad" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="deposit">Depósito de reserva</Label>
          <CurrencyInput id="deposit" value={deposit} onChange={setDeposit} symbol="$" locale="es-AR" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label>Comisión de la agencia</Label>
          <CurrencyInput value="45000" onChange={() => {}} symbol="US$" locale="en-US" disabled />
          <span className="text-xs text-content/50">CurrencyInput no tiene error — KIT-021.</span>
        </div>
        <div className="flex flex-col gap-1.5">
          <Label>Mesas redondas</Label>
          <QuantityStepper value={tables} onChange={setTables} min={1} max={40} size="sm" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label>Cantidad de invitados</Label>
          <QuantityStepper
            value={guests}
            onChange={setGuests}
            min={1}
            max={400}
            editable
            inputLabel="Cantidad de invitados"
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="qty-harina">Harina (heladería)</Label>
          <QuantityUnitField
            id="qty-harina"
            value={flour}
            unit={flourUnit}
            family="weight"
            onChange={(v, u) => {
              setFlour(v)
              setFlourUnit(u)
            }}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="qty-leche">Leche (heladería) — sin stock</Label>
          <QuantityUnitField
            id="qty-leche"
            value={milk}
            unit={milkUnit}
            family="volume"
            onChange={(v, u) => {
              setMilk(v)
              setMilkUnit(u)
            }}
            disabled
          />
        </div>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · NumericFieldsMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { QuantityStepper } from '@solu30/ui-kit/input'

Props

11 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`number`	—
onChange	sí	`(value: number) => void`	—
min	opcional	`number`	—
max	opcional	`number`	—
decrementLabel	opcional	`string`	—
incrementLabel	opcional	`string`	—
className	opcional	`string`	—
size	opcional	`"sm" \| "md"`	@default "md"
editable	opcional	`boolean`	Permite tipear el valor en vez de llegar a él a click de +/−. Imprescindible cuando el rango útil es de cientos (ej. repartir 186 comensales entre menús): el stepper puro obliga a 186 clicks. @default false
inputLabel	opcional	`string`	aria-label del campo numérico. Sólo se usa con `editable`.
disabled	opcional	`boolean`	Deshabilita el control entero (botones + campo).

Ejemplo del paquete

// `editable` deja escribir el número además de usar los botones;
// ahí `inputLabel` es obligatorio para que el campo tenga nombre accesible.
<QuantityStepper value={cantidad} onChange={setCantidad} min={1} max={20}
  editable inputLabel="Cantidad de invitados" />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.