@alveole/components 2.0.0-alpha.14 → 2.0.0-alpha.16

package/dist/core/AnchorHeading/AnchorHeading.d.ts

@@ -1,8 +1,12 @@
+import type { HeadingLevel } from '../Heading';
 import type { TypographyProps } from '../Typography';
 export type AnchorHeadingProps = {
-    children: string;
+    children: React.ReactNode;
     style?: TypographyProps['style'];
+    color?: TypographyProps['color'];
+    /** Sur le web, rend un `Heading` : vraie balise, taille et couleur de titre. */
+    as?: HeadingLevel;
     scrollMarginTop?: number;
 };
-export declare const AnchorHeading: ({ children, style }: AnchorHeadingProps) => import("react").JSX.Element;
+export declare const AnchorHeading: ({ children, style, color }: AnchorHeadingProps) => import("react").JSX.Element;
 //# sourceMappingURL=AnchorHeading.d.ts.map

package/dist/core/AnchorHeading/AnchorHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,qBAAqB,kBAAkB,gCAEpE,CAAC"}
+{"version":3,"file":"AnchorHeading.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,gFAAgF;IAChF,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,4BAA4B,kBAAkB,gCAI3E,CAAC"}

package/dist/core/AnchorHeading/AnchorHeading.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '../Typography';
-export const AnchorHeading = ({ children, style }) => (_jsx(Typography, { style: style, children: children }));
+export const AnchorHeading = ({ children, style, color }) => (_jsx(Typography, { style: style, color: color, children: children }));

package/dist/core/AnchorHeading/AnchorHeading.stories.d.ts

@@ -4,10 +4,11 @@ declare const _default: {
     experimental: true;
     webOnly: true;
     description: string;
-    component: ({ children, style }: import("./AnchorHeading").AnchorHeadingProps) => import("react").JSX.Element;
+    component: ({ children, style, color }: import("./AnchorHeading").AnchorHeadingProps) => import("react").JSX.Element;
     styleFn: () => {};
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
+export declare const AvecNiveau: () => import("react").JSX.Element;
 export * as Sources from './AnchorHeading.stories.sources';
 //# sourceMappingURL=AnchorHeading.stories.d.ts.map

package/dist/core/AnchorHeading/AnchorHeading.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAGnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"AnchorHeading.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.stories.tsx"],"names":[],"mappings":";;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAGnB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAAmE,CAAC;AAE3F,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}

package/dist/core/AnchorHeading/AnchorHeading.stories.js

@@ -14,4 +14,5 @@ export const Default = () => {
     const { text } = useTheme();
     return _jsx(AnchorHeading, { style: text.Titres['H5 - XS'], children: "Mon exemple de titre" });
 };
+export const AvecNiveau = () => _jsx(AnchorHeading, { as: "h2", children: "Titre h2 avec ancre" });
 export * as Sources from './AnchorHeading.stories.sources';

package/dist/core/AnchorHeading/AnchorHeading.stories.sources.d.ts

@@ -1,6 +1,8 @@
 export declare const Default: () => string;
+export declare const AvecNiveau: () => string;
 export declare const storySources: {
     readonly Default: () => string;
+    readonly AvecNiveau: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=AnchorHeading.stories.sources.d.ts.map

package/dist/core/AnchorHeading/AnchorHeading.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA2K,CAAC;AAEhM,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"AnchorHeading.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA2K,CAAC;AAEhM,eAAO,MAAM,UAAU,cAAwG,CAAC;AAEhI,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/AnchorHeading/AnchorHeading.stories.sources.js

@@ -1,6 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/core/AnchorHeading/AnchorHeading.stories.tsx
 export const Default = () => "export const Default = () => {\n  const { text } = useTheme();\n  return <AnchorHeading style={text.Titres['H5 - XS']}>Mon exemple de titre</AnchorHeading>;\n};";
+export const AvecNiveau = () => "export const AvecNiveau = () => <AnchorHeading as=\"h2\">Titre h2 avec ancre</AnchorHeading>;";
 export const storySources = {
     Default,
+    AvecNiveau,
 };

package/dist/core/AnchorHeading/AnchorHeading.web.d.ts

@@ -1,3 +1,3 @@
 import type { AnchorHeadingProps } from './AnchorHeading';
-export declare const AnchorHeading: ({ children, style, scrollMarginTop }: AnchorHeadingProps) => import("react").JSX.Element;
+export declare const AnchorHeading: ({ children, style, color: couleur, as, scrollMarginTop }: AnchorHeadingProps) => import("react").JSX.Element;
 //# sourceMappingURL=AnchorHeading.web.d.ts.map

package/dist/core/AnchorHeading/AnchorHeading.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.web.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.web.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,eAAO,MAAM,aAAa,GAAI,sCAAsC,kBAAkB,gCAgDrF,CAAC"}
+{"version":3,"file":"AnchorHeading.web.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/AnchorHeading.web.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,eAAO,MAAM,aAAa,GAAI,0DAA0D,kBAAkB,gCA0DzG,CAAC"}

package/dist/core/AnchorHeading/AnchorHeading.web.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FOCUS_ATTRIBUTE, useTheme } from '@alveole/theme';
 import { useState } from 'react';
 import { LucideIcon } from '../../ui/LucideIcon';
+import { Heading } from '../Heading';
 import { Typography } from '../Typography';
-import { toSlug } from './slug';
-export const AnchorHeading = ({ children, style, scrollMarginTop }) => {
+import { texteDe, toSlug } from './slug';
+export const AnchorHeading = ({ children, style, color: couleur, as, scrollMarginTop }) => {
     const { color } = useTheme();
     const [hovered, setHovered] = useState(false);
     const [iconHovered, setIconHovered] = useState(false);
@@ -12,14 +13,16 @@ export const AnchorHeading = ({ children, style, scrollMarginTop }) => {
     // Un state convient ici, contrairement a la bague : montrer le lien quelle que soit la
     // provenance du focus est inoffensif, l'afficher est precisement ce qu'on veut.
     const [focused, setFocused] = useState(false);
-    const slug = toSlug(children);
+    const texte = texteDe(children);
+    // shortcut: deux titres identiques partagent le meme id, suffixer si une page en a besoin.
+    const slug = toSlug(texte);
     return (_jsxs("div", { id: slug, style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
             gap: 6,
             ...(scrollMarginTop != null ? { scrollMarginTop } : null),
-        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx(Typography, { style: style, children: children }), _jsx("a", { href: `#${slug}`, "aria-label": `Lien vers la section ${children}`, [FOCUS_ATTRIBUTE]: 'ring', style: {
+        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [as ? (_jsx(Heading, { as: as, style: style, color: couleur, children: children })) : (_jsx(Typography, { style: style, color: couleur, children: children })), _jsx("a", { href: `#${slug}`, "aria-label": `Lien vers la section ${texte}`, [FOCUS_ATTRIBUTE]: 'ring', style: {
                     opacity: hovered || focused ? 1 : 0,
                     transition: 'opacity 0.15s',
                     display: 'flex',

package/dist/core/AnchorHeading/slug.d.ts

@@ -1,6 +1,9 @@
+import React from 'react';
 /**
  * L'ancre d'un titre. Extrait de AnchorHeading pour que ce qui pointe vers une ancre la
  * calcule de la meme facon : un sommaire qui slugifie autrement renvoie dans le vide.
  */
 export declare const toSlug: (value: string) => string;
+/** Le texte brut d'un titre, gras ou code compris : de quoi en tirer l'ancre et le nom du lien. */
+export declare const texteDe: (node: React.ReactNode) => string;
 //# sourceMappingURL=slug.d.ts.map

package/dist/core/AnchorHeading/slug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slug.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/slug.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,WAML,CAAC"}
+{"version":3,"file":"slug.d.ts","sourceRoot":"","sources":["../../../src/core/AnchorHeading/slug.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;GAGG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,MAAM,WAML,CAAC;AAEhC,mGAAmG;AACnG,eAAO,MAAM,OAAO,GAAI,MAAM,KAAK,CAAC,SAAS,KAAG,MAK/C,CAAC"}

package/dist/core/AnchorHeading/slug.js

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * L'ancre d'un titre. Extrait de AnchorHeading pour que ce qui pointe vers une ancre la
  * calcule de la meme facon : un sommaire qui slugifie autrement renvoie dans le vide.
@@ -8,3 +9,13 @@ export const toSlug = (value) => value
     .replace(/[̀-ͯ]/g, '')
     .replace(/\s+/g, '-')
     .replace(/[^a-z0-9-]/g, '');
+/** Le texte brut d'un titre, gras ou code compris : de quoi en tirer l'ancre et le nom du lien. */
+export const texteDe = (node) => {
+    if (typeof node === 'string' || typeof node === 'number')
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(texteDe).join('');
+    if (React.isValidElement(node))
+        return texteDe(node.props.children);
+    return '';
+};

package/dist/core/Heading/Heading.d.ts

@@ -0,0 +1,8 @@
+import { TypographyProps } from '../Typography';
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HeadingProps = Omit<TypographyProps, 'tag'> & {
+    /** Balise rendue, qui fixe aussi la taille par defaut. */
+    as?: HeadingLevel;
+};
+export declare const Heading: ({ as, style, color, ...props }: HeadingProps) => import("react").JSX.Element;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/core/Heading/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/core/Heading/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,GAAG;IACxD,0DAA0D;IAC1D,EAAE,CAAC,EAAE,YAAY,CAAC;CACnB,CAAC;AAWF,eAAO,MAAM,OAAO,GAAI,gCAAuC,YAAY,gCAU1E,CAAC"}

package/dist/core/Heading/Heading.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { Typography } from '../Typography';
+const STYLE_PAR_NIVEAU = {
+    h1: 'H1 - XL',
+    h2: 'H2 - LG',
+    h3: 'H3 - MD',
+    h4: 'H4 - SM',
+    h5: 'H5 - XS',
+    h6: 'H6 - XXS',
+};
+export const Heading = ({ as = 'h2', style, color, ...props }) => {
+    const theme = useTheme();
+    return (_jsx(Typography, { tag: as, style: [theme.text.Titres[STYLE_PAR_NIVEAU[as]], style], color: color ?? theme.color.light.text['title-grey'], ...props }));
+};

package/dist/core/Heading/Heading.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    title: string;
+    tags: "core"[];
+    experimental: true;
+    description: string;
+    component: ({ as, style, color, ...props }: import("./Heading").HeadingProps) => import("react").JSX.Element;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Niveaux: () => import("react").JSX.Element;
+export * as Sources from './Heading.stories.sources';
+//# sourceMappingURL=Heading.stories.d.ts.map

package/dist/core/Heading/Heading.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Heading/Heading.stories.tsx"],"names":[],"mappings":";;;;;;;;AAGA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAA6C,CAAC;AAElE,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/core/Heading/Heading.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading } from './Heading';
+export default {
+    title: 'Heading',
+    tags: ['core'],
+    experimental: true,
+    description: 'Titre de section : `as` fixe la balise (h1 a h6) et sa taille par defaut.',
+    component: Heading,
+    styleFn: () => ({}),
+};
+export const Default = () => _jsx(Heading, { children: "Titre de niveau 2" });
+export const Niveaux = () => (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", children: "Titre h1" }), _jsx(Heading, { as: "h2", children: "Titre h2" }), _jsx(Heading, { as: "h3", children: "Titre h3" }), _jsx(Heading, { as: "h4", children: "Titre h4" }), _jsx(Heading, { as: "h5", children: "Titre h5" }), _jsx(Heading, { as: "h6", children: "Titre h6" })] }));
+export * as Sources from './Heading.stories.sources';

package/dist/core/Heading/Heading.stories.sources.d.ts

@@ -0,0 +1,8 @@
+export declare const Default: () => string;
+export declare const Niveaux: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly Niveaux: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=Heading.stories.sources.d.ts.map

package/dist/core/Heading/Heading.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Heading/Heading.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA6E,CAAC;AAElG,eAAO,MAAM,OAAO,cAA4T,CAAC;AAEjV,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/Heading/Heading.stories.sources.js

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/core/Heading/Heading.stories.tsx
+export const Default = () => "export const Default = () => <Heading>Titre de niveau 2</Heading>;";
+export const Niveaux = () => "export const Niveaux = () => (\n  <>\n    <Heading as=\"h1\">Titre h1</Heading>\n    <Heading as=\"h2\">Titre h2</Heading>\n    <Heading as=\"h3\">Titre h3</Heading>\n    <Heading as=\"h4\">Titre h4</Heading>\n    <Heading as=\"h5\">Titre h5</Heading>\n    <Heading as=\"h6\">Titre h6</Heading>\n  </>\n);";
+export const storySources = {
+    Default,
+    Niveaux,
+};

package/dist/core/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Heading';
+//# sourceMappingURL=index.d.ts.map

package/dist/core/Heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/Heading/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/core/Heading/index.js

@@ -0,0 +1 @@
+export * from './Heading';

package/dist/core/MarkdownDescription/markdownComponents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdownComponents.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/markdownComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAGxD,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AAczD,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,cAAc,CAAC,UAAU,CAG7E,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAClD,KAAK,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,eAAe,CAAC,CAAC;AAE9G,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;IACrB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;IAChC,4EAA4E;IAC5E,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,wBAAwB,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAEnG,eAAO,MAAM,oBAAoB,GAAI,qCAAqC,mBAAmB;yBACtE,WAAW;8BAKN,WAAW;0BAKf,WAAW;CAKjC,CAAC;AAEH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,MAAM;0BACnE,WAAW;0BAKX,WAAW;0BAKX,WAAW;0BAKX,WAAW;CAKjC,CAAC;AA+HH,eAAO,MAAM,wBAAwB,GAAI,QAAQ,wBAAwB,KAAG,UAQ1E,CAAC"}
+{"version":3,"file":"markdownComponents.d.ts","sourceRoot":"","sources":["../../../src/core/MarkdownDescription/markdownComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAIxD,OAAO,EAAa,cAAc,EAAE,MAAM,cAAc,CAAC;AAczD,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,cAAc,CAAC,UAAU,CAG7E,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAClD,KAAK,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,eAAe,CAAC,CAAC;AAE9G,MAAM,MAAM,wBAAwB,GAAG;IACrC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;IACrB,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;IAChC,4EAA4E;IAC5E,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,wBAAwB,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAEnG,eAAO,MAAM,oBAAoB,GAAI,qCAAqC,mBAAmB;yBACtE,WAAW;8BAKN,WAAW;0BAKf,WAAW;CAKjC,CAAC;AAGH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,KAAK,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,MAAM;0BACnE,WAAW;0BAKX,WAAW;0BAKX,WAAW;0BAKX,WAAW;CAKjC,CAAC;AA+HH,eAAO,MAAM,wBAAwB,GAAI,QAAQ,wBAAwB,KAAG,UAQ1E,CAAC"}

package/dist/core/MarkdownDescription/markdownComponents.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FOCUS_ATTRIBUTE } from '@alveole/theme';
+import { AnchorHeading } from '../AnchorHeading';
 import { Box } from '../Box';
 import { Code } from '../Code';
 import { Highlight } from '../Highlight';
@@ -23,11 +24,12 @@ export const createTextComponents = ({ bodyStyle, boldStyle, textColor }) => ({
     strong: ({ children: c }) => (_jsx(Typography, { style: boldStyle, color: textColor, children: c })),
     em: ({ children: c }) => (_jsx(Typography, { style: [bodyStyle, { fontStyle: 'italic' }], color: textColor, children: c })),
 });
+// La balise suit le niveau markdown ; la taille est decalee de deux crans, ces titres vivant sous ceux de la page.
 export const createHeadingComponents = (titres, titleColor) => ({
-    h1: ({ children: c }) => (_jsx(Typography, { style: titres['H3 - MD'], color: titleColor, children: c })),
-    h2: ({ children: c }) => (_jsx(Typography, { style: titres['H4 - SM'], color: titleColor, children: c })),
-    h3: ({ children: c }) => (_jsx(Typography, { style: titres['H5 - XS'], color: titleColor, children: c })),
-    h4: ({ children: c }) => (_jsx(Typography, { style: titres['H6 - XXS'], color: titleColor, children: c })),
+    h1: ({ children: c }) => (_jsx(AnchorHeading, { as: "h1", style: titres['H3 - MD'], color: titleColor, children: c })),
+    h2: ({ children: c }) => (_jsx(AnchorHeading, { as: "h2", style: titres['H4 - SM'], color: titleColor, children: c })),
+    h3: ({ children: c }) => (_jsx(AnchorHeading, { as: "h3", style: titres['H5 - XS'], color: titleColor, children: c })),
+    h4: ({ children: c }) => (_jsx(AnchorHeading, { as: "h4", style: titres['H6 - XXS'], color: titleColor, children: c })),
 });
 const createListComponents = (bodyStyle) => ({
     ul: ({ children: c }) => (_jsx(Box, { display: "flex", gap: 4, children: c })),

package/dist/core/index.d.ts

@@ -6,6 +6,7 @@ export * from './Box';
 export * from './Code';
 export * from './Form';
 export * from './Grid';
+export * from './Heading';
 export * from './Highlight';
 export * from './Image';
 export * from './Lottie';

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,KAAK,CAAC;AACpB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,KAAK,CAAC;AACpB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}

package/dist/core/index.js

@@ -6,6 +6,7 @@ export * from './Box';
 export * from './Code';
 export * from './Form';
 export * from './Grid';
+export * from './Heading';
 export * from './Highlight';
 export * from './Image';
 export * from './Lottie';

package/dist/generated/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.14";
+export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.16";
 //# sourceMappingURL=version.d.ts.map

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.14";
+export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.16";

package/dist/stories/index.d.ts

@@ -4,6 +4,7 @@ export * as AppUpdateProviderStories from '../core/AppUpdateProvider/AppUpdatePr
 export * as BoxStory from '../core/Box/Box.stories';
 export * as CodeStory from '../core/Code/Code.stories';
 export * as GridStory from '../core/Grid/Grid.stories';
+export * as HeadingStory from '../core/Heading/Heading.stories';
 export * as Highlight from '../core/Highlight/Highlight.stories';
 export * as ImageStory from '../core/Image/Image.stories';
 export * as LottieStory from '../core/Lottie/Lottie.stories';

package/dist/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,kBAAkB,MAAM,6CAA6C,CAAC;AAClF,OAAO,KAAK,wBAAwB,MAAM,qDAAqD,CAAC;AAChG,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,SAAS,MAAM,qCAAqC,CAAC;AACjE,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,wBAAwB,MAAM,yDAAyD,CAAC;AACpG,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,mBAAmB,MAAM,qCAAqC,CAAC;AAC3E,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,kBAAkB,MAAM,6CAA6C,CAAC;AAClF,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,mBAAmB,MAAM,6CAA6C,CAAC;AACnF,OAAO,KAAK,kBAAkB,MAAM,2CAA2C,CAAC;AAChF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,aAAa,MAAM,oCAAoC,CAAC;AACpE,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,yBAAyB,MAAM,yDAAyD,CAAC;AACrG,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,kBAAkB,MAAM,2CAA2C,CAAC;AAChF,OAAO,KAAK,mBAAmB,MAAM,6CAA6C,CAAC;AACnF,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}

package/dist/stories/index.js

@@ -5,6 +5,7 @@ export * as AppUpdateProviderStories from '../core/AppUpdateProvider/AppUpdatePr
 export * as BoxStory from '../core/Box/Box.stories';
 export * as CodeStory from '../core/Code/Code.stories';
 export * as GridStory from '../core/Grid/Grid.stories';
+export * as HeadingStory from '../core/Heading/Heading.stories';
 export * as Highlight from '../core/Highlight/Highlight.stories';
 export * as ImageStory from '../core/Image/Image.stories';
 export * as LottieStory from '../core/Lottie/Lottie.stories';

package/dist/ui/PriceInput/PriceInput.js

@@ -10,7 +10,7 @@ export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
     const styles = useStyles();
     const champ = useFieldFocus({ disabled: props.disabled, readOnly: props.readOnly });
     const numberLength = value ? String(value).length : 1;
-    return (_jsx(Box, { tag: "price-input", style: { ...styles.container, ...(champ.focus ? styles.containerFocused : {}) }, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx(ReactNativeTextInput, { ref: ref, style: {
+    return (_jsx(Box, { tag: "price-input", style: { ...styles.container, ...(champ.focus ? styles.inputFocused : {}) }, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx(ReactNativeTextInput, { ref: ref, style: {
                         ...styles.input,
                         minWidth: numberLength * 36,
                     }, ...inputProps, value: Number.isNaN(value) || value == null ? '' : String(value), onChangeText: e => {

package/dist/ui/PriceInput/PriceInput.stories.d.ts

@@ -18,9 +18,23 @@ declare const _default: {
             borderBottomColor: string;
             paddingBottom: string | number;
         };
-        containerFocused: {
+        inputFocused: {
             borderBottomWidth: number;
             borderBottomColor: string;
+            borderRadius: import("@alveole/theme").Radius;
+            outlineWidth?: number;
+            outlineStyle?: "solid";
+            outlineColor?: string;
+            outlineOffset?: number;
+        };
+        inputError: {
+            borderBottomColor: string;
+        };
+        inputSuccess: {
+            borderBottomColor: string;
+        };
+        inputDisabled: {
+            borderBottomColor: string;
         };
         priceInputContainer: {
             display: "flex";
@@ -30,6 +44,7 @@ declare const _default: {
         input: {
             outline: string;
             borderWidth: number;
+            backgroundColor: "transparent";
             textAlign: "center";
             color: string;
             fontFamily: string;
@@ -54,5 +69,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react").JSX.Element;
+export declare const States: () => import("react").JSX.Element;
 export * as Sources from './PriceInput.stories.sources';
 //# sourceMappingURL=PriceInput.stories.d.ts.map

package/dist/ui/PriceInput/PriceInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"PriceInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAYlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/PriceInput/PriceInput.stories.js

@@ -17,4 +17,5 @@ export const Default = () => {
     const [value, setValue] = useState(null);
     return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Montant", children: _jsx(PriceInput, { value: value, onChange: setValue }) }), _jsx(FormControl, { label: "Montant saisi", children: _jsx(PriceInput, { value: 1250, onChange: () => { } }) })] }));
 };
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Erreur", error: "Montant requis", children: _jsx(PriceInput, { value: null, error: "Montant requis", onChange: () => { } }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(PriceInput, { value: 1250, success: "Enregistr\u00E9", onChange: () => { } }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(PriceInput, { value: 1250, disabled: true, onChange: () => { } }) })] }));
 export * as Sources from './PriceInput.stories.sources';

package/dist/ui/PriceInput/PriceInput.stories.sources.d.ts

@@ -1,6 +1,8 @@
 export declare const Default: () => string;
+export declare const States: () => string;
 export declare const storySources: {
     readonly Default: () => string;
+    readonly States: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=PriceInput.stories.sources.d.ts.map

package/dist/ui/PriceInput/PriceInput.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwb,CAAC;AAE7c,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"PriceInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwb,CAAC;AAE7c,eAAO,MAAM,MAAM,cAAojB,CAAC;AAExkB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/PriceInput/PriceInput.stories.sources.js

@@ -1,6 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/PriceInput/PriceInput.stories.tsx
 export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Montant\">\n        <PriceInput value={value} onChange={setValue} />\n      </FormControl>\n      <FormControl label=\"Montant saisi\">\n        <PriceInput value={1250} onChange={() => {}} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl label=\"Erreur\" error=\"Montant requis\">\n      <PriceInput value={null} error=\"Montant requis\" onChange={() => {}} />\n    </FormControl>\n    <FormControl label=\"Succès\" success=\"Enregistré\">\n      <PriceInput value={1250} success=\"Enregistré\" onChange={() => {}} />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <PriceInput value={1250} disabled onChange={() => {}} />\n    </FormControl>\n  </Box>\n);";
 export const storySources = {
     Default,
+    States,
 };

package/dist/ui/PriceInput/PriceInput.styles.d.ts

@@ -7,9 +7,23 @@ export declare const useStyles: () => {
         borderBottomColor: string;
         paddingBottom: string | number;
     };
-    containerFocused: {
+    inputFocused: {
         borderBottomWidth: number;
         borderBottomColor: string;
+        borderRadius: import("@alveole/theme").Radius;
+        outlineWidth?: number;
+        outlineStyle?: "solid";
+        outlineColor?: string;
+        outlineOffset?: number;
+    };
+    inputError: {
+        borderBottomColor: string;
+    };
+    inputSuccess: {
+        borderBottomColor: string;
+    };
+    inputDisabled: {
+        borderBottomColor: string;
     };
     priceInputContainer: {
         display: "flex";
@@ -19,6 +33,7 @@ export declare const useStyles: () => {
     input: {
         outline: string;
         borderWidth: number;
+        backgroundColor: "transparent";
         textAlign: "center";
         color: string;
         fontFamily: string;

package/dist/ui/PriceInput/PriceInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCnB,CAAC"}
+{"version":3,"file":"PriceInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDnB,CAAC"}

package/dist/ui/PriceInput/PriceInput.styles.js

@@ -1,5 +1,5 @@
 import { focusBorder, makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing }) => ({
+export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
@@ -8,11 +8,23 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         borderBottomColor: color.light.border['plain-grey'],
         paddingBottom: spacing('1W'),
     },
-    // Le champ de prix n'a qu'un trait sous le montant en guise de cadre : c'est donc lui que
-    // le focus recolore, avec la meme definition que la bordure complete des autres champs.
-    containerFocused: {
-        borderBottomWidth: focusBorder().borderWidth,
-        borderBottomColor: focusBorder().borderColor,
+    // Le champ de prix n'a qu'un trait sous le montant en guise de cadre : le focus le recolore,
+    // et l'anneau encastre des autres champs (ADR 0017) entoure la zone du montant.
+    inputFocused: (({ borderWidth, borderColor, ...anneau }) => ({
+        ...anneau,
+        borderBottomWidth: borderWidth,
+        borderBottomColor: borderColor,
+        // Au focus seulement : au repos, un rayon courberait les extremites du seul trait visible.
+        borderRadius: radius('md'),
+    }))(focusBorder()),
+    inputError: {
+        borderBottomColor: color.light.border['plain-error'],
+    },
+    inputSuccess: {
+        borderBottomColor: color.light.border['plain-success'],
+    },
+    inputDisabled: {
+        borderBottomColor: color.light.border['disabled-grey'],
     },
     priceInputContainer: {
         display: 'flex',
@@ -22,6 +34,8 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     input: {
         outline: 'none',
         borderWidth: 0,
+        // Le blanc par defaut d'un <input> recouvrirait l'anneau encastre du cadre.
+        backgroundColor: 'transparent',
         textAlign: 'center',
         color: color.light.text['title-grey'],
         fontFamily: text['Titres alternatifs'].MD.fontFamily,

package/dist/ui/PriceInput/PriceInput.web.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './PriceInput.css';
 export declare const PriceInput: React.ForwardRefExoticComponent<import("..").NumberInputProps & {
     autoFocus?: boolean;
     devise?: "\u20AC";

package/dist/ui/PriceInput/PriceInput.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,kBAAkB,CAAC;AAK1B,eAAO,MAAM,UAAU;;;;0CAuCrB,CAAC"}
+{"version":3,"file":"PriceInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,eAAO,MAAM,UAAU;;;;0CAwCrB,CAAC"}

package/dist/ui/PriceInput/PriceInput.web.js

@@ -4,22 +4,21 @@ import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
 import { useFieldId } from '../FormControl';
 import { useFieldFocus } from '../FormControl/useFieldFocus';
-import './PriceInput.css';
+import { cadrePrix } from './cadrePrix';
 import { useStyles } from './PriceInput.styles';
-const MAX_VALUE = 99999999;
+import { useSaisieMontant } from './useSaisieMontant';
 export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
-    const { devise, autoFocus, value, disabled, readOnly, onChange } = props;
+    const { devise, autoFocus, value, disabled, readOnly, error, success, onChange } = props;
     const styles = useStyles();
     const champ = useFieldFocus({ disabled, readOnly });
-    const numberLength = value ? String(value).length : 1;
-    return (_jsx(Box, { tag: "price-input", style: { ...styles.container, ...(champ.focus ? styles.containerFocused : {}) }, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx("input", { ref: ref, id: useFieldId(), autoFocus: autoFocus, className: "alveole-price-input", style: {
+    const { affichage, saisir } = useSaisieMontant(value, onChange);
+    // Avec des chiffres tabulaires, un caractère occupe au plus 1 ch.
+    const largeur = `${affichage.length || 1}ch`;
+    return (_jsx(Box, { tag: "price-input", style: cadrePrix(styles, { focus: champ.focus, disabled, error, success }), children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx("input", { ref: ref, id: useFieldId(), autoFocus: autoFocus, disabled: disabled, readOnly: readOnly, className: "alveole-price-input", style: {
                         ...styles.input,
                         fontVariantNumeric: 'tabular-nums',
-                        width: numberLength * 36,
+                        width: largeur,
                         lineHeight: 'inherit',
                         maxWidth: '100%',
-                    }, value: value ?? '', placeholder: "0", onChange: e => {
-                        const newValue = e.target.value;
-                        onChange?.(newValue === '' ? null : Number(newValue));
-                    }, onFocus: champ.handleFocus, onBlur: champ.handleBlur, type: "number", max: MAX_VALUE }), _jsx(Typography, { style: styles.inputDevise, children: devise || '€' })] }) }));
+                    }, value: affichage, placeholder: "0", onChange: e => saisir(e.target.value), onFocus: champ.handleFocus, onBlur: champ.handleBlur, type: "text", inputMode: "decimal" }), _jsx(Typography, { style: styles.inputDevise, children: devise || '€' })] }) }));
 });

package/dist/ui/PriceInput/cadrePrix.d.ts

@@ -0,0 +1,17 @@
+import { FieldBorderState } from '../FormControl/fieldBorderState';
+import { useStyles } from './PriceInput.styles';
+type Styles = ReturnType<typeof useStyles>;
+/**
+ * Le trait sous le montant tient lieu de cadre au champ de prix : il prend les etats de tous
+ * les champs, dans la priorite commune de l'ADR 0012.
+ */
+export declare const cadrePrix: (styles: Styles, state: FieldBorderState) => {
+    borderBottomColor: string;
+    display: "flex";
+    flexDirection: "column";
+    width: "100%";
+    borderBottomWidth: number;
+    paddingBottom: string | number;
+};
+export {};
+//# sourceMappingURL=cadrePrix.d.ts.map

package/dist/ui/PriceInput/cadrePrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cadrePrix.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/cadrePrix.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAoB,MAAM,iCAAiC,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,QAAQ,MAAM,EAAE,OAAO,gBAAgB;;;;;;;CAG/D,CAAC"}

package/dist/ui/PriceInput/cadrePrix.js

@@ -0,0 +1,9 @@
+import { fieldBorderState } from '../FormControl/fieldBorderState';
+/**
+ * Le trait sous le montant tient lieu de cadre au champ de prix : il prend les etats de tous
+ * les champs, dans la priorite commune de l'ADR 0012.
+ */
+export const cadrePrix = (styles, state) => ({
+    ...styles.container,
+    ...fieldBorderState(styles, state),
+});

package/dist/ui/PriceInput/useSaisieMontant.d.ts

@@ -0,0 +1,5 @@
+export declare const useSaisieMontant: (montant: number | null | undefined, onChange?: (montant: number | null) => void) => {
+    affichage: string;
+    saisir: (texte: string) => void;
+};
+//# sourceMappingURL=useSaisieMontant.d.ts.map

package/dist/ui/PriceInput/useSaisieMontant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSaisieMontant.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/useSaisieMontant.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI;;oBAKvF,MAAM;CAO9B,CAAC"}

package/dist/ui/PriceInput/useSaisieMontant.js

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+// Des chiffres, puis au plus un séparateur décimal (virgule ou point) et deux décimales.
+const MONTANT = /^\d*([.,]\d{0,2})?$/;
+// La virgule est le séparateur décimal en français ; Number ne lit que le point.
+const lireMontant = (texte) => (texte === '' ? null : Number(texte.replace(',', '.')));
+// Le texte tapé reste affiché tant qu'il vaut le montant reçu : « 12, » attend sa décimale
+// au lieu de redevenir « 12 ». Un montant imposé par le parent reprend la main.
+export const useSaisieMontant = (montant, onChange) => {
+    const texteDuMontant = montant == null ? '' : String(montant);
+    const [saisie, setSaisie] = useState(texteDuMontant);
+    const affichage = lireMontant(saisie) === (montant ?? null) ? saisie : texteDuMontant;
+    const saisir = (texte) => {
+        if (!MONTANT.test(texte))
+            return;
+        setSaisie(texte);
+        onChange?.(lireMontant(texte));
+    };
+    return { affichage, saisir };
+};

package/dist/ui/Select/Select.stories.js

@@ -21,7 +21,7 @@ export default {
         'Le composant reste **strictement contrôlé**, y compris pour la création d’option : `onCreateOption` reçoit',
         'la saisie, à l’appelant d’ajouter l’option à `options` puis de mettre `value` à jour.',
         '',
-        '### Migration depuis `Autocomplete`',
+        '## Migration depuis `Autocomplete`',
         '',
         // Cellules en texte brut : le rendu Markdown du catalogue échoue sur du code
         // inline dans un tableau.

package/dist/ui/Sidebar/Sidebar.stories.js

@@ -23,7 +23,7 @@ export default {
 };
 export const ExampleUsage = () => {
     const controller = useSidebar();
-    return (_jsxs(Sidebar, { controller: controller, logo: _jsx(Typography, { fontSize: 16, style: { fontWeight: '700' }, children: "Mon Application" }), footer: _jsx(SidebarItem, { pressable: true, leading: "LogOut", title: "Se d\u00E9connecter", onPress: console.log }), children: [_jsx(SidebarItem, { pressable: true, title: "Item 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 2", onPress: console.log }), _jsxs(SidebarGroup, { title: "Groupe", children: [_jsx(SidebarItem, { pressable: true, title: "Item group 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item group 2", onPress: console.log })] })] }));
+    return (_jsxs(Sidebar, { controller: controller, logo: _jsx(Typography, { fontSize: 16, style: { fontWeight: '700' }, children: "Mon Application" }), footer: _jsx(SidebarItem, { pressable: true, leading: "LogOut", title: "Se d\u00E9connecter", onPress: console.log }), children: [_jsx(SidebarItem, { pressable: true, title: "Item 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 2", counter: 3, onPress: console.log }), _jsxs(SidebarGroup, { title: "Groupe", children: [_jsx(SidebarItem, { pressable: true, title: "Item group 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item group 2", onPress: console.log })] })] }));
 };
 // Faute de logo publie pour Alveole, une forme generee tient lieu de logo.
 const organisations = [

package/dist/ui/Sidebar/Sidebar.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAqxB,CAAC;AAE/yB,eAAO,MAAM,kBAAkB,cAA2/D,CAAC;AAE3hE,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Sidebar.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAiyB,CAAC;AAE3zB,eAAO,MAAM,kBAAkB,cAA2/D,CAAC;AAE3hE,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Sidebar/Sidebar.stories.sources.js

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Sidebar/Sidebar.stories.tsx
-export const ExampleUsage = () => "export const ExampleUsage = () => {\n  const controller = useSidebar();\n\n  return (\n    <Sidebar\n      controller={controller}\n      logo={\n        <Typography fontSize={16} style={{ fontWeight: '700' }}>\n          Mon Application\n        </Typography>\n      }\n      footer={<SidebarItem pressable leading=\"LogOut\" title=\"Se déconnecter\" onPress={console.log} />}\n    >\n      <SidebarItem pressable title=\"Item 1\" onPress={console.log} />\n      <SidebarItem pressable title=\"Item 2\" onPress={console.log} />\n\n      <SidebarGroup title=\"Groupe\">\n        <SidebarItem pressable title=\"Item group 1\" onPress={console.log} />\n        <SidebarItem pressable title=\"Item group 2\" onPress={console.log} />\n      </SidebarGroup>\n    </Sidebar>\n  );\n};";
+export const ExampleUsage = () => "export const ExampleUsage = () => {\n  const controller = useSidebar();\n\n  return (\n    <Sidebar\n      controller={controller}\n      logo={\n        <Typography fontSize={16} style={{ fontWeight: '700' }}>\n          Mon Application\n        </Typography>\n      }\n      footer={<SidebarItem pressable leading=\"LogOut\" title=\"Se déconnecter\" onPress={console.log} />}\n    >\n      <SidebarItem pressable title=\"Item 1\" onPress={console.log} />\n      <SidebarItem pressable title=\"Item 2\" counter={3} onPress={console.log} />\n\n      <SidebarGroup title=\"Groupe\">\n        <SidebarItem pressable title=\"Item group 1\" onPress={console.log} />\n        <SidebarItem pressable title=\"Item group 2\" onPress={console.log} />\n      </SidebarGroup>\n    </Sidebar>\n  );\n};";
 export const AvecHeaderEtFooter = () => "export const AvecHeaderEtFooter = () => {\n  const [orga, setOrga] = useState('Alveole');\n\n  const logo = (\n    <ActionMenu\n      placement=\"bottom-start\"\n      renderTrigger={() => (\n        <Button\n          variant=\"tertiary\"\n          size=\"md\"\n          contentAlign=\"start\"\n          title={orga}\n          leading={<LogoDOrganisation nom={orga} />}\n          trailing=\"ChevronDown\"\n        />\n      )}\n    >\n      {organisations.map(({ nom }) => (\n        <ActionMenu.Item\n          key={nom}\n          title={nom}\n          leading={<LogoDOrganisation nom={nom} />}\n          selected={nom === orga}\n          onPress={() => setOrga(nom)}\n        />\n      ))}\n    </ActionMenu>\n  );\n\n  const footer = (\n    <ActionMenu\n      placement=\"top-start\"\n      renderTrigger={() => (\n        <Button\n          variant=\"tertiary\"\n          size=\"lg\"\n          contentAlign=\"start\"\n          title=\"Clément Prod'homme\"\n          leading={<Avatar size=\"sm\" src=\"https://www.loremfaces.net/96/id/1.jpg\" fallbackText=\"Clément Prod'homme\" />}\n        />\n      )}\n    >\n      <ActionMenu.Item title=\"Mon profil\" leading=\"User\" />\n      <ActionMenu.Item title=\"Paramètres\" leading=\"Settings\" />\n      <ActionMenu.Item title=\"Aide\" leading=\"HelpCircle\" />\n      <ActionMenu.Item title=\"Se déconnecter\" leading=\"LogOut\" />\n    </ActionMenu>\n  );\n\n  return (\n    <Sidebar logo={logo} footer={footer}>\n      <SidebarItem pressable leading=\"LayoutDashboard\" title=\"Tableau de bord\" onPress={console.log} />\n      <SidebarItem pressable leading=\"Users\" title=\"Utilisateurs\" onPress={console.log} />\n      <SidebarItem pressable leading=\"FileText\" title=\"Rapports\" onPress={console.log} />\n\n      <SidebarDivider />\n\n      <SidebarItem pressable leading=\"Settings\" title=\"Configuration\" onPress={console.log} />\n      <SidebarItem pressable leading=\"Bell\" title=\"Notifications\" onPress={console.log} />\n    </Sidebar>\n  );\n};";
 export const storySources = {
     ExampleUsage,

package/dist/ui/Sidebar/SidebarItem.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import { AProps } from '../../core/A';
+import { CounterProps } from '../Counter';
 import { Leading } from '../Leading';
-export type SidebarItemNavigable = {
+type SidebarItemCompteur = {
+    counter?: number;
+    counterVariant?: CounterProps['variant'];
+};
+export type SidebarItemNavigable = SidebarItemCompteur & {
     pressable?: undefined;
     title: string;
     leading?: Leading;
@@ -9,7 +14,7 @@ export type SidebarItemNavigable = {
     direction?: AProps['direction'];
     routeName?: string;
 };
-export type SidebarItemPressable = {
+export type SidebarItemPressable = SidebarItemCompteur & {
     pressable: true;
     title: string;
     leading?: Leading;
@@ -17,4 +22,5 @@ export type SidebarItemPressable = {
 };
 export type SidebarItemProps = SidebarItemNavigable | SidebarItemPressable;
 export declare const SidebarItem: (props: SidebarItemProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=SidebarItem.d.ts.map

package/dist/ui/Sidebar/SidebarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAGlD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AA+G3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}
+{"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAGlD,KAAK,mBAAmB,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAoI3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}

package/dist/ui/Sidebar/SidebarItem.js

@@ -7,6 +7,7 @@ import { A } from '../../core/A';
 import { Box } from '../../core/Box';
 import { fondAuSurvol } from '../../core/styleTamagui/fondAuSurvol';
 import { Typography } from '../../core/Typography';
+import { Counter } from '../Counter';
 import { LeadingSlot } from '../Leading';
 import { useStyles } from './Sidebar.styles';
 // Un item mène quelque part ou déclenche quelque chose : dans un cas c'est un lien, dans
@@ -21,6 +22,8 @@ const IndicateurPageCourante = () => {
     const styles = useStyles();
     return (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) }));
 };
+// Un compteur à zéro ne compte rien : on ne l'affiche pas.
+const CompteurDItem = ({ counter, counterVariant = 'default' }) => counter != null && counter > 0 ? (_jsx(Box, { mt: "auto", mb: "auto", children: _jsx(Counter, { variant: counterVariant, count: counter }) })) : null;
 const SidebarItemDesktop = (props) => {
     const { title, leading } = props;
     const styles = useStyles();
@@ -31,7 +34,7 @@ const SidebarItemDesktop = (props) => {
                     // La ligne courante se survole comme ses voisines : elle est un lien au même titre, et
                     // lui réserver une teinte propre n'ajoutait qu'un cas particulier. Son fond de repos
                     // étant plus sombre, le survol commun l'éclaircit - la direction que prend Primer.
-                    backgroundColor: fond, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, children: title })] })] }) }));
+                    backgroundColor: fond, children: [_jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected, flex: 1, textAlign: 'left' }, numberOfLines: 1, children: title }), _jsx(CompteurDItem, { ...props })] })] }) }));
 };
 const SidebarItemMobile = (props) => {
     const { title, leading } = props;
@@ -49,7 +52,7 @@ const SidebarItemMobile = (props) => {
                                 color: isCurrentPage
                                     ? styles.sidebarItemTitleSelectedMobile.color
                                     : styles.sidebarItemTitleSelectedMobile.stroke,
-                            } }), _jsx(Typography, { style: titre, color: { default: couleurDuTitre, hover: couleurAuSurvol }, children: title })] })] }) }));
+                            } }), _jsx(Typography, { style: { ...titre, flex: 1, textAlign: 'left' }, color: { default: couleurDuTitre, hover: couleurAuSurvol }, numberOfLines: 1, children: title }), _jsx(CompteurDItem, { ...props })] })] }) }));
 };
 export const SidebarItem = (props) => {
     const { isVariant } = useTheme();

package/dist/ui/Tabs/Tabs.d.ts

@@ -12,6 +12,12 @@ export type TabsProps = Omit<BoxProps, 'children' | 'onChange'> & {
         renderAction?: () => React.ReactNode;
     }[];
     defaultValue?: string;
+    /**
+     * L'onglet actif, impose par le parent : `Tabs` devient controle. Un clic sur un onglet appelle
+     * toujours `onChange`, au parent de mettre `value` a jour. Absent, `Tabs` garde l'onglet actif
+     * pour lui, a partir de `defaultValue`.
+     */
+    value?: string;
     onChange?: (index: number) => void;
     /**
      * Active l'Anchor Sync (voir ADR 0022) : au clic, l'onglet actif est ecrit dans l'etat

package/dist/ui/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAOrC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAChE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAkEpC,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAOrC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAChE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KACtC,EAAE,CAAC;IACJ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAkEpC,CAAC"}

package/dist/ui/Tabs/Tabs.js

@@ -9,10 +9,10 @@ import { TabsTab } from './TabsTab';
 import { useAnchorSync } from './useAnchorSync';
 import { useTabsState } from './useTabsState';
 export const Tabs = (props) => {
-    const { tabs, defaultValue = '', onChange, urlAnchorPrefix, style, ...boxProps } = props;
+    const { tabs, defaultValue = '', value, onChange, urlAnchorPrefix, style, ...boxProps } = props;
     const styles = useStyles();
     const initialValue = defaultValue || tabs[0]?.value || '';
-    const { currentTab, etatDeLOnglet, setCurrentTab, restoreCurrentTab, setHoverTab, handleOnInteraction } = useTabsState(initialValue, onChange);
+    const { currentTab, etatDeLOnglet, setCurrentTab, restoreCurrentTab, setHoverTab, handleOnInteraction } = useTabsState(initialValue, onChange, value);
     const { persist } = useAnchorSync(urlAnchorPrefix, anchor => {
         const tab = tabs.find(t => toSlug(t.label) === anchor);
         if (tab)

package/dist/ui/Tabs/Tabs.stories.d.ts

@@ -121,5 +121,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Example: () => React.JSX.Element;
+export declare const Controle: () => React.JSX.Element;
 export * as Sources from './Tabs.stories.sources';
 //# sourceMappingURL=Tabs.stories.d.ts.map

package/dist/ui/Tabs/Tabs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAIF,eAAO,MAAM,QAAQ,yBAiBpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Tabs/Tabs.stories.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '../../core/Box';
 import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
 import { Tabs } from './Tabs';
 import { useStyles } from './Tabs.styles';
 export default {
@@ -27,4 +28,15 @@ export const Example = () => {
                 },
             ] }) }));
 };
+// `value` rend les Tabs controles : le parent choisit l'onglet actif, par exemple depuis un
+// bouton ou une carte cliquee, et le suit depuis `onChange` quand l'utilisateur clique un onglet.
+export const Controle = () => {
+    const onglets = [
+        { label: 'Onglet 1', value: 'onglet-1', content: _jsx(Typography, { children: "Contenu de onglet 1" }) },
+        { label: 'Onglet 2', value: 'onglet-2', content: _jsx(Typography, { children: "Contenu de onglet 2" }) },
+        { label: 'Onglet 3', value: 'onglet-3', content: _jsx(Typography, { children: "Contenu de onglet 3" }) },
+    ];
+    const [ongletActif, setOngletActif] = React.useState('onglet-1');
+    return (_jsxs(Box, { width: '100%', gap: 16, children: [_jsxs(Box, { flexDirection: "row", gap: 8, children: [_jsx(Button, { title: "Aller \u00E0 l\u2019onglet 1", variant: "secondary", onPress: () => setOngletActif('onglet-1') }), _jsx(Button, { title: "Aller \u00E0 l\u2019onglet 3", variant: "secondary", onPress: () => setOngletActif('onglet-3') })] }), _jsx(Tabs, { value: ongletActif, onChange: index => setOngletActif(onglets[index].value), tabs: onglets })] }));
+};
 export * as Sources from './Tabs.stories.sources';

package/dist/ui/Tabs/Tabs.stories.sources.d.ts

@@ -1,6 +1,8 @@
 export declare const Example: () => string;
+export declare const Controle: () => string;
 export declare const storySources: {
     readonly Example: () => string;
+    readonly Controle: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Tabs.stories.sources.d.ts.map

package/dist/ui/Tabs/Tabs.stories.sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,QAAQ,cAA44B,CAAC;AAEl6B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/ui/Tabs/Tabs.stories.sources.js

@@ -1,6 +1,8 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tabs/Tabs.stories.tsx
 export const Example = () => "export const Example = () => {\n  const [_activeTab, setActiveTab] = React.useState(0);\n\n  return (\n    <Box width={'100%'}>\n      <Tabs\n        defaultValue={'onglet-1'}\n        onChange={setActiveTab}\n        urlAnchorPrefix=\"tabs-story\"\n        tabs={[\n          { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n          { label: 'Onglet 2', counter: 12, value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n          { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n          {\n            label: 'Onglet 4',\n            leading: 'Settings',\n            value: 'onglet-4',\n            content: <Typography>Contenu de onglet 4</Typography>,\n          },\n        ]}\n      />\n    </Box>\n  );\n};";
+export const Controle = () => "export const Controle = () => {\n  const onglets = [\n    { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n    { label: 'Onglet 2', value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n    { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n  ];\n  const [ongletActif, setOngletActif] = React.useState('onglet-1');\n\n  return (\n    <Box width={'100%'} gap={16}>\n      <Box flexDirection=\"row\" gap={8}>\n        <Button title=\"Aller à l’onglet 1\" variant=\"secondary\" onPress={() => setOngletActif('onglet-1')} />\n        <Button title=\"Aller à l’onglet 3\" variant=\"secondary\" onPress={() => setOngletActif('onglet-3')} />\n      </Box>\n      <Tabs value={ongletActif} onChange={index => setOngletActif(onglets[index].value)} tabs={onglets} />\n    </Box>\n  );\n};";
 export const storySources = {
     Example,
+    Controle,
 };

package/dist/ui/Tabs/useTabsState.d.ts

@@ -1,6 +1,6 @@
 import { TabLayout } from 'tamagui';
 import { EtatDeLOnglet } from './Tabs.apparence';
-export declare const useTabsState: (initialValue: string, onChange?: (index: number) => void) => {
+export declare const useTabsState: (initialValue: string, onChange?: (index: number) => void, value?: string) => {
     currentTab: string;
     etatDeLOnglet: (tabValue: string) => EtatDeLOnglet;
     setCurrentTab: (currentTab: string, index: number) => void;

package/dist/ui/Tabs/useTabsState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useTabsState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgB,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAgBjD,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;8BA+BlD,MAAM,KAAG,aAAa;gCAtBpB,MAAM,SAAS,MAAM;oCAOjB,MAAM;4BAKd,MAAM,GAAG,IAAI;;CAuB7C,CAAC"}
+{"version":3,"file":"useTabsState.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/useTabsState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgB,MAAM,SAAS,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkBjD,eAAO,MAAM,YAAY,GAAI,cAAc,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EAAE,QAAQ,MAAM;;8BAiClE,MAAM,KAAG,aAAa;gCAxBpB,MAAM,SAAS,MAAM;oCAOjB,MAAM;4BAKd,MAAM,GAAG,IAAI;;CAyB7C,CAAC"}

package/dist/ui/Tabs/useTabsState.js

@@ -5,7 +5,9 @@ import React from 'react';
 //
 // Le focus n'en fait pas partie : il est rendu par la regle CSS `:focus-visible` du theme, la
 // seule qui distingue le clavier de la souris. Suivi en React, il s'affichait aussi au clic.
-export const useTabsState = (initialValue, onChange) => {
+// `value`, quand le parent la donne, fait foi sur l'onglet retenu en interne : `Tabs` est alors
+// controle, et c'est au parent de la mettre a jour depuis `onChange`.
+export const useTabsState = (initialValue, onChange, value) => {
     const [tabState, setTabState] = React.useState({
         activeAt: null,
         currentTab: initialValue,
@@ -32,12 +34,13 @@ export const useTabsState = (initialValue, onChange) => {
             setTabState(state => ({ ...state, intentAt: layout }));
         }
     };
+    const currentTab = value ?? tabState.currentTab;
     const etatDeLOnglet = (tabValue) => ({
-        actif: tabState.currentTab === tabValue,
+        actif: currentTab === tabValue,
         survole: tabState.hoverTab === tabValue,
     });
     return {
-        currentTab: tabState.currentTab,
+        currentTab,
         etatDeLOnglet,
         setCurrentTab,
         restoreCurrentTab,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.16",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,7 +40,7 @@
     "expo-asset": "57.0.20",
     "expo-document-picker": "57.0.3",
     "expo-image-picker": "57.0.20",
-    "expo-in-app-updates": "0.12.0",
+    "expo-in-app-updates": "0.13.0",
     "expo-linear-gradient": "57.0.2",
     "expo-modules-core": "57.0.23",
     "expo-router": "57.0.28",

package/dist/ui/PriceInput/PriceInput.css

@@ -1,9 +0,0 @@
-.alveole-price-input::-webkit-inner-spin-button,
-.alveole-price-input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.alveole-price-input {
-  -moz-appearance: textfield;
-}