@studiolxd/brand 45.1.0 → 47.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.
- package/CHANGELOG.md +168 -0
- package/dist/_shared/portal-container.js +9 -0
- package/dist/_types/atoms/AsyncMultiSelect/AsyncMultiSelect.d.ts +8 -7
- package/dist/_types/atoms/AsyncSelect/AsyncSelect.d.ts +8 -6
- package/dist/_types/atoms/InputPhone/InputPhone.d.ts +8 -5
- package/dist/_types/atoms/MenuButton/MenuButton.d.ts +22 -2
- package/dist/_types/atoms/MultiSelect/MultiSelect.d.ts +8 -6
- package/dist/_types/atoms/Popover/Popover.d.ts +8 -1
- package/dist/_types/atoms/Select/Select.d.ts +8 -7
- package/dist/_types/atoms/Tooltip/Tooltip.d.ts +7 -0
- package/dist/_types/constants/portal-container.d.ts +42 -0
- package/dist/_types/messages/BrandMessages.d.ts +41 -1
- package/dist/_types/messages/index.d.ts +1 -1
- package/dist/_types/molecules/AppLauncher/AppLauncher.d.ts +43 -8
- package/dist/_types/molecules/Breadcrumb/Breadcrumb.d.ts +10 -2
- package/dist/_types/molecules/CommandPalette/CommandPalette.d.ts +43 -8
- package/dist/_types/molecules/Consent/Consent.d.ts +93 -20
- package/dist/_types/molecules/Menu/Menu.d.ts +8 -1
- package/dist/_types/molecules/Modal/Modal.d.ts +8 -6
- package/dist/_types/molecules/NotificationButton/NotificationButton.d.ts +17 -4
- package/dist/_types/molecules/NotificationPanel/NotificationPanel.d.ts +54 -8
- package/dist/_types/molecules/OrgSwitcher/OrgSwitcher.d.ts +15 -1
- package/dist/_types/molecules/PrevNextNav/PrevNextNav.d.ts +17 -2
- package/dist/_types/molecules/Sheet/Sheet.d.ts +8 -7
- package/dist/_types/molecules/SidebarNav/SidebarNav.d.ts +18 -3
- package/dist/_types/molecules/SiteNav/SiteNav.d.ts +9 -0
- package/dist/_types/molecules/TableOfContents/TableOfContents.d.ts +11 -2
- package/dist/_types/molecules/UserMenu/UserMenu.d.ts +16 -1
- package/dist/_types/sections/AppHeader/AppHeader.d.ts +8 -2
- package/dist/_types/sections/AppRoot/AppRoot.d.ts +12 -1
- package/dist/_types/sections/AppShell/AppShell.d.ts +14 -1
- package/dist/_types/sections/FloatingDock/FloatingDock.d.ts +33 -3
- package/dist/_types/sections/Sidebar/Sidebar.d.ts +27 -3
- package/dist/_types/sections/SiteHeader/SiteHeader.d.ts +22 -3
- package/dist/_types/sections/SiteShell/SiteShell.d.ts +11 -5
- package/dist/_types/templates/OnboardingShell/OnboardingShell.d.ts +19 -2
- package/dist/_types/templates/PublicPageShell/PublicPageShell.d.ts +42 -6
- package/dist/app-header.js +1 -1
- package/dist/app-launcher.js +73 -63
- package/dist/app-root.js +10 -8
- package/dist/app-shell.js +51 -50
- package/dist/async-multi-select.js +65 -64
- package/dist/async-select.js +49 -48
- package/dist/breadcrumb.js +24 -21
- package/dist/command-palette.js +38 -36
- package/dist/consent.js +75 -73
- package/dist/floating-dock.js +42 -41
- package/dist/input-phone.js +38 -37
- package/dist/menu-button.js +16 -14
- package/dist/menu.js +44 -40
- package/dist/modal.js +32 -31
- package/dist/multi-select.js +106 -105
- package/dist/notification-button.js +18 -17
- package/dist/notification-panel.js +81 -80
- package/dist/onboarding-shell.js +36 -35
- package/dist/org-switcher.js +64 -59
- package/dist/popover.js +27 -22
- package/dist/prev-next-nav.js +38 -36
- package/dist/public-page-shell.js +24 -20
- package/dist/select.js +70 -69
- package/dist/sheet.js +30 -29
- package/dist/sidebar-nav.js +91 -90
- package/dist/sidebar.js +72 -71
- package/dist/site-header.js +44 -43
- package/dist/site-nav.js +27 -25
- package/dist/site-shell.js +23 -15
- package/dist/table-of-contents.js +30 -27
- package/dist/toaster.js +57 -53
- package/dist/tooltip.js +45 -41
- package/dist/user-menu.js +58 -52
- package/package.json +1 -1
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import './CommandPalette.css';
|
|
3
|
+
/**
|
|
4
|
+
* El cromo de la paleta, y **solo el cromo**: las cuatro cosas que la paleta
|
|
5
|
+
* dice por su cuenta, sin que se las pase nadie.
|
|
6
|
+
*
|
|
7
|
+
* Ninguna nombra un comando: la paleta se llama igual en todas las pantallas
|
|
8
|
+
* («Buscar un comando»), el buscador pide lo mismo, el vacío dice que no hay
|
|
9
|
+
* nada y la lista solo necesita un nombre para el lector. Lo que sí cambia
|
|
10
|
+
* —los grupos y sus ítems— viaja en `groups` y lo escribe la aplicación.
|
|
11
|
+
*
|
|
12
|
+
* El aspa **no está aquí**: es un reenvío puro al `Modal`, y sin `closeLabel`
|
|
13
|
+
* lee `modal.close` como cualquier otro diálogo.
|
|
14
|
+
*/
|
|
15
|
+
export interface CommandPaletteMessages {
|
|
16
|
+
/** Título accesible y visible del diálogo. */
|
|
17
|
+
title: string;
|
|
18
|
+
/** Marcador del buscador. */
|
|
19
|
+
placeholder: string;
|
|
20
|
+
/** Texto del estado «sin resultados». */
|
|
21
|
+
empty: string;
|
|
22
|
+
/** Nombre accesible de la lista de resultados (`role="listbox"`). */
|
|
23
|
+
list: string;
|
|
24
|
+
}
|
|
3
25
|
export interface CommandPaletteItem {
|
|
4
26
|
/** Clave estable del ítem. */
|
|
5
27
|
id: string;
|
|
@@ -24,17 +46,30 @@ export interface CommandPaletteProps {
|
|
|
24
46
|
* filtrar no se renderizan — el call-site no necesita condicionarlos.
|
|
25
47
|
*/
|
|
26
48
|
groups: CommandPaletteGroup[];
|
|
27
|
-
/** Título accesible y visible del diálogo. */
|
|
28
|
-
title: string;
|
|
29
|
-
placeholder: string;
|
|
30
|
-
/** Texto del estado "sin resultados". */
|
|
31
|
-
emptyLabel: string;
|
|
32
49
|
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
50
|
+
* Título accesible y visible del diálogo. **Sin default**: sin él, sale de
|
|
51
|
+
* `commandPalette.title` del `BrandMessagesProvider`.
|
|
52
|
+
*/
|
|
53
|
+
title?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Marcador del buscador. **Sin default**: sin él, sale de
|
|
56
|
+
* `commandPalette.placeholder` del proveedor.
|
|
57
|
+
*/
|
|
58
|
+
placeholder?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Texto del estado «sin resultados». **Sin default**: sin él, sale de
|
|
61
|
+
* `commandPalette.empty` del proveedor.
|
|
62
|
+
*/
|
|
63
|
+
emptyLabel?: string;
|
|
64
|
+
/**
|
|
65
|
+
* Nombre accesible de la lista de resultados (`role="listbox"`). **Sin
|
|
66
|
+
* default**: sin ella, sale de `commandPalette.list` del proveedor.
|
|
35
67
|
*/
|
|
36
68
|
listLabel?: string;
|
|
37
|
-
/**
|
|
69
|
+
/**
|
|
70
|
+
* Nombre accesible del aspa del diálogo. **Reenvío puro** al `Modal`: sin
|
|
71
|
+
* él, el aspa lee `modal.close` del proveedor.
|
|
72
|
+
*/
|
|
38
73
|
closeLabel?: string;
|
|
39
74
|
/**
|
|
40
75
|
* Tecla del atajo global (con ⌘ o Ctrl) que abre y cierra la paleta.
|
|
@@ -1,6 +1,43 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import './Consent.css';
|
|
3
3
|
import { Modal } from '../Modal/Modal';
|
|
4
|
+
/**
|
|
5
|
+
* El cromo del consentimiento, y **solo el cromo**: lo que la banda y el
|
|
6
|
+
* panel dicen por su cuenta y vale igual en cualquier sitio que los monte.
|
|
7
|
+
*
|
|
8
|
+
* La línea cae aquí en medio de una pieza legal, así que conviene decirla
|
|
9
|
+
* entera:
|
|
10
|
+
*
|
|
11
|
+
* - **Los botones son cromo.** «Aceptar todas», «Rechazar» y «Preferencias»
|
|
12
|
+
* nombran las tres salidas que la ePrivacy pide, y son las mismas en todos
|
|
13
|
+
* los sitios: no describen qué se guarda, describen qué hace el botón.
|
|
14
|
+
* - **El título y el nombre de la región son cromo.** «Cookies» nombra el
|
|
15
|
+
* mecanismo, no la política de nadie.
|
|
16
|
+
* - **`description` y `policyLabel` NO están aquí y son obligatorias.** El
|
|
17
|
+
* texto legal depende de la jurisdicción y de lo que cada producto guarde
|
|
18
|
+
* de verdad: un default de catálogo lo haría decir lo mismo en todas partes
|
|
19
|
+
* —que es exactamente lo que un texto legal no puede hacer— y, siendo
|
|
20
|
+
* opcional, nadie llegaría a escribir el bueno. Como el `confirmLabel` del
|
|
21
|
+
* `ConfirmDialog`.
|
|
22
|
+
* - **Las categorías tampoco.** Su nombre y su descripción son contenido: qué
|
|
23
|
+
* guarda cada una lo sabe el producto.
|
|
24
|
+
*/
|
|
25
|
+
export interface ConsentMessages {
|
|
26
|
+
/** Título de la banda. */
|
|
27
|
+
title: string;
|
|
28
|
+
/** Nombre accesible de la región de la banda (`role="region"`). */
|
|
29
|
+
regionLabel: string;
|
|
30
|
+
/** Rótulo del botón que acepta todas las categorías. */
|
|
31
|
+
acceptAll: string;
|
|
32
|
+
/** Rótulo del botón que rechaza las opcionales. */
|
|
33
|
+
rejectAll: string;
|
|
34
|
+
/** Rótulo del botón que abre el panel de preferencias. */
|
|
35
|
+
preferences: string;
|
|
36
|
+
/** Título del panel de preferencias. */
|
|
37
|
+
preferencesTitle: string;
|
|
38
|
+
/** Marca, solo para lectores de pantalla, de una categoría necesaria. */
|
|
39
|
+
alwaysOn: string;
|
|
40
|
+
}
|
|
4
41
|
/** Una categoría de tecnologías sobre la que se pide (o no) consentimiento. */
|
|
5
42
|
export interface ConsentCategory {
|
|
6
43
|
/** Identificador de la categoría. Es la clave dentro de `value`. */
|
|
@@ -18,7 +55,25 @@ export interface ConsentCategory {
|
|
|
18
55
|
}
|
|
19
56
|
/** La decisión: qué categorías están aceptadas, por `id`. */
|
|
20
57
|
export type ConsentValue = Record<string, boolean>;
|
|
21
|
-
|
|
58
|
+
/**
|
|
59
|
+
* El enlace a la política: o no está, o está **entero**. El texto del enlace
|
|
60
|
+
* es contenido —lo escribe la app y depende de la jurisdicción—, así que no
|
|
61
|
+
* sale del catálogo, y una `policyHref` sin `policyLabel` dejaría un enlace
|
|
62
|
+
* sin nombre. El tipo lo impide en compilación.
|
|
63
|
+
*/
|
|
64
|
+
export type ConsentPolicyProps = {
|
|
65
|
+
policyHref?: undefined;
|
|
66
|
+
policyLabel?: undefined;
|
|
67
|
+
policyExternal?: undefined;
|
|
68
|
+
} | {
|
|
69
|
+
/** URL de la política de cookies. */
|
|
70
|
+
policyHref: string;
|
|
71
|
+
/** Texto del enlace a la política. **Obligatorio con `policyHref`**: es contenido, no sale del catálogo. */
|
|
72
|
+
policyLabel: string;
|
|
73
|
+
/** Abre la política en otra pestaña (la política suele vivir en la web pública). */
|
|
74
|
+
policyExternal?: boolean;
|
|
75
|
+
};
|
|
76
|
+
export interface ConsentBannerBaseProps extends Omit<React.ComponentPropsWithoutRef<'aside'>, 'title' | 'children' | 'onChange'> {
|
|
22
77
|
/**
|
|
23
78
|
* Muestra la banda. Es la primera visita, o la decisión ha caducado: quién lo
|
|
24
79
|
* sabe es el consumidor, que es también quien guarda la cookie. Default: `true`.
|
|
@@ -30,28 +85,41 @@ export interface ConsentBannerProps extends Omit<React.ComponentPropsWithoutRef<
|
|
|
30
85
|
onRejectAll: () => void;
|
|
31
86
|
/** Abre el panel de preferencias. Sin ella no se pinta el botón. */
|
|
32
87
|
onOpenPreferences?: () => void;
|
|
33
|
-
/**
|
|
88
|
+
/**
|
|
89
|
+
* Título de la banda. **Sin default**: sin él, sale de `consent.title` del
|
|
90
|
+
* `BrandMessagesProvider`.
|
|
91
|
+
*/
|
|
34
92
|
title?: ReactNode;
|
|
35
|
-
/**
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
|
|
43
|
-
|
|
93
|
+
/**
|
|
94
|
+
* Texto de la banda: qué se guarda y por qué. **Obligatorio y sin default**
|
|
95
|
+
* — es el texto legal, depende de la jurisdicción y de lo que el producto
|
|
96
|
+
* guarde de verdad, así que no sale del catálogo. Ver `ConsentMessages`.
|
|
97
|
+
*/
|
|
98
|
+
description: ReactNode;
|
|
99
|
+
/**
|
|
100
|
+
* Etiqueta del botón de aceptar. **Sin default**: sin ella, sale de
|
|
101
|
+
* `consent.acceptAll` del proveedor.
|
|
102
|
+
*/
|
|
44
103
|
acceptAllLabel?: string;
|
|
45
|
-
/**
|
|
104
|
+
/**
|
|
105
|
+
* Etiqueta del botón de rechazar. **Sin default**: sin ella, sale de
|
|
106
|
+
* `consent.rejectAll` del proveedor.
|
|
107
|
+
*/
|
|
46
108
|
rejectAllLabel?: string;
|
|
47
|
-
/**
|
|
109
|
+
/**
|
|
110
|
+
* Etiqueta del botón de preferencias. **Sin default**: sin ella, sale de
|
|
111
|
+
* `consent.preferences` del proveedor. Solo se lee si hay
|
|
112
|
+
* `onOpenPreferences`: sin botón no se exige su texto.
|
|
113
|
+
*/
|
|
48
114
|
preferencesLabel?: string;
|
|
49
115
|
/**
|
|
50
|
-
* Nombre accesible de la región.
|
|
51
|
-
*
|
|
116
|
+
* Nombre accesible de la región. **Sin default**: sin él, sale de
|
|
117
|
+
* `consent.regionLabel` del proveedor. Pásalo cuando el título lleve JSX y
|
|
118
|
+
* quieras que la región se nombre con otra cosa.
|
|
52
119
|
*/
|
|
53
120
|
regionLabel?: string;
|
|
54
121
|
}
|
|
122
|
+
export type ConsentBannerProps = ConsentBannerBaseProps & ConsentPolicyProps;
|
|
55
123
|
/**
|
|
56
124
|
* La banda de consentimiento: qué se quiere guardar y tres salidas —aceptar,
|
|
57
125
|
* rechazar, decidir por categorías—. **No es un diálogo**: no atrapa el foco, no
|
|
@@ -91,17 +159,22 @@ export interface ConsentPreferencesProps {
|
|
|
91
159
|
surface?: 'sheet' | 'modal';
|
|
92
160
|
/** Borde por el que entra el panel (solo con `surface="sheet"`, la alternativa lateral que el sistema conserva para otros usos). Default: `'right'`. */
|
|
93
161
|
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
94
|
-
/**
|
|
162
|
+
/**
|
|
163
|
+
* Título del panel. **Sin default**: sin él, sale de
|
|
164
|
+
* `consent.preferencesTitle` del `BrandMessagesProvider`.
|
|
165
|
+
*/
|
|
95
166
|
title?: ReactNode;
|
|
96
167
|
/**
|
|
97
168
|
* Nombre accesible del botón de cerrar. **Reenvío puro** al `Modal` o al
|
|
98
169
|
* `Sheet` sobre el que se abre el panel: sin él, el aspa lee `modal.close`
|
|
99
|
-
* o `sheet.close` del `BrandMessagesProvider`. El
|
|
100
|
-
*
|
|
101
|
-
* está migrado al proveedor.
|
|
170
|
+
* o `sheet.close` del `BrandMessagesProvider`. El espacio `consent` no
|
|
171
|
+
* repite la clave.
|
|
102
172
|
*/
|
|
103
173
|
closeLabel?: string;
|
|
104
|
-
/**
|
|
174
|
+
/**
|
|
175
|
+
* Marca de una categoría necesaria, solo para lectores de pantalla. **Sin
|
|
176
|
+
* default**: sin ella, sale de `consent.alwaysOn` del proveedor.
|
|
177
|
+
*/
|
|
105
178
|
alwaysOnLabel?: string;
|
|
106
179
|
/**
|
|
107
180
|
* Nodo DOM donde montar el portal del panel, reenviado a `Modal`/`Sheet`.
|
|
@@ -29,6 +29,13 @@ export interface MenuProps {
|
|
|
29
29
|
maxWidth?: string;
|
|
30
30
|
/** Talla de los ítems, la del disparador (32/40/48): el panel desplegado casa con el control plegado, como en el Select. */
|
|
31
31
|
size?: 'sm' | 'md' | 'lg';
|
|
32
|
+
/**
|
|
33
|
+
* Nodo DOM donde montar el portal. Por defecto, el nodo de la superficie que
|
|
34
|
+
* llegue por contexto —`SiteShell` publica el suyo, para que la capa herede
|
|
35
|
+
* la talla de la superficie pública— y, si no hay ninguna, `document.body`.
|
|
36
|
+
* Pásalo solo para llevar la capa a otro sitio: gana siempre.
|
|
37
|
+
*/
|
|
38
|
+
container?: HTMLElement | null;
|
|
32
39
|
className?: string;
|
|
33
40
|
}
|
|
34
41
|
/**
|
|
@@ -36,4 +43,4 @@ export interface MenuProps {
|
|
|
36
43
|
* (tokens `menu.*`) de todos los menús; `ContextMenu`, `UserMenu`,
|
|
37
44
|
* `OrgSwitcher` o `DropdownField` son este menú con un disparador concreto.
|
|
38
45
|
*/
|
|
39
|
-
export declare function Menu({ trigger, items, value, onValueChange, renderLink, open, defaultOpen, onOpenChange, openOnHover, hoverDelay, side, align, sideOffset, minWidth, maxWidth, size, className, }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export declare function Menu({ trigger, items, value, onValueChange, renderLink, open, defaultOpen, onOpenChange, openOnHover, hoverDelay, side, align, sideOffset, minWidth, maxWidth, size, container, className, }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -33,12 +33,14 @@ export interface ModalProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
|
|
|
33
33
|
*/
|
|
34
34
|
fallbackTitle?: string;
|
|
35
35
|
/**
|
|
36
|
-
* Nodo DOM donde montar el portal del modal (reenviado a Base UI
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
36
|
+
* Nodo DOM donde montar el portal del modal (reenviado a Base UI `Portal.container`).
|
|
37
|
+
* Por defecto, el nodo de la superficie que llegue por contexto:
|
|
38
|
+
* `SiteShell` publica el suyo, de modo que la capa hereda la talla de la
|
|
39
|
+
* superficie pública en vez de abrirse a la de aplicación. Si no hay
|
|
40
|
+
* superficie, `document.body` — que ya hereda el tema activado en la raíz
|
|
41
|
+
* (`html.dark`/`[data-theme="dark"]`) sin configuración adicional. Pásalo
|
|
42
|
+
* solo para llevar la capa a otro sitio: un `.surface-dark` **anidado**, el
|
|
43
|
+
* cajón de un shell propio. Gana siempre.
|
|
42
44
|
*/
|
|
43
45
|
container?: React.ComponentPropsWithoutRef<typeof Dialog.Portal>['container'];
|
|
44
46
|
/**
|
|
@@ -1,19 +1,32 @@
|
|
|
1
1
|
import { type ButtonBaseProps } from '../../atoms/Button/Button';
|
|
2
2
|
import './NotificationButton.css';
|
|
3
|
+
/**
|
|
4
|
+
* El cromo de la campana, y **solo el cromo**: cómo se llama el botón, con
|
|
5
|
+
* contador y sin él. La campana no dice nada más —el número lo pinta el
|
|
6
|
+
* `NumberBadge` y las notificaciones viven en otro sitio—, así que los dos
|
|
7
|
+
* textos son todo lo que emite por su cuenta, y ninguno cambia de pantalla a
|
|
8
|
+
* pantalla.
|
|
9
|
+
*/
|
|
10
|
+
export interface NotificationButtonMessages {
|
|
11
|
+
/** Nombre accesible cuando no hay contador. */
|
|
12
|
+
label: string;
|
|
13
|
+
/** Nombre accesible cuando hay contador. Recibe el número. */
|
|
14
|
+
countLabel: (count: number) => string;
|
|
15
|
+
}
|
|
3
16
|
export interface NotificationButtonProps extends Omit<ButtonBaseProps, 'variant' | 'iconOnly' | 'children' | 'href' | 'size'> {
|
|
4
17
|
/** Notificaciones sin leer. Con 0 (o sin él) no hay contador. */
|
|
5
18
|
count?: number;
|
|
6
19
|
/** Tope del contador («99+»). */
|
|
7
20
|
max?: number;
|
|
8
21
|
/**
|
|
9
|
-
* Nombre accesible cuando no hay contador.
|
|
10
|
-
*
|
|
22
|
+
* Nombre accesible cuando no hay contador. **Sin default**: sin ella, sale
|
|
23
|
+
* de `notificationButton.label` del `BrandMessagesProvider`.
|
|
11
24
|
*/
|
|
12
25
|
label?: string;
|
|
13
26
|
/**
|
|
14
27
|
* Nombre accesible cuando hay contador: recibe el número, para que la frase
|
|
15
|
-
* se pueda rehacer en cualquier idioma.
|
|
16
|
-
*
|
|
28
|
+
* se pueda rehacer en cualquier idioma. **Sin default**: sin ella, sale de
|
|
29
|
+
* `notificationButton.countLabel` del proveedor.
|
|
17
30
|
*/
|
|
18
31
|
countLabel?: (count: number) => string;
|
|
19
32
|
}
|
|
@@ -1,6 +1,30 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import { type PopoverChangeDetails } from '../../atoms/Popover/Popover';
|
|
3
3
|
import './NotificationPanel.css';
|
|
4
|
+
/**
|
|
5
|
+
* El cromo del panel, y **solo el cromo**: cómo se llama el panel, la marca de
|
|
6
|
+
* una fila sin leer, el vacío, los dos destinos del pie y la acción sobre el
|
|
7
|
+
* conjunto. Ninguno nombra una notificación: eso viaja en `items` y lo escribe
|
|
8
|
+
* el producto —título, cuerpo y la hora, ya formateada por el consumidor—.
|
|
9
|
+
*
|
|
10
|
+
* Los textos de la campana **no están aquí**: `label` y `countLabel` son un
|
|
11
|
+
* reenvío puro al `NotificationButton`, que tiene su propio espacio. El panel
|
|
12
|
+
* no repite la clave.
|
|
13
|
+
*/
|
|
14
|
+
export interface NotificationPanelMessages {
|
|
15
|
+
/** Nombre del panel (`role="dialog"`) y de la lista. No se pinta. */
|
|
16
|
+
panel: string;
|
|
17
|
+
/** Texto, solo para lectores de pantalla, que marca una fila sin leer. */
|
|
18
|
+
unread: string;
|
|
19
|
+
/** Mensaje cuando no hay notificaciones. */
|
|
20
|
+
empty: string;
|
|
21
|
+
/** Rótulo del enlace a la bandeja. */
|
|
22
|
+
all: string;
|
|
23
|
+
/** Rótulo del enlace a las preferencias. */
|
|
24
|
+
preferences: string;
|
|
25
|
+
/** Rótulo del botón de marcar todas como leídas. */
|
|
26
|
+
markAllRead: string;
|
|
27
|
+
}
|
|
4
28
|
/** Una notificación tal y como la enseña el panel: ya resuelta, sin datos crudos. */
|
|
5
29
|
export interface NotificationPanelItem {
|
|
6
30
|
id: string;
|
|
@@ -56,24 +80,46 @@ export interface NotificationPanelProps {
|
|
|
56
80
|
* `<a>` corriente.
|
|
57
81
|
*/
|
|
58
82
|
renderLink?: RenderNotificationPanelLink;
|
|
59
|
-
/**
|
|
83
|
+
/**
|
|
84
|
+
* Nombre accesible de la campana sin contador. **Reenvío puro** al
|
|
85
|
+
* `NotificationButton`: sin ella, sale de `notificationButton.label`.
|
|
86
|
+
*/
|
|
60
87
|
label?: string;
|
|
61
|
-
/**
|
|
88
|
+
/**
|
|
89
|
+
* Nombre accesible de la campana con contador. **Reenvío puro** al
|
|
90
|
+
* `NotificationButton`: sin ella, sale de `notificationButton.countLabel`.
|
|
91
|
+
*/
|
|
62
92
|
countLabel?: (count: number) => string;
|
|
63
93
|
/**
|
|
64
94
|
* Nombre del panel (`role="dialog"`) y de la lista. **No se pinta**: el
|
|
65
|
-
* panel no lleva cabecera visible.
|
|
95
|
+
* panel no lleva cabecera visible. **Sin default**: sin él, sale de
|
|
96
|
+
* `notificationPanel.panel` del `BrandMessagesProvider`.
|
|
66
97
|
*/
|
|
67
98
|
panelLabel?: string;
|
|
68
|
-
/**
|
|
99
|
+
/**
|
|
100
|
+
* Texto solo para lectores de pantalla que marca una fila sin leer. **Sin
|
|
101
|
+
* default**: sin él, sale de `notificationPanel.unread`.
|
|
102
|
+
*/
|
|
69
103
|
unreadLabel?: string;
|
|
70
|
-
/**
|
|
104
|
+
/**
|
|
105
|
+
* Mensaje cuando no hay notificaciones. **Sin default**: sin él, sale de
|
|
106
|
+
* `notificationPanel.empty`.
|
|
107
|
+
*/
|
|
71
108
|
emptyLabel?: string;
|
|
72
|
-
/**
|
|
109
|
+
/**
|
|
110
|
+
* Rótulo del enlace a la bandeja. **Sin default**: sin él, sale de
|
|
111
|
+
* `notificationPanel.all`.
|
|
112
|
+
*/
|
|
73
113
|
allLabel?: string;
|
|
74
|
-
/**
|
|
114
|
+
/**
|
|
115
|
+
* Rótulo del enlace a las preferencias. **Sin default**: sin él, sale de
|
|
116
|
+
* `notificationPanel.preferences`.
|
|
117
|
+
*/
|
|
75
118
|
preferencesLabel?: string;
|
|
76
|
-
/**
|
|
119
|
+
/**
|
|
120
|
+
* Rótulo del botón de marcar todas. **Sin default**: sin él, sale de
|
|
121
|
+
* `notificationPanel.markAllRead`. Solo se lee cuando el botón se pinta.
|
|
122
|
+
*/
|
|
77
123
|
markAllReadLabel?: string;
|
|
78
124
|
open?: boolean;
|
|
79
125
|
defaultOpen?: boolean;
|
|
@@ -6,8 +6,22 @@ export interface OrgOption {
|
|
|
6
6
|
name: string;
|
|
7
7
|
logoUrl?: string;
|
|
8
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* El único texto que el conmutador dice por su cuenta, y es **cromo**: cómo se
|
|
11
|
+
* nombra su botón. Interpola la organización activa, así que es una función.
|
|
12
|
+
* Los nombres de las organizaciones son **contenido** y vienen en
|
|
13
|
+
* `organizations`.
|
|
14
|
+
*/
|
|
15
|
+
export interface OrgSwitcherMessages {
|
|
16
|
+
/** Nombre accesible del botón, a partir del nombre de la organización. */
|
|
17
|
+
trigger: (name: string) => string;
|
|
18
|
+
}
|
|
9
19
|
export interface OrgSwitcherProps {
|
|
10
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* Nombre accesible del botón. **Sin default**: sin él, sale de
|
|
22
|
+
* `orgSwitcher.trigger` del `BrandMessagesProvider`, que recibe el nombre de
|
|
23
|
+
* la organización activa.
|
|
24
|
+
*/
|
|
11
25
|
label?: string;
|
|
12
26
|
/** Ocupa todo el ancho disponible (en la Sidebar). Por defecto mide lo que su contenido. */
|
|
13
27
|
block?: boolean;
|
|
@@ -16,10 +16,14 @@ export interface PrevNextNavProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* Rótulo del control anterior. Sin `prevTitle` es el `aria-label` del
|
|
18
18
|
* chevron; con `prevTitle` es el rótulo **visible** que lo encabeza.
|
|
19
|
-
*
|
|
19
|
+
* **Sin default**: sin él, sale de `prevNextNav.previous` del
|
|
20
|
+
* `BrandMessagesProvider`.
|
|
20
21
|
*/
|
|
21
22
|
prevLabel?: string;
|
|
22
|
-
/**
|
|
23
|
+
/**
|
|
24
|
+
* Rótulo del control siguiente. Mismo contrato que `prevLabel`. **Sin
|
|
25
|
+
* default**: sale de `prevNextNav.next`.
|
|
26
|
+
*/
|
|
23
27
|
nextLabel?: string;
|
|
24
28
|
/**
|
|
25
29
|
* Título visible del destino anterior (el de la página, el capítulo…). Con
|
|
@@ -47,4 +51,15 @@ export interface PrevNextNavProps {
|
|
|
47
51
|
/** Variante de densidad. Default: "md" */
|
|
48
52
|
size?: 'sm' | 'md';
|
|
49
53
|
}
|
|
54
|
+
/**
|
|
55
|
+
* Los dos textos del par, y los dos son **cromo**: «anterior» y «siguiente»
|
|
56
|
+
* dicen la dirección, no el destino. El destino —`prevTitle`, `nextTitle`, el
|
|
57
|
+
* rótulo del medio— es **contenido** y lo escribe la página.
|
|
58
|
+
*/
|
|
59
|
+
export interface PrevNextNavMessages {
|
|
60
|
+
/** Rótulo del control anterior. */
|
|
61
|
+
previous: string;
|
|
62
|
+
/** Rótulo del control siguiente. */
|
|
63
|
+
next: string;
|
|
64
|
+
}
|
|
50
65
|
export declare function PrevNextNav({ prevHref, nextHref, prevOnClick, nextOnClick, prevLabel, nextLabel, prevTitle, nextTitle, label, labelId, linkComponent, size, }: PrevNextNavProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -39,13 +39,14 @@ export interface SheetProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
|
|
|
39
39
|
/** Elemento que abre el panel. Sin él, la apertura la controla el consumidor. */
|
|
40
40
|
trigger?: ReactNode;
|
|
41
41
|
/**
|
|
42
|
-
* Nodo DOM donde montar el portal del panel (reenviado a Base UI
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
42
|
+
* Nodo DOM donde montar el portal del panel (reenviado a Base UI `Portal.container`).
|
|
43
|
+
* Por defecto, el nodo de la superficie que llegue por contexto:
|
|
44
|
+
* `SiteShell` publica el suyo, de modo que la capa hereda la talla de la
|
|
45
|
+
* superficie pública en vez de abrirse a la de aplicación. Si no hay
|
|
46
|
+
* superficie, `document.body` — que ya hereda el tema activado en la raíz
|
|
47
|
+
* (`html.dark`/`[data-theme="dark"]`) sin configuración adicional. Pásalo
|
|
48
|
+
* solo para llevar la capa a otro sitio: un `.surface-dark` **anidado**, el
|
|
49
|
+
* cajón de un shell propio. Gana siempre.
|
|
49
50
|
*/
|
|
50
51
|
container?: React.ComponentPropsWithoutRef<typeof Dialog.Portal>['container'];
|
|
51
52
|
/**
|
|
@@ -41,11 +41,14 @@ export type SidebarNavRenderLinkProps = React.AnchorHTMLAttributes<HTMLAnchorEle
|
|
|
41
41
|
'aria-current'?: 'page';
|
|
42
42
|
};
|
|
43
43
|
export interface SidebarNavProps {
|
|
44
|
-
/**
|
|
44
|
+
/**
|
|
45
|
+
* Nombre accesible del `nav`. **Sin default**: sin él, sale de
|
|
46
|
+
* `sidebarNav.label` del `BrandMessagesProvider`.
|
|
47
|
+
*/
|
|
45
48
|
label?: string;
|
|
46
49
|
/**
|
|
47
|
-
* Marca de las entradas vacías (`empty`).
|
|
48
|
-
*
|
|
50
|
+
* Marca de las entradas vacías (`empty`). **Sin default**: sale de
|
|
51
|
+
* `sidebarNav.empty`. Solo se lee cuando hay alguna entrada vacía.
|
|
49
52
|
*/
|
|
50
53
|
emptyLabel?: string;
|
|
51
54
|
/** Solo iconos: los enlaces con tooltip, los grupos como menú. Sin él, lo decide la `Sidebar` (rail). */
|
|
@@ -56,4 +59,16 @@ export interface SidebarNavProps {
|
|
|
56
59
|
onValueChange?: (value: string[]) => void;
|
|
57
60
|
renderLink?: (props: SidebarNavRenderLinkProps) => ReactNode;
|
|
58
61
|
}
|
|
62
|
+
/**
|
|
63
|
+
* Los dos textos de la navegación, los dos **cromo**: el nombre de la región
|
|
64
|
+
* («Principal», el mismo en toda la suite) y la marca que se pone a una entrada
|
|
65
|
+
* sin contenido. Los rótulos de las entradas son **contenido** y siguen
|
|
66
|
+
* viniendo en `entries`.
|
|
67
|
+
*/
|
|
68
|
+
export interface SidebarNavMessages {
|
|
69
|
+
/** Nombre accesible del `nav`. */
|
|
70
|
+
label: string;
|
|
71
|
+
/** Marca de las entradas sin contenido. */
|
|
72
|
+
empty: string;
|
|
73
|
+
}
|
|
59
74
|
export declare function SidebarNav({ label, emptyLabel, rail, entries, defaultValue, value, onValueChange, renderLink, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -49,4 +49,13 @@ export interface SiteNavProps {
|
|
|
49
49
|
* `style-src 'self'` descarta el atributo sin avisar y el grupo de más caía
|
|
50
50
|
* a la segunda fila.
|
|
51
51
|
*/
|
|
52
|
+
/**
|
|
53
|
+
* El único texto que el índice dice por su cuenta, y es **cromo**: el nombre de
|
|
54
|
+
* la región de navegación. Los grupos y sus enlaces son **contenido** y vienen
|
|
55
|
+
* en `groups`.
|
|
56
|
+
*/
|
|
57
|
+
export interface SiteNavMessages {
|
|
58
|
+
/** Nombre accesible del `nav`. */
|
|
59
|
+
label: string;
|
|
60
|
+
}
|
|
52
61
|
export declare function SiteNav({ groups, label, renderLink, className, }: SiteNavProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -17,8 +17,8 @@ export interface TableOfContentsProps extends Omit<React.ComponentPropsWithoutRe
|
|
|
17
17
|
*/
|
|
18
18
|
activeId?: string;
|
|
19
19
|
/**
|
|
20
|
-
* Nombre accesible del `nav`.
|
|
21
|
-
*
|
|
20
|
+
* Nombre accesible del `nav`. **Sin default**: sin él, sale de
|
|
21
|
+
* `tableOfContents.label` del `BrandMessagesProvider`.
|
|
22
22
|
*/
|
|
23
23
|
ariaLabel?: string;
|
|
24
24
|
/** Rótulo visible sobre la lista. Sin él, no se pinta ninguno. */
|
|
@@ -46,4 +46,13 @@ export interface TableOfContentsProps extends Omit<React.ComponentPropsWithoutRe
|
|
|
46
46
|
* `{...rest}` (`id`, `data-*`, `role`…) se reenvía al `<nav>`. El nombre
|
|
47
47
|
* accesible sigue siendo `ariaLabel`.
|
|
48
48
|
*/
|
|
49
|
+
/**
|
|
50
|
+
* El único texto que el índice dice por su cuenta, y es **cromo**: «En esta
|
|
51
|
+
* página» nombra la región, no la página. El rótulo visible (`title`) y los
|
|
52
|
+
* encabezados (`items`) son **contenido**.
|
|
53
|
+
*/
|
|
54
|
+
export interface TableOfContentsMessages {
|
|
55
|
+
/** Nombre accesible del `nav`. */
|
|
56
|
+
label: string;
|
|
57
|
+
}
|
|
49
58
|
export declare const TableOfContents: import("react").ForwardRefExoticComponent<TableOfContentsProps & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -1,11 +1,26 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import type { MenuItem, MenuRenderLinkProps } from '../Menu/Menu';
|
|
3
3
|
import './UserMenu.css';
|
|
4
|
+
/**
|
|
5
|
+
* Lo que el menú de cuenta dice por su cuenta, y es **cromo**: cómo se nombra
|
|
6
|
+
* su botón y cómo se cuentan las notificaciones sin leer. Los dos interpolan un
|
|
7
|
+
* dato —el nombre, el número—, así que son funciones. El nombre, el correo y
|
|
8
|
+
* los ítems son **contenido** y siguen viniendo por props.
|
|
9
|
+
*/
|
|
10
|
+
export interface UserMenuMessages {
|
|
11
|
+
/** Nombre accesible del botón, a partir del nombre del usuario. */
|
|
12
|
+
trigger: (name: string) => string;
|
|
13
|
+
/** Nombre accesible del contador de notificaciones sin leer. */
|
|
14
|
+
unread: (count: number) => string;
|
|
15
|
+
}
|
|
4
16
|
export interface UserMenuProps {
|
|
5
17
|
name: string;
|
|
6
18
|
email: string;
|
|
7
19
|
avatarUrl?: string;
|
|
8
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* Nombre accesible del botón. **Sin default**: sin él, sale de
|
|
22
|
+
* `userMenu.trigger` del `BrandMessagesProvider`, que recibe el nombre.
|
|
23
|
+
*/
|
|
9
24
|
label?: string;
|
|
10
25
|
/** Sin nombre — avatar, badge y chevron: para la barra del AppHeader. El nombre sigue en el panel y en el nombre accesible. */
|
|
11
26
|
compact?: boolean;
|
|
@@ -7,9 +7,15 @@ export interface AppHeaderProps {
|
|
|
7
7
|
notifications?: ReactNode;
|
|
8
8
|
/** Al final, siempre: el `UserMenu` (compacto). */
|
|
9
9
|
end?: ReactNode;
|
|
10
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Texto accesible del botón de menú. **Reenvío puro** al `MenuButton`: sin
|
|
12
|
+
* él, el botón lee `menuButton.open` del `BrandMessagesProvider`.
|
|
13
|
+
*/
|
|
11
14
|
menuLabel?: string;
|
|
12
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* Texto accesible del botón con la sidebar abierta. **Reenvío puro** al
|
|
17
|
+
* `MenuButton`: sin él, lee `menuButton.close`.
|
|
18
|
+
*/
|
|
13
19
|
menuCloseLabel?: string;
|
|
14
20
|
/** id de la sidebar que gobierna el botón (`aria-controls`). */
|
|
15
21
|
sidebarId?: string;
|
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* El único texto de la raíz, y es **cromo**: el enlace de salto al contenido
|
|
4
|
+
* dice lo mismo en todo el documento y en todos los productos.
|
|
5
|
+
*/
|
|
6
|
+
export interface AppRootMessages {
|
|
3
7
|
/** Texto del enlace de salto al contenido. */
|
|
8
|
+
skipToContent: string;
|
|
9
|
+
}
|
|
10
|
+
export interface AppRootProps {
|
|
11
|
+
/**
|
|
12
|
+
* Texto del enlace de salto al contenido. **Sin default**: sin él, sale de
|
|
13
|
+
* `appRoot.skipToContent` del `BrandMessagesProvider`.
|
|
14
|
+
*/
|
|
4
15
|
skipLabel?: string;
|
|
5
16
|
/** Destino del salto: el `id` del contenido principal de la página. */
|
|
6
17
|
skipHref?: string;
|
|
@@ -17,9 +17,22 @@ export interface AppShellProps {
|
|
|
17
17
|
/** Ancho inicial de la sidebar desplegada (px). Sin él, el token `sidebar.width`. */
|
|
18
18
|
defaultSidebarWidth?: number;
|
|
19
19
|
onSidebarWidthChange?: (width: number) => void;
|
|
20
|
-
/**
|
|
20
|
+
/**
|
|
21
|
+
* Texto del enlace de salto al contenido (`SkipLink`). **Sin default**: sin
|
|
22
|
+
* él, sale de `appShell.skipToContent` del `BrandMessagesProvider`.
|
|
23
|
+
*/
|
|
21
24
|
skipLabel?: string;
|
|
22
25
|
}
|
|
26
|
+
/**
|
|
27
|
+
* El único texto que el armazón dice por su cuenta, y es **cromo**: el enlace
|
|
28
|
+
* de salto al contenido dice lo mismo en todas las pantallas de todas las
|
|
29
|
+
* aplicaciones. Lo que hay dentro del armazón —la barra, la navegación, la
|
|
30
|
+
* página— lo escribe el producto.
|
|
31
|
+
*/
|
|
32
|
+
export interface AppShellMessages {
|
|
33
|
+
/** Texto del enlace de salto al contenido. */
|
|
34
|
+
skipToContent: string;
|
|
35
|
+
}
|
|
23
36
|
/**
|
|
24
37
|
* El armazón de una aplicación: barra superior, barra lateral y contenido.
|
|
25
38
|
* Lleva el estado de la sidebar (abierta, rail o cerrada; su ancho) y lo
|