@dododog/ui 0.16.0 → 0.17.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.
@@ -1,11 +1,52 @@
1
1
  import * as React from 'react';
2
2
 
3
+ /**
4
+ * Presentation de la racine du dialogue.
5
+ *
6
+ * - `centered` (defaut) : voile sombre + panneau carte centre avec marge de
7
+ * 16 px, angles arrondis et largeur bornee. C'est le rendu historique, il ne
8
+ * doit pas changer pour les appelants existants.
9
+ * - `fullBleed` : la surface occupe tout le cadre, SANS voile ni marge ni
10
+ * arrondi. Necessaire aux surcouches bord a bord (menu mobile plein cadre,
11
+ * lightbox dont l'image est en `fill`), qui devaient sinon reimplementer le
12
+ * comportement de dialogue en local.
13
+ */
14
+ type ModalVariant = "centered" | "fullBleed";
3
15
  interface ModalProps {
4
16
  isOpen: boolean;
5
17
  onClose: () => void;
6
18
  children: React.ReactNode;
7
19
  title?: string;
20
+ /** Classes du PANNEAU interne (pas de la racine). Voir `overlayClassName`. */
8
21
  className?: string;
22
+ /** Presentation de la racine. Defaut : `centered` (rendu historique). */
23
+ variant?: ModalVariant;
24
+ /**
25
+ * Classes de la RACINE (`fixed inset-0`), pour les cas que la variante ne
26
+ * couvre pas : fond propre a la surface, `lg:hidden` d'un menu mobile...
27
+ * Appliquees en dernier, elles l'emportent sur les classes de base.
28
+ */
29
+ overlayClassName?: string;
30
+ /**
31
+ * Plan d'empilement de la racine. Defaut : `z-50`. Chaque appelant devait
32
+ * auparavant envelopper le dialogue dans un conteneur `relative z-[...]`
33
+ * pour passer au-dessus de la barre de reservation (`z-50`) ou des cartes
34
+ * plein ecran (`z-[1000]`).
35
+ */
36
+ zIndexClassName?: string;
37
+ /**
38
+ * Element a focaliser a l'OUVERTURE. Defaut : premier element focusable du
39
+ * panneau, sinon le panneau lui-meme.
40
+ */
41
+ initialFocusRef?: React.RefObject<HTMLElement | null>;
42
+ /**
43
+ * Element a focaliser a la FERMETURE, prioritaire sur le declencheur
44
+ * memorise. Indispensable quand le declencheur est DEMONTE pendant que le
45
+ * dialogue est ouvert (bandeau cookies : le bandeau cede la place au
46
+ * panneau) — sans lui la garde `isConnected` echoue et le focus retombe sur
47
+ * `<body>`. A defaut, le repli reste la restitution au declencheur.
48
+ */
49
+ returnFocusTo?: React.RefObject<HTMLElement | null>;
9
50
  /**
10
51
  * Nom accessible quand aucun `title` n'est rendu. Ignore si `title` est
11
52
  * fourni : le titre visible sert alors de nom via `aria-labelledby`.
@@ -21,4 +62,4 @@ interface ModalProps {
21
62
  }
22
63
  declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
23
64
 
24
- export { Modal, type ModalProps };
65
+ export { Modal, type ModalProps, type ModalVariant };
@@ -1,11 +1,52 @@
1
1
  import * as React from 'react';
2
2
 
3
+ /**
4
+ * Presentation de la racine du dialogue.
5
+ *
6
+ * - `centered` (defaut) : voile sombre + panneau carte centre avec marge de
7
+ * 16 px, angles arrondis et largeur bornee. C'est le rendu historique, il ne
8
+ * doit pas changer pour les appelants existants.
9
+ * - `fullBleed` : la surface occupe tout le cadre, SANS voile ni marge ni
10
+ * arrondi. Necessaire aux surcouches bord a bord (menu mobile plein cadre,
11
+ * lightbox dont l'image est en `fill`), qui devaient sinon reimplementer le
12
+ * comportement de dialogue en local.
13
+ */
14
+ type ModalVariant = "centered" | "fullBleed";
3
15
  interface ModalProps {
4
16
  isOpen: boolean;
5
17
  onClose: () => void;
6
18
  children: React.ReactNode;
7
19
  title?: string;
20
+ /** Classes du PANNEAU interne (pas de la racine). Voir `overlayClassName`. */
8
21
  className?: string;
22
+ /** Presentation de la racine. Defaut : `centered` (rendu historique). */
23
+ variant?: ModalVariant;
24
+ /**
25
+ * Classes de la RACINE (`fixed inset-0`), pour les cas que la variante ne
26
+ * couvre pas : fond propre a la surface, `lg:hidden` d'un menu mobile...
27
+ * Appliquees en dernier, elles l'emportent sur les classes de base.
28
+ */
29
+ overlayClassName?: string;
30
+ /**
31
+ * Plan d'empilement de la racine. Defaut : `z-50`. Chaque appelant devait
32
+ * auparavant envelopper le dialogue dans un conteneur `relative z-[...]`
33
+ * pour passer au-dessus de la barre de reservation (`z-50`) ou des cartes
34
+ * plein ecran (`z-[1000]`).
35
+ */
36
+ zIndexClassName?: string;
37
+ /**
38
+ * Element a focaliser a l'OUVERTURE. Defaut : premier element focusable du
39
+ * panneau, sinon le panneau lui-meme.
40
+ */
41
+ initialFocusRef?: React.RefObject<HTMLElement | null>;
42
+ /**
43
+ * Element a focaliser a la FERMETURE, prioritaire sur le declencheur
44
+ * memorise. Indispensable quand le declencheur est DEMONTE pendant que le
45
+ * dialogue est ouvert (bandeau cookies : le bandeau cede la place au
46
+ * panneau) — sans lui la garde `isConnected` echoue et le focus retombe sur
47
+ * `<body>`. A defaut, le repli reste la restitution au declencheur.
48
+ */
49
+ returnFocusTo?: React.RefObject<HTMLElement | null>;
9
50
  /**
10
51
  * Nom accessible quand aucun `title` n'est rendu. Ignore si `title` est
11
52
  * fourni : le titre visible sert alors de nom via `aria-labelledby`.
@@ -21,4 +62,4 @@ interface ModalProps {
21
62
  }
22
63
  declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
23
64
 
24
- export { Modal, type ModalProps };
65
+ export { Modal, type ModalProps, type ModalVariant };
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var chunkHH4X2JYO_js = require('../../chunk-HH4X2JYO.js');
3
+ var chunkEKOGDJUT_js = require('../../chunk-EKOGDJUT.js');
4
4
  require('../../chunk-ADIDI7AJ.js');
5
5
 
6
6
 
7
7
 
8
8
  Object.defineProperty(exports, "Modal", {
9
9
  enumerable: true,
10
- get: function () { return chunkHH4X2JYO_js.Modal; }
10
+ get: function () { return chunkEKOGDJUT_js.Modal; }
11
11
  });
@@ -1,2 +1,2 @@
1
- export { Modal } from '../../chunk-N5ZNXNCO.mjs';
1
+ export { Modal } from '../../chunk-UYOPZZBN.mjs';
2
2
  import '../../chunk-IMKLN273.mjs';
@@ -9,7 +9,23 @@ interface SegmentedControlProps {
9
9
  value: string;
10
10
  onChange: (value: string) => void;
11
11
  className?: string;
12
+ /**
13
+ * Nom du groupe de boutons radio. Sans lui, un lecteur d'ecran annonce
14
+ * « groupe de boutons radio » sans dire sur quoi il porte.
15
+ */
16
+ "aria-label"?: string;
17
+ /** Id d'un titre deja rendu qui nomme le groupe. Prioritaire sur `aria-label`. */
18
+ "aria-labelledby"?: string;
12
19
  }
20
+ /**
21
+ * Motif « radio group » de l'APG WAI-ARIA.
22
+ *
23
+ * Le groupe est UN SEUL arret de tabulation (roving tabindex) : seule l'option
24
+ * cochee est atteignable au Tab, les autres se rejoignent aux fleches (les
25
+ * quatre directions, avec bouclage) et Home/Fin. Sans cela, N options font N
26
+ * arrets de tabulation et la selection au clavier n'a pas le comportement
27
+ * attendu d'un groupe radio.
28
+ */
13
29
  declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
14
30
 
15
31
  export { SegmentedControl, type SegmentedControlOption, type SegmentedControlProps };
@@ -9,7 +9,23 @@ interface SegmentedControlProps {
9
9
  value: string;
10
10
  onChange: (value: string) => void;
11
11
  className?: string;
12
+ /**
13
+ * Nom du groupe de boutons radio. Sans lui, un lecteur d'ecran annonce
14
+ * « groupe de boutons radio » sans dire sur quoi il porte.
15
+ */
16
+ "aria-label"?: string;
17
+ /** Id d'un titre deja rendu qui nomme le groupe. Prioritaire sur `aria-label`. */
18
+ "aria-labelledby"?: string;
12
19
  }
20
+ /**
21
+ * Motif « radio group » de l'APG WAI-ARIA.
22
+ *
23
+ * Le groupe est UN SEUL arret de tabulation (roving tabindex) : seule l'option
24
+ * cochee est atteignable au Tab, les autres se rejoignent aux fleches (les
25
+ * quatre directions, avec bouclage) et Home/Fin. Sans cela, N options font N
26
+ * arrets de tabulation et la selection au clavier n'a pas le comportement
27
+ * attendu d'un groupe radio.
28
+ */
13
29
  declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
14
30
 
15
31
  export { SegmentedControl, type SegmentedControlOption, type SegmentedControlProps };
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var chunkQWDKSY6Y_js = require('../../chunk-QWDKSY6Y.js');
3
+ var chunkOZ4RJDDZ_js = require('../../chunk-OZ4RJDDZ.js');
4
4
  require('../../chunk-ADIDI7AJ.js');
5
5
 
6
6
 
7
7
 
8
8
  Object.defineProperty(exports, "SegmentedControl", {
9
9
  enumerable: true,
10
- get: function () { return chunkQWDKSY6Y_js.SegmentedControl; }
10
+ get: function () { return chunkOZ4RJDDZ_js.SegmentedControl; }
11
11
  });
@@ -1,2 +1,2 @@
1
- export { SegmentedControl } from '../../chunk-36Y7UU32.mjs';
1
+ export { SegmentedControl } from '../../chunk-DUCRCDLI.mjs';
2
2
  import '../../chunk-IMKLN273.mjs';
@@ -12,7 +12,28 @@ interface TabsProps {
12
12
  value?: string;
13
13
  onChange?: (key: string) => void;
14
14
  className?: string;
15
+ /**
16
+ * Nom du groupe d'onglets (« Filtrer les reservations »...). Sans lui, un
17
+ * lecteur d'ecran annonce « liste d'onglets » sans dire de quoi.
18
+ */
19
+ "aria-label"?: string;
20
+ /** Id d'un titre deja rendu qui nomme le groupe. Prioritaire sur `aria-label`. */
21
+ "aria-labelledby"?: string;
15
22
  }
23
+ /**
24
+ * Motif « tabs » de l'APG WAI-ARIA.
25
+ *
26
+ * Le tablist est UN SEUL arret de tabulation (roving tabindex) : on circule
27
+ * entre les onglets aux fleches Gauche/Droite (avec bouclage) et Home/Fin, pas
28
+ * au Tab. Chaque onglet est relie au panneau qu'il commande
29
+ * (`aria-controls` / `id`), et le panneau est nomme par son onglet
30
+ * (`aria-labelledby`) — sans quoi le contenu affiche apres un changement
31
+ * d'onglet n'est pas annonce.
32
+ *
33
+ * Activation automatique : l'onglet qui recoit le focus devient l'onglet actif.
34
+ * Le contenu de tous les onglets est fourni d'avance par `tabs`, aucun
35
+ * chargement reseau n'est declenche par ce deplacement.
36
+ */
16
37
  declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
17
38
 
18
39
  export { type TabItem, Tabs, type TabsProps };
@@ -12,7 +12,28 @@ interface TabsProps {
12
12
  value?: string;
13
13
  onChange?: (key: string) => void;
14
14
  className?: string;
15
+ /**
16
+ * Nom du groupe d'onglets (« Filtrer les reservations »...). Sans lui, un
17
+ * lecteur d'ecran annonce « liste d'onglets » sans dire de quoi.
18
+ */
19
+ "aria-label"?: string;
20
+ /** Id d'un titre deja rendu qui nomme le groupe. Prioritaire sur `aria-label`. */
21
+ "aria-labelledby"?: string;
15
22
  }
23
+ /**
24
+ * Motif « tabs » de l'APG WAI-ARIA.
25
+ *
26
+ * Le tablist est UN SEUL arret de tabulation (roving tabindex) : on circule
27
+ * entre les onglets aux fleches Gauche/Droite (avec bouclage) et Home/Fin, pas
28
+ * au Tab. Chaque onglet est relie au panneau qu'il commande
29
+ * (`aria-controls` / `id`), et le panneau est nomme par son onglet
30
+ * (`aria-labelledby`) — sans quoi le contenu affiche apres un changement
31
+ * d'onglet n'est pas annonce.
32
+ *
33
+ * Activation automatique : l'onglet qui recoit le focus devient l'onglet actif.
34
+ * Le contenu de tous les onglets est fourni d'avance par `tabs`, aucun
35
+ * chargement reseau n'est declenche par ce deplacement.
36
+ */
16
37
  declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
17
38
 
18
39
  export { type TabItem, Tabs, type TabsProps };
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var chunk762LQMWP_js = require('../../chunk-762LQMWP.js');
3
+ var chunkRAXPJ7VC_js = require('../../chunk-RAXPJ7VC.js');
4
4
  require('../../chunk-ADIDI7AJ.js');
5
5
 
6
6
 
7
7
 
8
8
  Object.defineProperty(exports, "Tabs", {
9
9
  enumerable: true,
10
- get: function () { return chunk762LQMWP_js.Tabs; }
10
+ get: function () { return chunkRAXPJ7VC_js.Tabs; }
11
11
  });
@@ -1,2 +1,2 @@
1
- export { Tabs } from '../../chunk-VOZPGXQD.mjs';
1
+ export { Tabs } from '../../chunk-YGAWCP65.mjs';
2
2
  import '../../chunk-IMKLN273.mjs';
@@ -1,15 +1,15 @@
1
1
  'use strict';
2
2
 
3
- var chunkR4G5LFPN_js = require('../../chunk-R4G5LFPN.js');
3
+ var chunk2NMA3AXV_js = require('../../chunk-2NMA3AXV.js');
4
4
  require('../../chunk-ADIDI7AJ.js');
5
5
 
6
6
 
7
7
 
8
8
  Object.defineProperty(exports, "Textarea", {
9
9
  enumerable: true,
10
- get: function () { return chunkR4G5LFPN_js.Textarea; }
10
+ get: function () { return chunk2NMA3AXV_js.Textarea; }
11
11
  });
12
12
  Object.defineProperty(exports, "textareaVariants", {
13
13
  enumerable: true,
14
- get: function () { return chunkR4G5LFPN_js.textareaVariants; }
14
+ get: function () { return chunk2NMA3AXV_js.textareaVariants; }
15
15
  });
@@ -1,2 +1,2 @@
1
- export { Textarea, textareaVariants } from '../../chunk-Z7CF7EQJ.mjs';
1
+ export { Textarea, textareaVariants } from '../../chunk-52M2KUC4.mjs';
2
2
  import '../../chunk-IMKLN273.mjs';
package/dist/index.d.mts CHANGED
@@ -14,7 +14,7 @@ export { Checkbox, CheckboxProps } from './components/Checkbox/index.mjs';
14
14
  export { Toggle, ToggleProps } from './components/Toggle/index.mjs';
15
15
  export { Textarea, TextareaProps, textareaVariants } from './components/Textarea/index.mjs';
16
16
  export { Counter, CounterProps } from './components/Counter/index.mjs';
17
- export { Modal, ModalProps } from './components/Modal/index.mjs';
17
+ export { Modal, ModalProps, ModalVariant } from './components/Modal/index.mjs';
18
18
  export { Autocomplete, AutocompleteProps, AutocompleteSuggestion, autocompleteInputVariants } from './components/Autocomplete/index.mjs';
19
19
  export { Accordion, AccordionItemData, AccordionProps } from './components/Accordion/index.mjs';
20
20
  export { Alert, AlertProps } from './components/Alert/index.mjs';
@@ -104,9 +104,22 @@ interface DogFriendlyStat {
104
104
  /** Précision optionnelle, ex: "jusqu'à 2 chiens" */
105
105
  note?: string;
106
106
  }
107
+ /**
108
+ * Niveaux de titre acceptes pour l'en-tete du bloc. `3` est le niveau
109
+ * historique et reste le defaut : le changer sans le demander deplacerait le
110
+ * plan de toutes les pages qui embarquent deja ce bandeau.
111
+ */
112
+ type DogFriendlyPanelHeadingLevel = 2 | 3 | 4;
107
113
  interface DogFriendlyPanelProps extends React.HTMLAttributes<HTMLElement> {
108
114
  /** Titre du bloc */
109
115
  title?: string;
116
+ /**
117
+ * Niveau du titre rendu, a accorder au plan de la page hote. Le bloc etant
118
+ * reutilisable, seule la page sait a quelle profondeur il s'insere : un
119
+ * niveau fige y cree un saut de titre (h1 -> h3) que la page ne peut pas
120
+ * corriger.
121
+ */
122
+ headingLevel?: DogFriendlyPanelHeadingLevel;
110
123
  /** Info chien confirmée par l'établissement (vs à confirmer) */
111
124
  confirmed?: boolean;
112
125
  /** Libellé quand confirmé */
@@ -122,7 +135,7 @@ interface DogFriendlyPanelProps extends React.HTMLAttributes<HTMLElement> {
122
135
  * Bandeau signature dog-friendly de la fiche hébergement.
123
136
  * Met en avant l'accueil du chien : faits clés (taille, frais, jardin…) + à-côtés.
124
137
  */
125
- declare function DogFriendlyPanel({ title, confirmed, confirmedLabel, unconfirmedLabel, stats, perks, className, ...props }: DogFriendlyPanelProps): react_jsx_runtime.JSX.Element;
138
+ declare function DogFriendlyPanel({ title, headingLevel, confirmed, confirmedLabel, unconfirmedLabel, stats, perks, className, ...props }: DogFriendlyPanelProps): react_jsx_runtime.JSX.Element;
126
139
 
127
140
  interface ReviewSubScore {
128
141
  /** Libellé, ex: "Propreté" */
@@ -205,4 +218,4 @@ interface MobileBookingBarProps extends Omit<React.HTMLAttributes<HTMLDivElement
205
218
  */
206
219
  declare function MobileBookingBar({ price, meta, reassurance, ctaLabel, onReserve, disabled, className, ...props }: MobileBookingBarProps): react_jsx_runtime.JSX.Element;
207
220
 
208
- export { DogFriendlyPanel, type DogFriendlyPanelProps, type DogFriendlyStat, MobileBookingBar, type MobileBookingBarProps, type ReviewItem, type ReviewSubScore, ReviewSummary, type ReviewSummaryProps, SearchField, type SearchFieldProps, searchFieldVariants };
221
+ export { DogFriendlyPanel, type DogFriendlyPanelHeadingLevel, type DogFriendlyPanelProps, type DogFriendlyStat, MobileBookingBar, type MobileBookingBarProps, type ReviewItem, type ReviewSubScore, ReviewSummary, type ReviewSummaryProps, SearchField, type SearchFieldProps, searchFieldVariants };
package/dist/index.d.ts CHANGED
@@ -14,7 +14,7 @@ export { Checkbox, CheckboxProps } from './components/Checkbox/index.js';
14
14
  export { Toggle, ToggleProps } from './components/Toggle/index.js';
15
15
  export { Textarea, TextareaProps, textareaVariants } from './components/Textarea/index.js';
16
16
  export { Counter, CounterProps } from './components/Counter/index.js';
17
- export { Modal, ModalProps } from './components/Modal/index.js';
17
+ export { Modal, ModalProps, ModalVariant } from './components/Modal/index.js';
18
18
  export { Autocomplete, AutocompleteProps, AutocompleteSuggestion, autocompleteInputVariants } from './components/Autocomplete/index.js';
19
19
  export { Accordion, AccordionItemData, AccordionProps } from './components/Accordion/index.js';
20
20
  export { Alert, AlertProps } from './components/Alert/index.js';
@@ -104,9 +104,22 @@ interface DogFriendlyStat {
104
104
  /** Précision optionnelle, ex: "jusqu'à 2 chiens" */
105
105
  note?: string;
106
106
  }
107
+ /**
108
+ * Niveaux de titre acceptes pour l'en-tete du bloc. `3` est le niveau
109
+ * historique et reste le defaut : le changer sans le demander deplacerait le
110
+ * plan de toutes les pages qui embarquent deja ce bandeau.
111
+ */
112
+ type DogFriendlyPanelHeadingLevel = 2 | 3 | 4;
107
113
  interface DogFriendlyPanelProps extends React.HTMLAttributes<HTMLElement> {
108
114
  /** Titre du bloc */
109
115
  title?: string;
116
+ /**
117
+ * Niveau du titre rendu, a accorder au plan de la page hote. Le bloc etant
118
+ * reutilisable, seule la page sait a quelle profondeur il s'insere : un
119
+ * niveau fige y cree un saut de titre (h1 -> h3) que la page ne peut pas
120
+ * corriger.
121
+ */
122
+ headingLevel?: DogFriendlyPanelHeadingLevel;
110
123
  /** Info chien confirmée par l'établissement (vs à confirmer) */
111
124
  confirmed?: boolean;
112
125
  /** Libellé quand confirmé */
@@ -122,7 +135,7 @@ interface DogFriendlyPanelProps extends React.HTMLAttributes<HTMLElement> {
122
135
  * Bandeau signature dog-friendly de la fiche hébergement.
123
136
  * Met en avant l'accueil du chien : faits clés (taille, frais, jardin…) + à-côtés.
124
137
  */
125
- declare function DogFriendlyPanel({ title, confirmed, confirmedLabel, unconfirmedLabel, stats, perks, className, ...props }: DogFriendlyPanelProps): react_jsx_runtime.JSX.Element;
138
+ declare function DogFriendlyPanel({ title, headingLevel, confirmed, confirmedLabel, unconfirmedLabel, stats, perks, className, ...props }: DogFriendlyPanelProps): react_jsx_runtime.JSX.Element;
126
139
 
127
140
  interface ReviewSubScore {
128
141
  /** Libellé, ex: "Propreté" */
@@ -205,4 +218,4 @@ interface MobileBookingBarProps extends Omit<React.HTMLAttributes<HTMLDivElement
205
218
  */
206
219
  declare function MobileBookingBar({ price, meta, reassurance, ctaLabel, onReserve, disabled, className, ...props }: MobileBookingBarProps): react_jsx_runtime.JSX.Element;
207
220
 
208
- export { DogFriendlyPanel, type DogFriendlyPanelProps, type DogFriendlyStat, MobileBookingBar, type MobileBookingBarProps, type ReviewItem, type ReviewSubScore, ReviewSummary, type ReviewSummaryProps, SearchField, type SearchFieldProps, searchFieldVariants };
221
+ export { DogFriendlyPanel, type DogFriendlyPanelHeadingLevel, type DogFriendlyPanelProps, type DogFriendlyStat, MobileBookingBar, type MobileBookingBarProps, type ReviewItem, type ReviewSubScore, ReviewSummary, type ReviewSummaryProps, SearchField, type SearchFieldProps, searchFieldVariants };