@studiolxd/brand 49.18.0 → 49.20.0

package/CHANGELOG.md

@@ -7,6 +7,212 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [49.20.0] — 2026-10-04
+
+> **Minor.** `Autocomplete` y `AutocompleteField` (sugerencias con texto libre), tachado en `Text`, y `NumberInput`
+> con `commitMode` (avisar al terminar) y `compact` (para filas de lista), en React, SwiftUI y Compose donde hay
+> versión nativa. Arreglos: color del texto de las filas en Compose y pruebas estables. Todo opcional: sin las props
+> nuevas el HTML no cambia.
+
+### Arreglos previos a 49.20.0 (patch)
+
+- **Compose · `BrandListItem(text, subtitle)`** pintaba su texto con `BasicText(style = LocalBrandTextStyle.current)`, cuyo
+  color es `Unspecified` (negro de Compose): fuera de un `BrandList` salía oscuro sobre fondo oscuro. Ahora la fila fija
+  su propia tinta y tipografía (`text.list.*`, `ProvideBrandContent`), como `BrandList`, SwiftUI y React. `BrandSheet`,
+  `BrandEmptyState` y `BrandConfirmDialog` no tenían el fallo: pintan sus textos con tokens explícitos y `BrandText`
+  cae a la tinta del esquema. Captura nueva `listItemOutsideList` (claro y oscuro).
+- **Storybook · pruebas del Toast** («Test — tintas del aviso en claro/oscuro»): la prueba, no el componente, estaba mal.
+  Tras `toast.dismiss()` buscaba `.toast` y recogía el aviso anterior, aún montado mientras sale; al desmontarse
+  `getComputedStyle` devolvía `''` en fondo y tinta. Ahora localiza el aviso por su título y mide las tintas de una vez.
+- **Storybook · `test:stories`**: el proyecto `storybook` declara `testTimeout`/`hookTimeout` de 60 s. «Trigger de
+  icono» del `Menu` (una story solo de render) agotó los 20 s por carga de la máquina, sin fallo real.
+- **SwiftUI · captura `phrase-mismatch` en macOS** inestable: el `onAppear` daba el foco al campo de la frase y, según
+  llegara antes o después de la fotografía, salían el anillo de foco y el cursor. Las capturas ya no piden foco
+  (`autofocus: false` en el `init` interno con estado); el componente público lo sigue haciendo.
+  Las referencias de iOS de esa captura se regrabaron sin foco (antes llevaban el anillo).
+- **Compose · captura `NumberInputField` `compact`** desfasada (1 px de desplazamiento vertical respecto al render actual;
+  regrabada dos veces con bytes idénticos, así que es determinista): referencia actualizada.
+- **Compose · título de `BrandSheet`**: comparado con React y SwiftUI, los tres leen el mismo token
+  (`sheet.title-font-size` → `modal.title-font-size`, 32 px, peso 500): no hay diferencia y no se cambia nada.
+
+### NumberInput — confirmar al terminar, compacto y etiquetas tipadas (minor)
+
+Todo opcional y en las tres plataformas a la vez (React, SwiftUI y Compose): sin las props nuevas, el comportamiento y
+el HTML son los de 49.19.0 (pruebas en `NumberInput.test.tsx` y `NumberInputField.test.tsx`).
+
+- **`commitMode: 'change' | 'blur'`** (por defecto `'change'`). Con `'blur'`, lo escrito a mano se avisa **una sola
+  vez**, al salir del campo o con Enter (y solo si cambia el valor); Escape descarta lo escrito y vuelve al último
+  valor. Los botones − y + avisan al momento en los dos modos. Con `onEmpty`, vaciar y confirmar es «sin valor». Motivo:
+  una fila de lista donde cada aviso es una escritura en un servidor. Nativo: `commitMode: .blur` (SwiftUI, al perder el
+  foco o con «intro»; Escape con teclado físico) y `NumberInputCommitMode.Blur` (Compose, al perder el foco o «Hecho»).
+- **`compact`** (booleano). Variante para filas de lista, `trailing` de `ListItem`: 32 de alto, botones de 24 y cifra
+  de 40 de ancho, sin estirarse; manda sobre `size`. En nativo la zona táctil sigue llegando a 44 pt / 48 dp. Tokens
+  nuevos `number-input.compact-*` (`height`, `font-size`, `btn-width`, `field-width`, `padding-inline`).
+- **`decrementLabel` / `incrementLabel`** declaradas en `NumberInputFieldProps` (ya llegaban al control en ejecución
+  pero no estaban en el tipo). En nativo ya existían.
+- Fichas de paridad, capturas y pareja con Storybook (`native/apple/Comparisons/NumberInputField/compacto.*`) al día.
+
+> **Minor.** Dos piezas de la primera app web (Homenize): un autocompletado que admite texto libre y el tachado en
+> `Text` (React, SwiftUI y Compose). Todo opcional: sin las props nuevas, el HTML de `Text` es idéntico al anterior.
+
+### React — `Autocomplete` y `AutocompleteField` (minor)
+
+Campo de texto con sugerencias donde **el valor es el texto escrito**: se elige una sugerencia o se queda lo que no
+coincide con ninguna. Componente propio y no una prop de `AsyncSelect` porque el modelo de valor es otro
+(`AsyncSelect` guarda un identificador y pide `selectedOption`; aquí `value` es un `string`).
+
+- **API**: `value`/`defaultValue`/`onValueChange` (texto), `onSelect(option)` (solo al elegir: para saber cuál fue),
+  sugerencias síncronas con `options` (filtradas por el control, sin mayúsculas ni tildes) o síncronas/asíncronas con
+  `onSearch` (con `debounceMs`, descarte de respuestas fuera de orden y `minChars`). `name` y `required` nativos en el
+  propio `<input>`.
+- **Combobox ARIA con lista**: `aria-activedescendant`, `aria-expanded`, `aria-controls` solo con la lista abierta;
+  flechas, Enter (sin sugerencia marcada se queda con lo escrito y deja enviar el formulario), Escape (no sube al
+  `Modal`) y Tab.
+- **Sin texto propio**: sin sugerencias no hay lista ni «sin resultados». No toca el catálogo de mensajes.
+- Misma cara que `AsyncSelect`/`SelectField` por tokens nuevos `autocomplete.*` y `autocomplete-field.*` que apuntan a
+  los de `async-select*` (el par oscuro llega por `surface-dark-derived.css`). Sin `surface-dark-*` propios.
+- Registrados: `entry-points.mjs` (+ `clientComponents`), `package.json › exports` (`./autocomplete`,
+  `./autocomplete-field`) y `src/index.ts`. Historias, docs `.mdx` y pruebas con teclado.
+- Anotado en `native/README.md` como candidato a versión nativa si una app lo pide.
+
+### `Text` — tachado (minor)
+
+- **React**: prop `strikethrough` y `as="del"`/`as="s"` (que tachan por sí solos). Clase nueva `text--strikethrough`,
+  tinta atenuada (`text-inline.strikethrough-color`, la del texto secundario) y grosor del sistema
+  (`text-inline.strikethrough-thickness`); con un `tone` manda el del tono. Sin la prop, el HTML es idéntico
+  (prueba en `Text.test.tsx`).
+- **SwiftUI y Compose**: `strikethrough:` / `TextElement.del` y `.s` en `BrandText` / `Text.brand(…)` /
+  `brandSpanStyle`, con la ficha de paridad al día.
+
+## [49.19.0] — 2026-10-04
+
+> **Minor.** Primera versión con **Brand nativo**: tokens, fuentes y componentes para SwiftUI (iOS 17 y macOS 14) y
+> Jetpack Compose (Android), fuera del paquete npm. En React, opciones de fila en `List`/`ListItem`
+> (`showSeparators`, `secondary`, `trailing`, `leading`), `NumberInput` sin valor y el aviso neutro de `Toast` en
+> oscuro. Todo opcional: sin las props nuevas el HTML no cambia.
+
+### React — huecos de la primera app nativa (minor)
+
+Todo opcional: sin las props nuevas el HTML es idéntico al anterior (pruebas con `toMatchInlineSnapshot` generadas
+contra el código de antes, en `InputField.test.tsx`, `NumberInputField.test.tsx`, `PasswordField.test.tsx` y
+`List.test.tsx`).
+
+- **`ListItem` `leading`** (`ReactNode`): accesorio al principio de la fila (icono, avatar), pareja de `trailing`.
+  Clase nueva `list__item-leading`; story «Filas con accesorio inicial».
+- **`NumberInput` / `NumberInputField` sin valor**: `value` y `defaultValue` admiten `null` (campo vacío), y la prop
+  nueva `onEmpty` hace que vaciar el texto sea un valor (sin ella, el campo se comporta como siempre y recupera el
+  último número al salir). Desde vacío, − y + cuentan como si el campo valiera 0 y se ajustan a `min`/`max`.
+  Story «Sin valor».
+- **Foco desde fuera**: el `ref` ya llegaba al `<input>` en `InputField` (también en búsqueda), `NumberInputField` y
+  `PasswordField` (y al botón en `SelectField`); ahora lo fija una prueba y lo documenta `InputField.mdx`.
+- **Documentación de `Button`**: la nota de `destructive` decía que valía para `primary` y `ghost` y mencionaba una
+  variante `accent` que ya no existe; en el código solo `outline` y `text` tienen estilo destructivo. Corregida la
+  nota (y `destructiveIntent` → `destructive`); el comportamiento no cambia.
+
+### Nativo — huecos de la primera app nativa (minor)
+
+- **Generador de Kotlin**: los tamaños de letra de componente cuyo nombre no termina en `font-size`
+  (`empty-state.title-font-size-sm`, `description-font-size-sm`) salían como `Dp`; ahora todo token con `font-size`
+  como segmento es `TextUnit` (`sp`). `BrandEmptyState` deja de convertir a mano. Grupo `password-field` en
+  `NATIVE_COMPONENT_GROUPS`.
+- **`PasswordField` nativo** (`BrandPasswordField`, SwiftUI y Compose): campo con ojo de mostrar u ocultar, etiqueta
+  oculta por defecto como en React, textos accesibles como parámetros. Ficha, capturas y parejas. **Compose: `BrandInputField`
+  pierde el ojo** (`passwordToggle`, `showPasswordLabel`, `hidePasswordLabel`; breaking menor en Compose): quien lo quiera usa `BrandPasswordField`.
+- **Foco desde fuera** en `InputField`, `NumberInputField` y `PasswordField`: SwiftUI `.brandFocused($focus)` /
+  `.brandFocused($focus, equals:)` (un `FocusState` de la app aplicado al texto, no a los botones); Compose
+  `focusRequester: FocusRequester?`.
+- **`NumberInputField` sin valor**: `Binding<Double?>` (SwiftUI; `Binding<Double>` sigue compilando) y `value: Double?`
+  (Compose; **cambio de firma**: `onValueChange` recibe `Double?`). Vacío = `nil`/`null`, con `placeholder` y
+  «Sin valor» (`emptyValueLabel`) para lectores de pantalla; desde vacío − y + parten de 0 y respetan `min`/`max`.
+- **`BrandListItem`**: `leading` en SwiftUI (ya existía en Compose) y `action` (fila pulsable entera) en SwiftUI, pareja de
+  `onClick` de Compose, anotado en la ficha como diferencia deliberada.
+
+### Nativo — Jetpack Compose con los mismos componentes que SwiftUI (minor)
+
+- **Tokens de componente en Kotlin**: `pnpm build:tokens` genera `BrandComponentTokens.kt` (mismos grupos y reglas que
+  `BrandComponentTokens.swift`; los colores y las medidas con par `surface-dark-*` salen como `BrandSchemeValue`, que se
+  resuelve con `.current`). El Swift generado no cambia.
+- **Componentes de Compose** (`native/android/brand`): `BrandButton`, `BrandCloseButton`, `BrandHeading`/`BrandParagraph`/
+  `BrandText`, `BrandIcon` (77 iconos; `pnpm build:native-icons` genera también `BrandIconData.kt`), `BrandInputField`,
+  `BrandNumberInputField`, `BrandSelectField`, `BrandSwitcherField`, `BrandToggleGroup`, `BrandThemeSwitcher`,
+  `BrandList`/`BrandListItem` (`showSeparators`, `secondary`, `trailing`), `BrandTag`, `BrandEmptyState`, `BrandSkeleton`,
+  `BrandSheet`, `BrandConfirmDialog` y `ToastCenter`/`ToastHost`, con estados, escala de fuente, TalkBack, 48 dp, claro y
+  oscuro y «quitar animaciones». Cumplen las fichas de paridad (`ParityTest`), con capturas Paparazzi en claro y oscuro,
+  `@Preview` y parejas React ↔ Compose en `native/android/Comparisons/`. Sin dependencias nuevas en producción.
+- Fichas de paridad: líneas «Android: …» en `differences`. `native/README.md` documenta los componentes de Compose.
+
+### React — `List`/`ListItem` (minor) y `Toast` (patch)
+
+- **`List` `showSeparators`** (default `false`): línea entre filas con los tokens `separator.*`
+  (clase nueva `list--separated`). **`ListItem` `secondary` y `trailing`** (`ReactNode`): línea
+  menor atenuada y accesorio al final de la fila. Sin las props nuevas el HTML es exactamente el
+  de antes; la estructura de fila (`list__item-row`, `list__item-main`, `list__item-secondary`,
+  `list__item-trailing`) solo aparece al usarlas. Tokens nuevos en `text.list.*`
+  (`item-gap`, `secondary-*`, `separator-*`, con pares `surface-dark-*`). Prueba que fija el HTML
+  anterior en `List.test.tsx`.
+- **Fix `Toast` neutro en oscuro**: el neutro (y `info`/`loading`) llevaba `.surface-dark` en la
+  raíz, que volteaba su relleno a blanco incluso sobre página clara y dejaba el aspa en blanco
+  sobre blanco. Ahora, como el `Alert`, la raíz solo la lleva `success`/`error`, y el interior
+  (contenido y aspa) lleva `.surface-invert` (neutro) o `.surface-light` (`warning`).
+
+### Nativo
+
+- `BrandList(showsSeparators:)` pasa a **`showSeparators:`** (mismo nombre que en React; lo nativo
+  aún no se había publicado). `BrandListItem` `secondary`/`trailing` y los separadores leen ahora
+  los tokens `text.list.*`. Fichas `List.json`/`ListItem.json` actualizadas: ya no son «solo nativo».
+
+> Infraestructura nativa (iOS, macOS y Android). **No cambia nada del paquete npm**: lo
+> nativo vive en `native/`, `Package.swift` y `jitpack.yml`, fuera de `package.json#files`.
+
+### Nativo — nuevo (`native/`)
+
+- **Tokens nativos con Style Dictionary**: dos plataformas nuevas en `sd.config.mjs`
+  (`swift`, `kotlin`) con formatos propios en `sd.formats.mjs`. `pnpm build:tokens`
+  genera `native/apple/…/Tokens/BrandTokens.swift` y
+  `native/android/…/tokens/BrandTokens.kt`: colores y roles claro/oscuro (`Color` dinámico
+  en Swift; `BrandColorRoles.light|dark` + `CompositionLocal` en Compose), espaciado,
+  radios, anchos de borde, tallas, opacidad, tipografía, sombras y motion. Los tokens de
+  componente quedan para cuando se porte cada componente.
+- **Paquete SwiftPM** `StudiolxdBrand` (`Package.swift` en la raíz; iOS 17, macOS 14,
+  Swift 6): `registerFonts()`, `BrandTextStyle` y `Font.brand(_:)`.
+- **Módulo Gradle** `com.github.studiolxd:brand` (`native/android`, minSdk 26, publicable
+  por JitPack con `jitpack.yml`): `BrandTheme`, `BrandFontFamily`, `BrandTypography`.
+- **Fuentes**: `pnpm build:native-fonts` descomprime los woff2 variables (Google Sans Flex,
+  Google Sans Code, Libre Bodoni; cara `latin`) a TTF para ambas plataformas.
+- **Paridad con React**: fichas por componente (`native/parity/`), validador
+  (`pnpm native:parity`, con TypeScript y `ajv`) y pruebas de paridad en Swift y Kotlin.
+- **Capturas**: swift-snapshot-testing (Apple) y Paparazzi (Android), con una captura de
+  ejemplo de los roles de color en claro y oscuro.
+- **`release:check`** comprueba que `npm pack` no incluye nada nativo, que los tokens
+  nativos están al día y la paridad; con `--with-native` compila y prueba Swift (macOS e
+  iOS) y Gradle.
+- Documentación en `native/README.md` y en `CLAUDE.md` § «Nativo (iOS y Android)».
+
+### Nativo — componentes de SwiftUI (iOS 17 y macOS 14)
+
+> Los primeros componentes nativos, los que pide Homenize. Mismos nombres de props y casos que React, solo tokens,
+> claro y oscuro con colores dinámicos, tipo dinámico, VoiceOver, zona táctil de 44 pt, puntero y foco de teclado en
+> macOS y «reducir movimiento». Detalle y ejemplos en `native/README.md` § «Componentes de SwiftUI». Compose recibirá los
+> mismos componentes en la tarea siguiente.
+
+- **15 componentes** portados, cada uno con su ficha de paridad (`native/parity/components/`), capturas en claro y
+  oscuro (iOS y macOS), `#Preview` con todas las variantes y la pareja con su story de Storybook
+  (`native/apple/Comparisons/<Componente>/`): `Button` (como `ButtonStyle` + `BrandButton`), `Heading`/`Paragraph`/`Text`,
+  `Icon`, `InputField`, `NumberInputField`, `SelectField`, `SwitcherField`, `ToggleGroup`, `ThemeSwitcher`, `List` +
+  `ListItem`, `Tag`, `EmptyState`, `Skeleton`, `Sheet` (`.sheet` nativo), `ConfirmDialog` y `Toast`/`Toaster`
+  (`ToastCenter` + `toastHost`).
+- **Tokens de componente para Swift**: `pnpm build:tokens` genera también `BrandComponentTokens.swift` (un enum por
+  grupo de `NATIVE_COMPONENT_GROUPS`, con los `surface-dark-*` como `Color` dinámico, también los heredados por
+  referencia). Una medida con par oscuro sale como `BrandSchemeValue`. El CSS puro (`solid`, `vh`, `min()`…) se omite.
+- **`BrandIcon`**: los mismos trazos que el `Icon` de React (77 iconos, retícula de 24), generados desde `Icon.tsx` con
+  `pnpm build:native-icons` (incluido en `build:all`).
+- **Paridad**: las fichas admiten `differences` (lo que se queda a propósito) y `reactOnlyValues` (`block: boolean |
+  'mobile'`), y `native:parity` entiende uniones numéricas (`Heading level: 1 | … | 6`).
+- **Ayudantes**: `brandFont`/`brandLinedFont` (tipo dinámico e interlineado de CSS), `brandHitTarget` (44 pt),
+  `BrandControlSize` y `.brandControlSize(_:)`, `assertBrandSnapshots` (capturas de macOS en sRGB),
+  `native/apple/scripts/capture-story.mjs` y `pair-comparison.sh` (parejas React ↔ SwiftUI a la misma escala).
+- Los ejemplos del README compilan (`ReadmeExamples.swift`).
+
 ## [49.18.0] — 2026-10-03
 
 > **Minor.** `RecoveryCodes` deja pasar el aviso de portapapeles roto, y `react-hook-form`

package/dist/_shared/tokens.js

@@ -316,6 +316,40 @@ var e = {
 	"--async-select-empty-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
 	"--async-select-empty-font-size": "1rem",
 	"--async-select-empty-color": "#4a4a4a",
+	"--autocomplete-bg": "#ffffff",
+	"--autocomplete-border-color": "#111e30",
+	"--autocomplete-border-radius": "0px",
+	"--autocomplete-border-style": "solid",
+	"--autocomplete-border-width": "1px",
+	"--autocomplete-disabled-cursor": "not-allowed",
+	"--autocomplete-color": "#111e30",
+	"--autocomplete-content-bg": "#ffffff",
+	"--autocomplete-content-border-color": "#111e30",
+	"--autocomplete-content-gap": "0.5rem",
+	"--autocomplete-content-z-index": "400",
+	"--autocomplete-content-max-height": "var(--available-height)",
+	"--autocomplete-error-border-color": "#b30000",
+	"--autocomplete-focus-ring-color": "#111e30",
+	"--autocomplete-focus-ring-width": "2px",
+	"--autocomplete-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--autocomplete-font-size": "1rem",
+	"--autocomplete-font-weight": "300",
+	"--autocomplete-height": "2.5rem",
+	"--autocomplete-item-highlighted-bg": "#111e30",
+	"--autocomplete-item-highlighted-color": "#ffffff",
+	"--autocomplete-item-padding-block": "0.5rem",
+	"--autocomplete-lg-font-size": "1.25rem",
+	"--autocomplete-lg-height": "3rem",
+	"--autocomplete-lg-item-padding-block": "0.75rem",
+	"--autocomplete-lg-padding-inline": "1.5rem",
+	"--autocomplete-line-height": "1",
+	"--autocomplete-padding-inline": "1rem",
+	"--autocomplete-placeholder-color": "#4a4a4a",
+	"--autocomplete-sm-font-size": "0.875rem",
+	"--autocomplete-sm-height": "2rem",
+	"--autocomplete-sm-item-padding-block": "0.25rem",
+	"--autocomplete-sm-padding-inline": "0.5rem",
+	"--autocomplete-item-selected-font-weight": "500",
 	"--avatar-size-sm": "2rem",
 	"--avatar-size-md": "2.5rem",
 	"--avatar-size-lg": "3rem",
@@ -1284,6 +1318,11 @@ var e = {
 	"--number-input-lg-font-size": "1.25rem",
 	"--number-input-lg-height": "3rem",
 	"--number-input-lg-padding-inline": "1.5rem",
+	"--number-input-compact-height": "2rem",
+	"--number-input-compact-font-size": "0.875rem",
+	"--number-input-compact-btn-width": "1.5rem",
+	"--number-input-compact-field-width": "2.5rem",
+	"--number-input-compact-padding-inline": "0.25rem",
 	"--org-switcher-trigger-padding-block": "0.5rem",
 	"--org-switcher-trigger-padding-inline": "0.75rem",
 	"--org-switcher-trigger-gap": "0.75rem",
@@ -1835,6 +1874,8 @@ var e = {
 	"--text-inline-muted-color": "#4a4a4a",
 	"--text-inline-destructive-color": "#b30000",
 	"--text-inline-success-color": "#006616",
+	"--text-inline-strikethrough-color": "#4a4a4a",
+	"--text-inline-strikethrough-thickness": "1px",
 	"--text-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
 	"--text-font-size": "1rem",
 	"--text-font-weight": "300",
@@ -1905,6 +1946,13 @@ var e = {
 	"--text-list-letter-spacing": "0em",
 	"--text-list-gap": "0.5rem",
 	"--text-list-padding-inline-start": "2rem",
+	"--text-list-item-gap": "0.75rem",
+	"--text-list-secondary-font-size": "0.875rem",
+	"--text-list-secondary-line-height": "1.65",
+	"--text-list-secondary-color": "#4a4a4a",
+	"--text-list-separator-color": "#111e30",
+	"--text-list-separator-thickness": "1px",
+	"--text-list-separator-spacing": "0.5rem",
 	"--textarea-border-radius": "0px",
 	"--textarea-border-width": "1px",
 	"--textarea-border-style": "solid",
@@ -2118,6 +2166,17 @@ var e = {
 	"--async-select-field-helper-font-weight": "300",
 	"--async-select-field-helper-line-height": "1.5",
 	"--async-select-field-helper-color": "#111e30",
+	"--autocomplete-field-gap": "0.5rem",
+	"--autocomplete-field-error-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--autocomplete-field-error-font-size": "0.875rem",
+	"--autocomplete-field-error-font-weight": "300",
+	"--autocomplete-field-error-line-height": "1.5",
+	"--autocomplete-field-error-color": "#b30000",
+	"--autocomplete-field-helper-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--autocomplete-field-helper-font-size": "0.875rem",
+	"--autocomplete-field-helper-font-weight": "300",
+	"--autocomplete-field-helper-line-height": "1.5",
+	"--autocomplete-field-helper-color": "#111e30",
 	"--avatar-upload-gap": "1rem",
 	"--avatar-upload-body-gap": "0.5rem",
 	"--avatar-upload-ring-width": "2px",

package/dist/_types/atoms/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,83 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import './Autocomplete.css';
+export interface AutocompleteOption {
+    /** Identifica la sugerencia: es lo que recibe `onSelect` para saber cuál se eligió. */
+    value: string;
+    /** El texto de la sugerencia: es lo que se escribe en el campo al elegirla. */
+    label: string;
+}
+export interface AutocompleteProps {
+    /**
+     * El texto del campo (controlado). **El valor es el texto escrito**, haya o
+     * no una sugerencia que coincida: elegir una sugerencia solo lo rellena.
+     */
+    value?: string;
+    /** Texto inicial cuando el campo no está controlado. */
+    defaultValue?: string;
+    /** Se llama con el texto nuevo, tanto al escribir como al elegir una sugerencia. */
+    onValueChange?: (value: string) => void;
+    /**
+     * Se llama, además de `onValueChange`, cuando el usuario **elige** una
+     * sugerencia: sirve para saber cuál fue (su `value`) frente a un texto libre.
+     */
+    onSelect?: (option: AutocompleteOption) => void;
+    /**
+     * Sugerencias **síncronas**: una lista fija que el propio control filtra por
+     * lo escrito (sin distinguir mayúsculas ni tildes). Es excluyente con
+     * `onSearch`.
+     */
+    options?: AutocompleteOption[];
+    /**
+     * Sugerencias **asíncronas** (o síncronas, calculadas por el consumidor): se
+     * llama con lo escrito, tras `debounceMs`, y devuelve la lista. Si lanza,
+     * simplemente no hay sugerencias: el texto escrito sigue valiendo.
+     */
+    onSearch?: (query: string) => AutocompleteOption[] | Promise<AutocompleteOption[]>;
+    /**
+     * Milisegundos de rebote entre la última tecla y `onSearch`. Default: 200.
+     * A 0 se busca en cada tecla. No afecta a `options`.
+     */
+    debounceMs?: number;
+    /**
+     * Caracteres mínimos para sugerir al escribir. Default: 1. La flecha abajo
+     * abre la lista aunque no se llegue al mínimo.
+     */
+    minChars?: number;
+    /** Pista dentro del campo. El control no emite más texto por su cuenta. */
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    id?: string;
+    /** Nombre del campo en el formulario: el propio `<input>` lleva el texto. */
+    name?: string;
+    /** Marca el estado de error: aplica la clase `autocomplete--error` y `aria-invalid`. */
+    error?: boolean;
+    /** Campo obligatorio: `required` nativo, porque lo que se envía es el propio texto. */
+    required?: boolean;
+    maxLength?: number;
+    /** Se llama al salir del control (react-hook-form lo usa para validar). */
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    /** Se añade DESPUÉS de las clases propias del componente. */
+    className?: string;
+    /**
+     * Nombre accesible cuando el control va suelto, y de la lista de
+     * sugerencias. En un campo lo nombra la etiqueta (`htmlFor`), que este
+     * atributo pisaría: no lo pongas ahí.
+     */
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    /**
+     * Nodo DOM donde montar el portal de la lista (reenviado a Base UI
+     * `Portal.container`). Mismo contrato que `AsyncSelect`: por defecto, el nodo
+     * de la superficie que llegue por contexto, o `document.body`.
+     */
+    container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>['container'];
+}
+/**
+ * Campo de texto con sugerencias. A diferencia de `AsyncSelect`, **no obliga a
+ * elegir**: el valor es el texto escrito y una sugerencia es solo una forma de
+ * escribirlo más deprisa. Patrón ARIA de combobox con lista (`aria-activedescendant`):
+ * el foco no sale nunca del `<input>`. El `ref` va a ese `<input>`.
+ */
+export declare const Autocomplete: import("react").ForwardRefExoticComponent<AutocompleteProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/atoms/List/List.d.ts

@@ -8,10 +8,30 @@ export interface ListItemProps extends React.ComponentPropsWithoutRef<'li'> {
      */
     as?: React.ElementType;
     children?: React.ReactNode;
+    /**
+     * Accesorio al principio de la fila: un icono, un avatar. Pareja de
+     * `trailing`; no se encoge ni parte línea y se centra con el bloque de texto.
+     */
+    leading?: React.ReactNode;
+    /**
+     * Línea menor bajo el contenido, atenuada y un peldaño por debajo del cuerpo
+     * (`text.paragraph.small`): la descripción de una fila de datos o de ajustes.
+     */
+    secondary?: React.ReactNode;
+    /**
+     * Accesorio al final de la fila, alineado a la derecha: un icono, un valor,
+     * un interruptor. No se encoge ni parte línea.
+     */
+    trailing?: React.ReactNode;
 }
 export interface ListProps extends React.ComponentPropsWithoutRef<'ul'> {
     /** Tipo de lista: con viñetas, numerada o sin decoración. */
     type?: ListType;
+    /**
+     * Dibuja una línea entre filas con los tokens `separator.*`, con su aire a
+     * cada lado en lugar del `text.list.gap`. Default `false`: sin línea.
+     */
+    showSeparators?: boolean;
     children: React.ReactNode;
 }
 /**

package/dist/_types/atoms/NumberInput/NumberInput.d.ts

@@ -10,9 +10,20 @@ export interface NumberInputMessages {
     /** Nombre accesible del botón que suma un paso. */
     increment: string;
 }
+/**
+ * Cuándo avisa `onChange` de lo escrito a mano: con cada tecla (`'change'`, lo de
+ * siempre) o una sola vez al confirmar (`'blur'`). Los botones − y + avisan al
+ * momento en los dos modos.
+ */
+export type NumberInputCommitMode = 'change' | 'blur';
 export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange'> {
-    value?: number;
-    defaultValue?: number;
+    /**
+     * Valor controlado. `null` es «sin valor»: el campo se muestra vacío (y el
+     * `placeholder` se ve). Sigue siendo controlado; `undefined` es no controlado.
+     */
+    value?: number | null;
+    /** Valor inicial no controlado (default `0`). `null` arranca vacío. */
+    defaultValue?: number | null;
     min?: number;
     max?: number;
     step?: number;
@@ -20,6 +31,19 @@ export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'input'>
     disabled?: boolean;
     readOnly?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Variante para filas de lista (`trailing` de `ListItem`): botones y cifra
+     * justos, del ancho de 2–3 dígitos, sin estirarse. Es una variante de la
+     * talla `sm`, no una talla más: manda sobre `size`.
+     */
+    compact?: boolean;
+    /**
+     * Cuándo se avisa de lo escrito a mano. `'change'` (por defecto): con cada
+     * tecla. `'blur'`: una sola vez al salir del campo o al pulsar Enter; Escape
+     * descarta lo escrito y vuelve al último valor. Con `onEmpty`, dejar el campo
+     * vacío se avisa igual, al confirmar. − y + avisan al momento en los dos modos.
+     */
+    commitMode?: NumberInputCommitMode;
     error?: boolean;
     id?: string;
     name?: string;
@@ -40,6 +64,13 @@ export interface NumberInputProps extends Omit<ComponentPropsWithoutRef<'input'>
      */
     incrementLabel?: string;
     onChange?: (value: number) => void;
+    /**
+     * Se llama cuando quien teclea deja el campo vacío. Sin ella el campo se
+     * comporta como siempre (vaciar no emite nada y al salir recupera el último
+     * número); con ella, vaciar **es** un valor: el campo pasa a «sin valor» y
+     * esta función avisa de ello.
+     */
+    onEmpty?: () => void;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
 }

package/dist/_types/atoms/Text/Text.d.ts

@@ -5,13 +5,21 @@ export interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
      * `span` no añade significado, `em` marca énfasis de lectura (cambia cómo se
      * dice la frase) y `strong` marca importancia. No es una prop de estilo.
      */
-    as?: 'span' | 'em' | 'strong';
+    as?: 'span' | 'em' | 'strong' | 'del' | 's';
     /**
      * Intención del fragmento. `destructive` es la palabra que dice que algo se
      * pierde («esta acción **borra** el curso»); `success`, la que dice que salió
      * bien; `muted`, una aclaración secundaria.
      */
     tone?: 'default' | 'muted' | 'destructive' | 'success';
+    /**
+     * Tacha el fragmento con una línea y lo atenúa (tinta secundaria): lo que ya
+     * está hecho, como un producto que ya está en el carrito. Es **solo
+     * aspecto**: no dice nada al lector de pantalla. Si el tachado significa algo
+     * («este precio ya no vale»), usa `as="del"` o `as="s"`, que además lo tachan.
+     * Con un `tone` manda el color del tono.
+     */
+    strikethrough?: boolean;
     /**
      * Idioma de **este fragmento**, cuando no es el de la página: una cita, un
      * término sin traducir, un segmento de traducción. Marca el idioma para el
@@ -25,11 +33,13 @@ export interface TextProps extends React.ComponentPropsWithoutRef<'span'> {
 }
 /**
  * Texto **en línea**: un trozo de una frase que hay que marcar sin salirse de
- * ella. Dos usos, y ningún otro:
+ * ella. Tres usos, y ningún otro:
  *
  * - **Otro idioma** (`lang`): el fragmento se anuncia con la voz correcta y se
  *   corta según sus reglas. Antes esto era un `<span lang>` a mano en cada
  *   producto.
+ * - **Tachado** (`strikethrough`, o `as="del"`/`as="s"`): lo hecho o lo que ya
+ *   no vale, en tinta atenuada.
  * - **Intención** (`tone`): énfasis con carga —destructiva o de logro— en tinta
  *   de feedback. Es color de texto sobre la superficie, **nunca un relleno**:
  *   una palabra resaltada dentro de un párrafo no lleva fondo.

package/dist/_types/molecules/AutocompleteField/AutocompleteField.d.ts

@@ -0,0 +1,57 @@
+import './AutocompleteField.css';
+import { Autocomplete } from '../../atoms/Autocomplete/Autocomplete';
+import type { AutocompleteOption } from '../../atoms/Autocomplete/Autocomplete';
+export type { AutocompleteOption };
+export interface AutocompleteFieldProps {
+    /** `id` del control. Si no se pasa, se genera con `useId`. */
+    id?: string;
+    label: string;
+    /**
+     * Oculta la etiqueta a la vista (sigue leyéndola el lector de pantalla).
+     * Por defecto `false`: la etiqueta se ve.
+     * Sin valor, lo decide quien lo envuelva: dentro de un `FieldRow` que no
+     * es la primera de la lista, la etiqueta se oculta sola.
+     */
+    labelHidden?: boolean;
+    /** El texto del campo (controlado). El valor es lo escrito, coincida o no con una sugerencia. */
+    value?: string;
+    /** Texto inicial cuando el campo no está controlado. */
+    defaultValue?: string;
+    /** Se llama con el texto nuevo, al escribir y al elegir una sugerencia. */
+    onValueChange?: (value: string) => void;
+    /** Se llama, además, cuando se elige una sugerencia: para saber cuál fue. */
+    onSelect?: (option: AutocompleteOption) => void;
+    /** Sugerencias síncronas: lista fija que el control filtra por lo escrito. Excluyente con `onSearch`. */
+    options?: AutocompleteOption[];
+    /** Sugerencias asíncronas (o calculadas por el consumidor), con rebote. */
+    onSearch?: (query: string) => AutocompleteOption[] | Promise<AutocompleteOption[]>;
+    /** Milisegundos de rebote antes de llamar a `onSearch`. Default: 200. */
+    debounceMs?: number;
+    /** Caracteres mínimos para sugerir al escribir. Default: 1. */
+    minChars?: number;
+    placeholder?: string;
+    /** Nombre del campo en el formulario: el propio `<input>` lleva el texto. */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Campo obligatorio (`required` nativo). */
+    required?: boolean;
+    maxLength?: number;
+    /** Marca el control en error sin mensaje. Un `errorMessage` ya lo implica. */
+    error?: boolean;
+    /** Mensaje de error: se anuncia (`role="alert"`) y pone el control en error. */
+    errorMessage?: string;
+    /** Texto de ayuda, enlazado por `aria-describedby`. */
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
+    className?: string;
+    /** Nodo DOM donde montar el portal de la lista (ver `Autocomplete`). */
+    container?: React.ComponentProps<typeof Autocomplete>['container'];
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}
+/**
+ * El `Autocomplete` como campo de formulario: etiqueta, ayuda y error. El
+ * `ref` va al `<input>`; el `className`, al contenedor.
+ */
+export declare const AutocompleteField: import("react").ForwardRefExoticComponent<AutocompleteFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/_types/molecules/NumberInputField/NumberInputField.d.ts

@@ -1,5 +1,6 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import './NumberInputField.css';
+import { type NumberInputCommitMode } from '../../atoms/NumberInput/NumberInput';
 export interface NumberInputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange'> {
     /** `id` del control. Si no se pasa, se genera con `useId`. */
     id?: string;
@@ -11,8 +12,9 @@ export interface NumberInputFieldProps extends Omit<ComponentPropsWithoutRef<'in
      * es la primera de la lista, la etiqueta se oculta sola.
      */
     labelHidden?: boolean;
-    value?: number;
-    defaultValue?: number;
+    /** `null` es «sin valor»: el campo se muestra vacío. Ver `NumberInput`. */
+    value?: number | null;
+    defaultValue?: number | null;
     min?: number;
     max?: number;
     step?: number;
@@ -25,8 +27,18 @@ export interface NumberInputFieldProps extends Omit<ComponentPropsWithoutRef<'in
     /** Texto de ayuda, enlazado por `aria-describedby`. */
     helperText?: string;
     size?: 'sm' | 'md' | 'lg';
+    /** Variante para filas de lista: botones y cifra justos. Ver `NumberInput`. */
+    compact?: boolean;
+    /** Cuándo se avisa de lo escrito a mano: con cada tecla (`'change'`) o al salir/Enter (`'blur'`). Ver `NumberInput`. */
+    commitMode?: NumberInputCommitMode;
+    /** aria-label del botón que resta. Sin default: sale de `numberInput.decrement` del `BrandMessagesProvider`. */
+    decrementLabel?: string;
+    /** aria-label del botón que suma. Sin default: sale de `numberInput.increment` del `BrandMessagesProvider`. */
+    incrementLabel?: string;
     /** Recibe el valor ya normalizado, no el evento. */
     onChange?: (value: number) => void;
+    /** Quien teclea dejó el campo vacío; con ella, vaciar es un valor (`null`). Ver `NumberInput`. */
+    onEmpty?: () => void;
     /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
     className?: string;
 }

package/dist/autocomplete-field.css

@@ -0,0 +1 @@
+.autocomplete-field{gap:var(--autocomplete-field-gap);flex-direction:column;display:flex}.autocomplete-field__helper{font-family:var(--autocomplete-field-helper-font-family);font-size:var(--autocomplete-field-helper-font-size);font-weight:var(--autocomplete-field-helper-font-weight);line-height:var(--autocomplete-field-helper-line-height);color:var(--autocomplete-field-helper-color)}