@studiolxd/brand 41.1.0 → 43.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +118 -0
  2. package/dist/_shared/datepicker.js +75 -78
  3. package/dist/_types/atoms/AsyncMultiSelect/AsyncMultiSelect.d.ts +28 -5
  4. package/dist/_types/atoms/AsyncSelect/AsyncSelect.d.ts +26 -6
  5. package/dist/_types/atoms/InputPhone/InputPhone.d.ts +15 -4
  6. package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts +20 -1
  7. package/dist/_types/atoms/NumberInput/NumberInput.d.ts +14 -4
  8. package/dist/_types/atoms/OtpInput/OtpInput.d.ts +15 -4
  9. package/dist/_types/atoms/Select/Select.d.ts +18 -1
  10. package/dist/_types/atoms/TimeSelect/TimeSelect.d.ts +34 -6
  11. package/dist/_types/messages/BrandMessages.d.ts +31 -1
  12. package/dist/_types/messages/index.d.ts +1 -1
  13. package/dist/_types/molecules/Calendar/Calendar.d.ts +44 -13
  14. package/dist/_types/molecules/DatePicker/DatePicker.d.ts +56 -26
  15. package/dist/_types/molecules/DatePicker/dateMask.d.ts +9 -2
  16. package/dist/_types/molecules/DateTimeField/DateTimeField.d.ts +12 -12
  17. package/dist/_types/molecules/DocsSearch/DocsSearch.d.ts +31 -12
  18. package/dist/_types/molecules/FilterBar/FilterBar.d.ts +10 -1
  19. package/dist/_types/molecules/InputField/InputField.d.ts +16 -2
  20. package/dist/_types/molecules/MultiSelectField/MultiSelectField.d.ts +9 -1
  21. package/dist/_types/molecules/PasswordField/PasswordField.d.ts +22 -2
  22. package/dist/_types/molecules/SearchForm/SearchForm.d.ts +18 -6
  23. package/dist/_types/molecules/SelectField/SelectField.d.ts +5 -0
  24. package/dist/_types/molecules/TimeField/TimeField.d.ts +9 -2
  25. package/dist/_types/molecules/_shared/calendarGrid.d.ts +6 -2
  26. package/dist/async-multi-select.js +50 -49
  27. package/dist/async-select.js +89 -88
  28. package/dist/calendar.js +87 -86
  29. package/dist/docs-search.js +38 -37
  30. package/dist/filter-bar.css +1 -1
  31. package/dist/filter-bar.js +19 -17
  32. package/dist/input-field.js +66 -65
  33. package/dist/input-phone.js +39 -38
  34. package/dist/multi-select.js +109 -108
  35. package/dist/number-input.js +61 -60
  36. package/dist/otp-input.js +86 -85
  37. package/dist/password-field.js +46 -45
  38. package/dist/search-form.js +35 -34
  39. package/dist/select.js +75 -71
  40. package/dist/time-select.js +57 -56
  41. package/package.json +1 -1
@@ -1,4 +1,26 @@
1
1
  import './TimeSelect.css';
2
+ /**
3
+ * El cromo de la hora: cómo se llaman los dos desplegables y qué pone dentro
4
+ * mientras no hay hora elegida.
5
+ *
6
+ * **Las dos máscaras también son idioma, no formato.** `HH` y `MM` parecen
7
+ * notación técnica, pero son la inicial de una palabra —hora y minuto— y
8
+ * cambian con ella: en alemán se escriben `SS`/`MM` (*Stunde*, *Minute*). Lo
9
+ * que NO se traduce es el dibujo: dos cifras, la hora antes que el minuto y
10
+ * los dos puntos en medio; eso no lo decide ni la prop ni el catálogo.
11
+ *
12
+ * Las **cifras de las opciones** (`00`…`23`) tampoco están aquí: son datos.
13
+ */
14
+ export interface TimeSelectMessages {
15
+ /** Nombre accesible del desplegable de horas. */
16
+ hours: string;
17
+ /** Nombre accesible del desplegable de minutos. */
18
+ minutes: string;
19
+ /** Máscara del desplegable de horas sin valor: `HH`. */
20
+ maskHours: string;
21
+ /** Máscara del desplegable de minutos sin valor: `MM`. */
22
+ maskMinutes: string;
23
+ }
2
24
  export interface TimeValue {
3
25
  h: number;
4
26
  m: number;
@@ -27,18 +49,24 @@ export interface TimeSelectProps {
27
49
  /** Se añade DESPUÉS de las clases propias del componente. */
28
50
  className?: string;
29
51
  /**
30
- * aria-label del selector de horas. Default: "Horas" (castellano).
31
- * Una app multiidioma debe pasarla traducida.
52
+ * aria-label del selector de horas. **Sin default**: sin él, el texto sale
53
+ * de `timeSelect.hours` del `BrandMessagesProvider`.
32
54
  */
33
55
  hoursLabel?: string;
34
56
  /**
35
- * aria-label del selector de minutos. Default: "Minutos" (castellano).
36
- * Una app multiidioma debe pasarla traducida.
57
+ * aria-label del selector de minutos. **Sin default**: sin él, sale de
58
+ * `timeSelect.minutes` del `BrandMessagesProvider`.
37
59
  */
38
60
  minutesLabel?: string;
39
- /** Placeholder del selector de horas. Default: "HH" */
61
+ /**
62
+ * Máscara del selector de horas. **Sin default**: sin ella, sale de
63
+ * `timeSelect.maskHours` del `BrandMessagesProvider`.
64
+ */
40
65
  hoursPlaceholder?: string;
41
- /** Placeholder del selector de minutos. Default: "MM" */
66
+ /**
67
+ * Máscara del selector de minutos. **Sin default**: sin ella, sale de
68
+ * `timeSelect.maskMinutes` del `BrandMessagesProvider`.
69
+ */
42
70
  minutesPlaceholder?: string;
43
71
  }
44
72
  /**
@@ -1,6 +1,21 @@
1
1
  import type { PaginationMessages } from '../molecules/Pagination/Pagination';
2
2
  import type { TableMessages } from '../molecules/Table/Table';
3
3
  import type { DataTableMessages } from '../organisms/DataTable/DataTable';
4
+ import type { InputFieldMessages } from '../molecules/InputField/InputField';
5
+ import type { PasswordFieldMessages } from '../molecules/PasswordField/PasswordField';
6
+ import type { SelectMessages } from '../atoms/Select/Select';
7
+ import type { MultiSelectMessages } from '../atoms/MultiSelect/MultiSelect';
8
+ import type { NumberInputMessages } from '../atoms/NumberInput/NumberInput';
9
+ import type { OtpInputMessages } from '../atoms/OtpInput/OtpInput';
10
+ import type { InputPhoneMessages } from '../atoms/InputPhone/InputPhone';
11
+ import type { AsyncSelectMessages } from '../atoms/AsyncSelect/AsyncSelect';
12
+ import type { AsyncMultiSelectMessages } from '../atoms/AsyncMultiSelect/AsyncMultiSelect';
13
+ import type { DocsSearchMessages } from '../molecules/DocsSearch/DocsSearch';
14
+ import type { SearchFormMessages } from '../molecules/SearchForm/SearchForm';
15
+ import type { FilterBarMessages } from '../molecules/FilterBar/FilterBar';
16
+ import type { CalendarMessages } from '../molecules/Calendar/Calendar';
17
+ import type { DatePickerMessages } from '../molecules/DatePicker/DatePicker';
18
+ import type { TimeSelectMessages } from '../atoms/TimeSelect/TimeSelect';
4
19
  /**
5
20
  * El contrato de textos de la librería: un espacio por componente, y dentro
6
21
  * de cada espacio **todas las claves obligatorias**.
@@ -26,5 +41,20 @@ export interface BrandMessages {
26
41
  pagination: PaginationMessages;
27
42
  table: TableMessages;
28
43
  dataTable: DataTableMessages;
44
+ inputField: InputFieldMessages;
45
+ passwordField: PasswordFieldMessages;
46
+ select: SelectMessages;
47
+ multiSelect: MultiSelectMessages;
48
+ numberInput: NumberInputMessages;
49
+ otpInput: OtpInputMessages;
50
+ inputPhone: InputPhoneMessages;
51
+ asyncSelect: AsyncSelectMessages;
52
+ asyncMultiSelect: AsyncMultiSelectMessages;
53
+ docsSearch: DocsSearchMessages;
54
+ searchForm: SearchFormMessages;
55
+ filterBar: FilterBarMessages;
56
+ calendar: CalendarMessages;
57
+ datePicker: DatePickerMessages;
58
+ timeSelect: TimeSelectMessages;
29
59
  }
30
- export type { PaginationMessages, TableMessages, DataTableMessages };
60
+ export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, };
@@ -2,4 +2,4 @@ export { BrandMessagesProvider } from './BrandMessagesProvider';
2
2
  export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
3
3
  export { useBrandMessages } from './BrandMessagesContext';
4
4
  export type { BrandMessagesReader } from './BrandMessagesContext';
5
- export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, } from './BrandMessages';
5
+ export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, } from './BrandMessages';
@@ -1,4 +1,32 @@
1
1
  import './Calendar.css';
2
+ /**
3
+ * El cromo del calendario: las dos flechas —que cambian de nombre según la
4
+ * vista— y el rótulo de la rejilla de años. Dicen lo mismo en toda la suite,
5
+ * así que salen del catálogo y no de una prop por uso.
6
+ *
7
+ * **Lo que NO está aquí, y no es olvido:** los nombres de los meses, los de
8
+ * los días de la semana, las cifras del año y el nombre accesible de cada
9
+ * celda («lunes, 15 de enero de 2025»). Eso no es texto de interfaz sino
10
+ * **formato de fecha**: sale de `locale` con `Intl`, que además es quien sabe
11
+ * en qué día empieza la semana y con qué cifras se escribe el año. Traducirlo
12
+ * por catálogo sería reescribir a mano lo que el navegador ya trae bien.
13
+ *
14
+ * Tampoco está `gridLabel`: nombra a ESTE calendario («Fecha de alta»), que
15
+ * es contenido de la pantalla. Sin él la rejilla toma como nombre el título
16
+ * del mes visible, que ya viene del locale.
17
+ */
18
+ export interface CalendarMessages {
19
+ /** Nombre accesible de la flecha de retroceso sobre la rejilla de días. */
20
+ previousMonth: string;
21
+ /** Nombre accesible de la flecha de avance sobre la rejilla de días. */
22
+ nextMonth: string;
23
+ /** Nombre accesible de la flecha de retroceso sobre la rejilla de años. */
24
+ previousYears: string;
25
+ /** Nombre accesible de la flecha de avance sobre la rejilla de años. */
26
+ nextYears: string;
27
+ /** Nombre accesible de la rejilla de años. */
28
+ yearGrid: string;
29
+ }
2
30
  export interface CalendarProps {
3
31
  /** Fecha seleccionada (modo controlado) */
4
32
  value?: Date | null;
@@ -21,34 +49,37 @@ export interface CalendarProps {
21
49
  /** Locale para nombres de mes y día. Default: 'es-ES' */
22
50
  locale?: string;
23
51
  /**
24
- * aria-label del botón de mes anterior. Default: "Mes anterior" (castellano).
25
- * Una app multiidioma debe pasarla traducida.
52
+ * aria-label del botón de mes anterior. **Sin default**: sin él, el texto
53
+ * sale de `calendar.previousMonth` del `BrandMessagesProvider`.
26
54
  */
27
55
  previousMonthLabel?: string;
28
56
  /**
29
- * aria-label del botón de mes siguiente. Default: "Mes siguiente" (castellano).
30
- * Una app multiidioma debe pasarla traducida.
57
+ * aria-label del botón de mes siguiente. **Sin default**: sin él, el texto
58
+ * sale de `calendar.nextMonth` del `BrandMessagesProvider`.
31
59
  */
32
60
  nextMonthLabel?: string;
33
61
  /**
34
- * aria-label del botón de retroceso **en la vista de años**. Default: "Años
35
- * anteriores" (castellano). Una app multiidioma debe pasarla traducida.
62
+ * aria-label del botón de retroceso **en la vista de años**. **Sin
63
+ * default**: sin él, sale de `calendar.previousYears` del
64
+ * `BrandMessagesProvider`.
36
65
  */
37
66
  previousYearsLabel?: string;
38
67
  /**
39
- * aria-label del botón de avance en la vista de años. Default: "Años
40
- * siguientes" (castellano).
68
+ * aria-label del botón de avance en la vista de años. **Sin default**: sin
69
+ * él, sale de `calendar.nextYears` del `BrandMessagesProvider`.
41
70
  */
42
71
  nextYearsLabel?: string;
43
72
  /**
44
- * aria-label de la rejilla de años. Default: "Elegir año" (castellano).
73
+ * aria-label de la rejilla de años. **Sin default**: sin él, sale de
74
+ * `calendar.yearGrid` del `BrandMessagesProvider`.
45
75
  */
46
76
  yearGridLabel?: string;
47
77
  /**
48
- * aria-label de la rejilla de días. Sin ella, la rejilla toma como nombre el
49
- * título del mes visible. Cuando el calendario vive dentro de un panel con
50
- * nombre propio (el `Popover` de `DatePicker`), conviene pasarlo aquí.
51
- * Es texto visible para lectores: una app multiidioma debe pasarlo traducido.
78
+ * aria-label de la rejilla de días. **No sale del catálogo**: nombra a ESTE
79
+ * calendario («Fecha de alta»), que es contenido de la pantalla. Sin ella,
80
+ * la rejilla toma como nombre el título del mes visible. Cuando el
81
+ * calendario vive dentro de un panel con nombre propio (el `Popover` de
82
+ * `DatePicker`), conviene pasarlo aquí.
52
83
  */
53
84
  gridLabel?: string;
54
85
  /** Tamaño del componente. Default: 'md' */
@@ -1,6 +1,38 @@
1
1
  import type { CalendarProps } from '../Calendar/Calendar';
2
2
  import { type DateMaskLetters } from './dateMask';
3
3
  import './DatePicker.css';
4
+ /**
5
+ * El cromo del selector de fecha: el botón que abre el calendario, el aviso de
6
+ * fecha incompleta, el nombre del panel y **las letras de la máscara**.
7
+ *
8
+ * Las letras están aquí a propósito, y son el caso interesante de esta
9
+ * familia. `dd/mm/aaaa` tiene dos mitades que no se deciden igual:
10
+ *
11
+ * - **El orden y el separador son formato**: que `es` escriba 25/09/2026,
12
+ * `en-US` 09/25/2026 y `de` 25.09.2026 sale del `locale` con `Intl`
13
+ * (`dateMask.ts`), no de una prop ni del catálogo. Una app en inglés
14
+ * mostrando fechas españolas las quiere en orden español.
15
+ * - **Las letras son idioma**: `aaaa` es «año», `yyyy` es *year* y `jjjj` es
16
+ * *Jahr*. Son la abreviatura de una palabra, así que se traducen — y por eso
17
+ * son cromo y salen del catálogo, como cualquier otro rótulo.
18
+ *
19
+ * Por eso el catálogo trae solo las tres letras y no la máscara montada: la
20
+ * máscara la arma el componente poniendo las letras en el orden del locale.
21
+ */
22
+ export interface DatePickerMessages {
23
+ /** Nombre accesible del botón que abre el calendario. */
24
+ openCalendar: string;
25
+ /** Aviso de fecha incompleta o inexistente, anunciado con `role="alert"`. */
26
+ invalid: string;
27
+ /** Nombre accesible del panel del calendario (`role="dialog"`). */
28
+ calendar: string;
29
+ /**
30
+ * Las letras de la máscara, una por parte: `{ day: 'dd', month: 'mm',
31
+ * year: 'aaaa' }`. El orden y el separador NO están aquí: salen del
32
+ * `locale`.
33
+ */
34
+ maskLetters: DateMaskLetters;
35
+ }
4
36
  export interface DatePickerProps {
5
37
  value?: Date | null;
6
38
  /**
@@ -9,23 +41,28 @@ export interface DatePickerProps {
9
41
  */
10
42
  onChange?: (date: Date | null) => void;
11
43
  /**
12
- * Pista dentro del campo. Por defecto, la máscara del locale con las letras
13
- * castellanas (`dd/mm/aaaa`, `mm/dd/aaaa` en `en-US`). Una app multiidioma
14
- * pasa `maskLetters` para traducir las letras sin tocar el orden.
44
+ * Pista dentro del campo. Sin ella, la máscara del locale con las letras
45
+ * del catálogo (`dd/mm/aaaa`, `mm/dd/aaaa` en `en-US`). Es la anulación
46
+ * puntual: un campo que quiere decir otra cosa («Desde») la pasa.
15
47
  */
16
48
  placeholder?: string;
17
49
  /**
18
- * Letras de la máscara del marcador de posición. Default castellano
19
- * (`{ day: 'dd', month: 'mm', year: 'aaaa' }`). El orden y el separador no
20
- * son props: salen del `locale` con `Intl`.
50
+ * Letras de la máscara del marcador de posición. **Sin default**: sin
51
+ * ellas, salen de `datePicker.maskLetters` del `BrandMessagesProvider`. El
52
+ * orden y el separador no son props ni catálogo: salen del `locale` con
53
+ * `Intl`.
21
54
  */
22
55
  maskLetters?: DateMaskLetters;
23
56
  /**
24
- * Mensaje cuando lo escrito no es una fecha completa y válida. Default
25
- * castellano; se anuncia con `role="alert"`.
57
+ * Mensaje cuando lo escrito no es una fecha completa y válida. **Sin
58
+ * default**: sin él, sale de `datePicker.invalid` del
59
+ * `BrandMessagesProvider`; se anuncia con `role="alert"`.
26
60
  */
27
61
  invalidMessage?: string;
28
- /** Nombre accesible del botón que abre el calendario. Default castellano. */
62
+ /**
63
+ * Nombre accesible del botón que abre el calendario. **Sin default**: sin
64
+ * él, sale de `datePicker.openCalendar` del `BrandMessagesProvider`.
65
+ */
29
66
  openCalendarLabel?: string;
30
67
  minDate?: CalendarProps['minDate'];
31
68
  maxDate?: CalendarProps['maxDate'];
@@ -43,29 +80,22 @@ export interface DatePickerProps {
43
80
  'aria-describedby'?: string;
44
81
  /** Nombre accesible cuando el control va suelto. En un campo lo nombra la etiqueta. */
45
82
  'aria-label'?: string;
46
- /** Nombre accesible del panel del calendario (`role="dialog"`). */
47
- calendarLabel?: string;
48
83
  /**
49
- * aria-label del botón de mes anterior del calendario. Default: «Mes
50
- * anterior» (castellano). Una app multiidioma debe pasarla traducida.
84
+ * Nombre accesible del panel del calendario (`role="dialog"`). **Sin
85
+ * default**: sin él, sale de `datePicker.calendar` del
86
+ * `BrandMessagesProvider`. En un campo lo pone la etiqueta del campo, que es
87
+ * contenido de la pantalla y gana como cualquier prop.
51
88
  */
89
+ calendarLabel?: string;
90
+ /** aria-label del botón de mes anterior. Sin él, `calendar.previousMonth`. */
52
91
  previousMonthLabel?: CalendarProps['previousMonthLabel'];
53
- /**
54
- * aria-label del botón de mes siguiente. Default: «Mes siguiente»
55
- * (castellano).
56
- */
92
+ /** aria-label del botón de mes siguiente. Sin él, `calendar.nextMonth`. */
57
93
  nextMonthLabel?: CalendarProps['nextMonthLabel'];
58
- /**
59
- * aria-label del botón de retroceso **en la vista de años**. Default: «Años
60
- * anteriores» (castellano).
61
- */
94
+ /** aria-label del retroceso en la vista de años. Sin él, `calendar.previousYears`. */
62
95
  previousYearsLabel?: CalendarProps['previousYearsLabel'];
63
- /**
64
- * aria-label del botón de avance en la vista de años. Default: «Años
65
- * siguientes» (castellano).
66
- */
96
+ /** aria-label del avance en la vista de años. Sin él, `calendar.nextYears`. */
67
97
  nextYearsLabel?: CalendarProps['nextYearsLabel'];
68
- /** aria-label de la rejilla de años. Default: «Elegir año» (castellano). */
98
+ /** aria-label de la rejilla de años. Sin él, `calendar.yearGrid`. */
69
99
  yearGridLabel?: CalendarProps['yearGridLabel'];
70
100
  /**
71
101
  * aria-label de la rejilla de días. Por defecto toma `calendarLabel`, que ya
@@ -1,11 +1,18 @@
1
1
  export type DatePartName = 'day' | 'month' | 'year';
2
- /** Letras de la máscara del marcador de posición: `dd/mm/aaaa` en castellano. */
2
+ /**
3
+ * Letras de la máscara del marcador de posición, una por parte.
4
+ *
5
+ * **No hay juego por defecto, y es deliberado**: las letras se traducen
6
+ * (`aaaa` es «año», `yyyy` es *year*, `jjjj` es *Jahr*), así que salen del
7
+ * catálogo de la aplicación —`datePicker.maskLetters`— igual que cualquier
8
+ * otro rótulo. Lo que este módulo decide es el **orden** y el **separador**,
9
+ * que son formato y salen del `locale`.
10
+ */
3
11
  export interface DateMaskLetters {
4
12
  day: string;
5
13
  month: string;
6
14
  year: string;
7
15
  }
8
- export declare const SPANISH_MASK_LETTERS: DateMaskLetters;
9
16
  export interface DateMask {
10
17
  /** Orden de las partes en ese locale, p. ej. `['day', 'month', 'year']`. */
11
18
  order: DatePartName[];
@@ -33,29 +33,29 @@ export interface DateTimeFieldProps {
33
33
  locale?: string;
34
34
  /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
35
35
  className?: string;
36
- /** Nombre accesible del panel del calendario. Default: la etiqueta del campo. */
36
+ /** Nombre accesible del panel del calendario. Sin él, la etiqueta del campo. */
37
37
  calendarLabel?: DatePickerProps['calendarLabel'];
38
- /** Nombre accesible del botón que abre el calendario. Default castellano. */
38
+ /** Nombre accesible del botón que abre el calendario. Sin él, `datePicker.openCalendar`. */
39
39
  openCalendarLabel?: DatePickerProps['openCalendarLabel'];
40
- /** Mensaje de fecha incompleta del campo de texto. Default castellano. */
40
+ /** Mensaje de fecha incompleta del campo de texto. Sin él, `datePicker.invalid`. */
41
41
  invalidMessage?: DatePickerProps['invalidMessage'];
42
- /** Letras de la máscara del marcador de posición. Default castellano. */
42
+ /** Letras de la máscara del marcador de posición. Sin ellas, `datePicker.maskLetters`. */
43
43
  maskLetters?: DatePickerProps['maskLetters'];
44
- /** aria-label del botón de mes anterior del calendario. Default castellano. */
44
+ /** aria-label del botón de mes anterior. Sin él, `calendar.previousMonth`. */
45
45
  previousMonthLabel?: DatePickerProps['previousMonthLabel'];
46
- /** aria-label del botón de mes siguiente. Default castellano. */
46
+ /** aria-label del botón de mes siguiente. Sin él, `calendar.nextMonth`. */
47
47
  nextMonthLabel?: DatePickerProps['nextMonthLabel'];
48
- /** aria-label del botón de retroceso en la vista de años. Default castellano. */
48
+ /** aria-label del retroceso en la vista de años. Sin él, `calendar.previousYears`. */
49
49
  previousYearsLabel?: DatePickerProps['previousYearsLabel'];
50
- /** aria-label del botón de avance en la vista de años. Default castellano. */
50
+ /** aria-label del avance en la vista de años. Sin él, `calendar.nextYears`. */
51
51
  nextYearsLabel?: DatePickerProps['nextYearsLabel'];
52
- /** aria-label de la rejilla de años. Default castellano. */
52
+ /** aria-label de la rejilla de años. Sin él, `calendar.yearGrid`. */
53
53
  yearGridLabel?: DatePickerProps['yearGridLabel'];
54
- /** aria-label de la rejilla de días. Default: `calendarLabel`. */
54
+ /** aria-label de la rejilla de días. Sin él, el nombre del panel. */
55
55
  gridLabel?: DatePickerProps['gridLabel'];
56
- /** aria-label del desplegable de horas. Default: "Horas" (castellano). */
56
+ /** aria-label del desplegable de horas. Sin él, `timeSelect.hours`. */
57
57
  hoursLabel?: string;
58
- /** aria-label del desplegable de minutos. Default: "Minutos" (castellano). */
58
+ /** aria-label del desplegable de minutos. Sin él, `timeSelect.minutes`. */
59
59
  minutesLabel?: string;
60
60
  onChange?: (date: Date | null) => void;
61
61
  /** Se llama al salir de cualquiera de los dos controles: el campo de fecha (un `<input>`) o los desplegables de hora (dos `<button>`). */
@@ -17,6 +17,27 @@ export type DocsSearchRenderLinkProps = React.AnchorHTMLAttributes<HTMLAnchorEle
17
17
  href: string;
18
18
  className: string;
19
19
  };
20
+ /**
21
+ * Los textos que el buscador emite por su cuenta. Los seis son cromo: en toda
22
+ * la suite el buscador de la documentación se llama igual y avisa igual. Los
23
+ * **resultados** no están aquí — son datos que llegan por `results`.
24
+ *
25
+ * El nombre del aspa tampoco: el aspa es la del `InputField` que hay debajo y
26
+ * sale de `inputField.clear`. Es la misma palabra y el mismo botón; darle una
27
+ * clave propia solo obligaría a traducir «Borrar» dos veces.
28
+ */
29
+ export interface DocsSearchMessages {
30
+ /** Etiqueta del campo, que nombra también el punto de referencia. */
31
+ label: string;
32
+ /** Pista dentro del campo. */
33
+ placeholder: string;
34
+ /** Nombre accesible de la lista de resultados. */
35
+ results: string;
36
+ /** Aviso cuando la búsqueda no encuentra nada. */
37
+ empty: string;
38
+ /** Aviso mientras se busca. */
39
+ loading: string;
40
+ }
20
41
  export interface DocsSearchProps {
21
42
  /** `id` del campo. Ata la etiqueta con el campo y el campo con la lista. */
22
43
  id?: string;
@@ -29,15 +50,14 @@ export interface DocsSearchProps {
29
50
  /** Hay una búsqueda en curso: el aviso de estado lo dice. */
30
51
  loading?: boolean;
31
52
  /**
32
- * Etiqueta del campo. Default castellano.
33
- * @default 'Buscar en la documentación'
53
+ * Etiqueta del campo. **Sin default**: sale de `docsSearch.label` del
54
+ * `BrandMessagesProvider`.
34
55
  */
35
56
  label?: string;
36
57
  /** Oculta la etiqueta a la vista; el lector de pantalla la sigue leyendo. */
37
58
  labelHidden?: boolean;
38
59
  /**
39
- * Pista dentro del campo. Default castellano.
40
- * @default 'Buscar…'
60
+ * Pista dentro del campo. **Sin default**: sale de `docsSearch.placeholder`.
41
61
  */
42
62
  placeholder?: string;
43
63
  /**
@@ -47,23 +67,22 @@ export interface DocsSearchProps {
47
67
  */
48
68
  clearable?: boolean;
49
69
  /**
50
- * Nombre accesible del botón de borrado. Default castellano.
51
- * @default 'Borrar'
70
+ * Nombre accesible del botón de borrado. Reenvío puro al `InputField`: sin
71
+ * él, el texto sale de `inputField.clear` del `BrandMessagesProvider`.
52
72
  */
53
73
  clearLabel?: string;
54
74
  /**
55
- * Nombre accesible de la lista de resultados. Default castellano.
56
- * @default 'Resultados'
75
+ * Nombre accesible de la lista de resultados. **Sin default**: sale de
76
+ * `docsSearch.results`.
57
77
  */
58
78
  resultsLabel?: string;
59
79
  /**
60
- * Aviso cuando la búsqueda no encuentra nada. Default castellano.
61
- * @default 'Sin resultados.'
80
+ * Aviso cuando la búsqueda no encuentra nada. **Sin default**: sale de
81
+ * `docsSearch.empty`.
62
82
  */
63
83
  emptyLabel?: string;
64
84
  /**
65
- * Aviso mientras se busca. Default castellano.
66
- * @default 'Buscando…'
85
+ * Aviso mientras se busca. **Sin default**: sale de `docsSearch.loading`.
67
86
  */
68
87
  loadingLabel?: string;
69
88
  /** Talla del campo. */
@@ -1,5 +1,14 @@
1
1
  import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
2
  import './FilterBar.css';
3
+ /**
4
+ * El único texto que la barra emite por su cuenta: su nombre accesible como
5
+ * punto de referencia de búsqueda. Los rótulos de los filtros no están aquí —
6
+ * los escribe cada campo, y dicen qué filtran.
7
+ */
8
+ export interface FilterBarMessages {
9
+ /** Nombre accesible del punto de referencia `search` que es la barra. */
10
+ label: string;
11
+ }
3
12
  export interface FilterBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
4
13
  /**
5
14
  * El buscador: el campo de búsqueda del sistema —un `InputField kind="search"`,
@@ -22,7 +31,7 @@ export interface FilterBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'c
22
31
  actions?: ReactNode;
23
32
  /**
24
33
  * Nombre accesible del punto de referencia `search` que es la barra.
25
- * Default: «Filtros» (castellano). Una app multiidioma debe pasarlo traducido.
34
+ * **Sin default**: sale de `filterBar.label` del `BrandMessagesProvider`.
26
35
  */
27
36
  ariaLabel?: string;
28
37
  /** Se añade DESPUÉS de las clases propias. */
@@ -1,5 +1,18 @@
1
1
  import { type ComponentPropsWithoutRef } from 'react';
2
2
  import './InputField.css';
3
+ /**
4
+ * El único texto que el campo emite por su cuenta: el nombre accesible del
5
+ * aspa de borrado. Es cromo —dice la misma cosa en toda la suite—, así que
6
+ * sale del catálogo común y no de quien monta el campo.
7
+ *
8
+ * El `label`, el `placeholder`, el `helperText` y el `errorMessage` NO están
9
+ * aquí: son el contenido de ESTE campo, y ningún catálogo común puede saber
10
+ * qué dicen.
11
+ */
12
+ export interface InputFieldMessages {
13
+ /** Nombre accesible del botón que vacía un campo de búsqueda. */
14
+ clear: string;
15
+ }
3
16
  export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue'> {
4
17
  id: string;
5
18
  label: string;
@@ -33,8 +46,9 @@ export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>,
33
46
  */
34
47
  clearable?: boolean;
35
48
  /**
36
- * Nombre accesible del botón de borrado. Default castellano.
37
- * @default 'Borrar'
49
+ * Nombre accesible del botón de borrado. **Sin default**: sale de
50
+ * `inputField.clear` del `BrandMessagesProvider`, y esta prop es la
51
+ * anulación puntual de un uso concreto.
38
52
  */
39
53
  clearLabel?: string;
40
54
  /** Se llama tras vaciar el campo desde el aspa, ya con el foco devuelto. */
@@ -15,6 +15,11 @@ export interface MultiSelectFieldProps {
15
15
  options: MultiSelectOption[];
16
16
  value?: string[];
17
17
  defaultValue?: string[];
18
+ /**
19
+ * Marcador de sitio del control sin valor elegido. Reenvío puro al `MultiSelect`:
20
+ * sin él, el texto sale de `multiSelect.placeholder` del `BrandMessagesProvider`.
21
+ * Se pasa solo cuando el marcador dice algo de ESTE campo.
22
+ */
18
23
  placeholder?: string;
19
24
  /** Nombre del campo en el formulario: se monta un input oculto por valor elegido. */
20
25
  name?: string;
@@ -29,7 +34,10 @@ export interface MultiSelectFieldProps {
29
34
  size?: 'sm' | 'md' | 'lg';
30
35
  /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
31
36
  className?: string;
32
- /** aria-label del botón que quita un valor. Default: `Quitar ${etiqueta}` (castellano). */
37
+ /**
38
+ * aria-label del botón que quita un valor. Reenvío puro al `MultiSelect`:
39
+ * sin él, el texto sale de `multiSelect.remove` del `BrandMessagesProvider`.
40
+ */
33
41
  removeLabel?: (label: string) => string;
34
42
  onValueChange?: (value: string[]) => void;
35
43
  onBlur?: React.FocusEventHandler<HTMLDivElement>;
@@ -1,4 +1,18 @@
1
1
  import './PasswordField.css';
2
+ /**
3
+ * Los dos textos que el campo emite por su cuenta: las dos caras del
4
+ * interruptor de mostrar/ocultar. Son cromo —dicen lo mismo en toda la
5
+ * suite—, y por eso salen del catálogo común.
6
+ *
7
+ * El `label`, el `placeholder`, el `helperText` y el `errorMessage` no están
8
+ * aquí: son el contenido de ESTE campo.
9
+ */
10
+ export interface PasswordFieldMessages {
11
+ /** Nombre accesible del interruptor con la contraseña oculta. */
12
+ show: string;
13
+ /** Nombre accesible del interruptor con la contraseña a la vista. */
14
+ hide: string;
15
+ }
2
16
  export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
3
17
  /**
4
18
  * Etiqueta del campo. **Opcional**: si se omite, el componente renderiza solo
@@ -18,9 +32,15 @@ export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<
18
32
  action?: React.ReactNode;
19
33
  /** Tamaño del campo. */
20
34
  size?: 'sm' | 'md' | 'lg';
21
- /** aria-label del toggle cuando la contraseña está oculta. Default: "Mostrar contraseña". */
35
+ /**
36
+ * aria-label del toggle cuando la contraseña está oculta. **Sin default**:
37
+ * sale de `passwordField.show` del `BrandMessagesProvider`.
38
+ */
22
39
  showPasswordLabel?: string;
23
- /** aria-label del toggle cuando la contraseña es visible. Default: "Ocultar contraseña". */
40
+ /**
41
+ * aria-label del toggle cuando la contraseña es visible. **Sin default**:
42
+ * sale de `passwordField.hide` del `BrandMessagesProvider`.
43
+ */
24
44
  hidePasswordLabel?: string;
25
45
  /**
26
46
  * Se añade DESPUÉS de las clases propias, sobre el wrapper raíz `.password-field`.
@@ -1,4 +1,17 @@
1
1
  import './SearchForm.css';
2
+ /**
3
+ * Los tres textos que el buscador emite por su cuenta. Son cromo: el buscador
4
+ * de sitio se llama igual en toda la suite, y ni el rótulo ni la pista dicen
5
+ * nada de lo que se busca en ESTA pantalla.
6
+ */
7
+ export interface SearchFormMessages {
8
+ /** Etiqueta del campo; nombra también el punto de referencia `search`. */
9
+ label: string;
10
+ /** Pista dentro del campo. */
11
+ placeholder: string;
12
+ /** Nombre accesible del botón de envío. */
13
+ submit: string;
14
+ }
2
15
  export interface SearchFormProps {
3
16
  /** `id` del campo. Si no se pasa, el componente genera uno estable. */
4
17
  id?: string;
@@ -28,8 +41,7 @@ export interface SearchFormProps {
28
41
  method?: 'get' | 'post';
29
42
  /**
30
43
  * Etiqueta del campo. Nombra también el punto de referencia `search`.
31
- * Default castellano.
32
- * @default 'Buscar'
44
+ * **Sin default**: sale de `searchForm.label` del `BrandMessagesProvider`.
33
45
  */
34
46
  label?: string;
35
47
  /**
@@ -38,13 +50,13 @@ export interface SearchFormProps {
38
50
  */
39
51
  labelHidden?: boolean;
40
52
  /**
41
- * Pista dentro del campo. Default castellano.
42
- * @default 'Buscar…'
53
+ * Pista dentro del campo. **Sin default**: sale de
54
+ * `searchForm.placeholder`.
43
55
  */
44
56
  placeholder?: string;
45
57
  /**
46
- * Nombre accesible del botón de envío. Default castellano.
47
- * @default 'Buscar'
58
+ * Nombre accesible del botón de envío. **Sin default**: sale de
59
+ * `searchForm.submit`.
48
60
  */
49
61
  submitLabel?: string;
50
62
  /**
@@ -19,6 +19,11 @@ export interface SelectFieldProps {
19
19
  options: SelectOptionOrGroup[];
20
20
  value?: string;
21
21
  defaultValue?: string;
22
+ /**
23
+ * Marcador de sitio del control sin valor elegido. Reenvío puro al `Select`:
24
+ * sin él, el texto sale de `select.placeholder` del `BrandMessagesProvider`.
25
+ * Se pasa solo cuando el marcador dice algo de ESTE campo.
26
+ */
22
27
  placeholder?: string;
23
28
  /** Nombre del campo en el formulario: Base UI monta un input oculto con el valor. */
24
29
  name?: string;