componente · @solu30/ui-kit/input

InlineNumberField

Campo numérico para editar dentro de una celda de tabla, con sufijo de unidad opcional.

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

cmp-packages
dietaly
gestorsalon

El componente, montado

Cargando el espécimen…

export function InlineEditMatrix() {
  const [salonName, setSalonName] = useState('Salón Jardín')
  const [capacity, setCapacity] = useState<number | null>(180)
  const [flavorName, setFlavorName] = useState('Dulce de leche granizado')
  const [brandColor, setBrandColor] = useState<string | null>('#2563eb')

  return (
    <Stage label="Edición en línea · nueve componentes, ninguno con error" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
        <EditableField label="Nombre del salón" value={salonName} onSave={setSalonName} />
        <EditableField
          label="Capacidad máxima"
          value={String(capacity ?? '')}
          onSave={(v) => setCapacity(Number(v))}
          type="number"
          required
        />
        <div className="flex flex-col gap-1.5">
          <span className="text-xs text-content/50">InlineText</span>
          <InlineText value={flavorName} onSave={setFlavorName} placeholder="Nombre del sabor" />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs text-content/50">InlineText · disabled</span>
          <InlineText value="Sabor de temporada — cerrado" onSave={() => {}} disabled />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs text-content/50">InlineTextField (celda de tabla)</span>
          <InlineTextField initial="EVT-2026-0148" onSave={() => {}} mono plain />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-xs text-content/50">InlineNumberField · con sufijo (celda de tabla)</span>
          <InlineNumberField initial={148} onSave={() => {}} suffix=" pers." plain />
        </div>
        <InlineColor label="Color de marca" value={brandColor} onSave={setBrandColor} />
      </div>
    </Stage>
  )
}

De specimens/input.tsx · InlineEditMatrix: 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 { InlineNumberField } from '@solu30/ui-kit/input'

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
initial	sí	`number \| null`	—
onSave	sí	`(v: number \| null) => void`	—
onChange	opcional	`(v: number \| null) => void`	Fires on every keystroke with the parsed value (or null) for live preview.
placeholder	opcional	`string`	—
suffix	opcional	`string`	—
plain	opcional	`boolean`	When true, renders without border/background at rest; shows border on hover/focus.

Ejemplo del paquete

// Edición en el lugar: `onChange` avisa mientras se escribe, `onSave` al confirmar.
// `initial` es el valor de arranque, no un valor controlado.
<InlineNumberField initial={reserva.invitados} suffix=" pax" onSave={guardarInvitados} />

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.