@alveole/components 1.0.0 → 1.1.0

package/dist/ui/TimeInput/TimeInput.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Grid } from '../Grid';
+import { TimeInput } from './TimeInput';
+import { useStyles } from './TimeInput.styles';
+export default {
+    title: 'TimeInput',
+    tags: ['ui'],
+    experimental: false,
+    shortDescription: "Saisie d'une heure d'horloge au format HH:MM (ex. 09:30 pour 9h30 du matin).",
+    description: `Saisie d'une **heure d'horloge** au format HH:MM (ex. \`09:30\` pour 9h30 du matin).
+
+À ne pas confondre avec **DurationInput**, qui représente une **durée écoulée** (ex. \`06:15\` pour 6 heures 15 minutes).
+
+| | TimeInput |
+|---|---|
+| Sémantique | Heure du jour |
+| Exemple | \`09:30\` (9h30 le matin) |
+| Heures valides | 00–23 |
+| HTML web | \`<input type="time">\` |`,
+    component: TimeInput,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "Heure" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "Heure", value: "09:30" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "Heure", value: "14:00", hint: "Heure de d\u00E9but de mission" }) })] }) }));
+export const States = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "Erreur", value: "25:70", error: "Heure invalide (00:00\u201323:59)" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "Succ\u00E8s", value: "09:30", success: "Enregistr\u00E9" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "D\u00E9sactiv\u00E9", value: "09:30", disabled: true }) })] }) }));
+export * as Sources from './TimeInput.stories.sources';

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

@@ -0,0 +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=TimeInput.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAqhB,CAAC;AAE1iB,eAAO,MAAM,MAAM,cAA8kB,CAAC;AAElmB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/TimeInput/TimeInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Heure\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Heure\" value=\"09:30\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Heure\" value=\"14:00\" hint=\"Heure de début de mission\" />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Erreur\" value=\"25:70\" error=\"Heure invalide (00:00–23:59)\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Succès\" value=\"09:30\" success=\"Enregistré\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Désactivé\" value=\"09:30\" disabled />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const storySources = {
+    Default,
+    States,
+};

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

@@ -0,0 +1,4 @@
+export declare const useStyles: () => {
+    timeInput: {};
+};
+//# sourceMappingURL=TimeInput.styles.d.ts.map

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

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

package/dist/ui/TimeInput/TimeInput.styles.js

@@ -0,0 +1,4 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    timeInput: {},
+}));

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare const TimeInput: React.ForwardRefExoticComponent<{
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & import("@alveole/components").FormControlCaptionProps & import("@alveole/components").FormControlHintProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TimeInput.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.web.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS;;;;;;;;;0CAmBpB,CAAC"}

package/dist/ui/TimeInput/TimeInput.web.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlDateInput, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import React from 'react';
+import { useStyles } from './TimeInput.styles';
+export const TimeInput = React.forwardRef(function TimeInput(props, ref) {
+    const { label, labelRight, hint, disabled, error, success } = props;
+    const styles = useStyles();
+    return (_jsxs(FormControl, { style: styles.timeInput, children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(FormControlDateInput, { ref: ref, ...props, type: "time" }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

package/dist/ui/TimeInput/index.d.ts

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

package/dist/ui/TimeInput/index.d.ts.map

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

package/dist/ui/TimeInput/index.js

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

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

@@ -5,15 +5,16 @@ declare const _default: {
     experimental: false;
     figmaURL: string;
     description: string;
+    shortDescription: string;
     component: typeof Toast;
     styleFn: () => {
         container: {
             backgroundColor: string;
             width: number;
-            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             overflow: "hidden";
             padding: number;
         } | {
@@ -27,20 +28,20 @@ declare const _default: {
             elevation: number;
             backgroundColor: string;
             width: number;
-            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             overflow: "hidden";
             padding: number;
         } | {
             boxShadow: string;
             backgroundColor: string;
             width: number;
-            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             overflow: "hidden";
             padding: number;
         };
@@ -48,8 +49,8 @@ declare const _default: {
             display: "flex";
             flex: number;
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
-            padding: import("@alveole/theme").Spacing;
+            gap: string | number;
+            padding: string | number;
         };
         titleContainer: {
             display: "flex";
@@ -70,10 +71,10 @@ declare const _default: {
             alignSelf: "stretch";
             justifyContent: "flex-start";
             alignItems: "center";
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
         iconBlockDefault: {
             backgroundColor: string;
@@ -101,6 +102,29 @@ declare const _default: {
     };
 };
 export default _default;
+/**
+ * Le fichier `_layout.tsx` doit inclure la balise `<Toasts>` pour fonctionner.
+ *
+ * ```tsx
+ * import { Toasts } from '@alveole/components';
+ * import { ThemeProvider } from '@alveole/theme';
+ * import { Stack } from 'expo-router';
+ * import { TamaguiProvider } from 'tamagui';
+ * import { tamaguiConfig } from '../tamagui.config';
+ *
+ * export default function RootLayout() {
+ *   return (
+ *     <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+ *       <ThemeProvider loader={false}>
+ *         <Toasts>
+ *           <Stack screenOptions={{ headerShown: false }} />
+ *         </Toasts>
+ *       </ThemeProvider>
+ *     </TamaguiProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const All: () => import("react").JSX.Element;
 export declare const PreviewInfo: () => import("react").JSX.Element;
 export declare const PreviewSuccess: () => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3C,wBAQkB;AAElB,eAAO,MAAM,GAAG,mCAwDf,CAAC;AAEF,eAAO,MAAM,WAAW,mCAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAA2E,CAAC;AAEnH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3C,wBASkB;AAElB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,GAAG,mCA+Bf,CAAC;AAEF,eAAO,MAAM,WAAW,mCAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAA2E,CAAC;AAEnH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

package/dist/ui/Toast/Toast.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@alveole/components';
-import { Box, Highlight, Typography } from '../../core';
+import { Box } from '../../core';
 import { Toast, ToastView } from './Toast';
 import { useStyles } from './Toast.styles';
 import { defaultDuration } from './ToastBridge';
@@ -11,10 +11,34 @@ export default {
     tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=2084-1372',
-    description: `Toaster Tamagui. Contient le provider global et le hook useToast. Par défaut un toast reste affiché pendant ${defaultDuration / 1000} secondes`,
+    description: `Toaster Tamagui. Contient le provider global et le hook \`useToast\`. Par défaut un toast reste affiché pendant ${defaultDuration / 1000} secondes`,
+    shortDescription: 'Toaster Tamagui. Fournit le provider global et le hook useToast.',
     component: Toast,
     styleFn: useStyles,
 };
+/**
+ * Le fichier `_layout.tsx` doit inclure la balise `<Toasts>` pour fonctionner.
+ *
+ * ```tsx
+ * import { Toasts } from '@alveole/components';
+ * import { ThemeProvider } from '@alveole/theme';
+ * import { Stack } from 'expo-router';
+ * import { TamaguiProvider } from 'tamagui';
+ * import { tamaguiConfig } from '../tamagui.config';
+ *
+ * export default function RootLayout() {
+ *   return (
+ *     <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+ *       <ThemeProvider loader={false}>
+ *         <Toasts>
+ *           <Stack screenOptions={{ headerShown: false }} />
+ *         </Toasts>
+ *       </ThemeProvider>
+ *     </TamaguiProvider>
+ *   );
+ * }
+ * ```
+ */
 export const All = () => {
     const toast = useToast();
     const defaultToast = () => toast.present('Default', 'Message');
@@ -28,26 +52,7 @@ export const All = () => {
     const withoutMessageToast = () => toast.present('Sans message');
     const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });
     const withCustomIcon = () => toast.present('Avec icon custom', undefined, { icon: 'Worm' });
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Button, { title: "Default toast", variant: "secondary", onPress: defaultToast }), _jsx(Button, { title: "Success toast", variant: "secondary", onPress: successToast }), _jsx(Button, { title: "Error toast", variant: "secondary", onPress: errorToast }), _jsx(Button, { title: "Info toast", variant: "secondary", onPress: infoToast }), _jsx(Button, { title: "Warning toast", variant: "secondary", onPress: warningToast }), _jsx(Button, { title: "Message long", variant: "secondary", onPress: infoToastMultiLine }), _jsx(Button, { title: "Without message toast", variant: "secondary", onPress: withoutMessageToast }), _jsx(Button, { title: "Without message toast error", variant: "secondary", onPress: withoutMessageToastError }), _jsx(Button, { title: "WithCustomIcon", variant: "secondary", onPress: withCustomIcon })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Typography, { children: `Le fichier _layout.tsx doit inclure la balise <Toasts> pour fonctionner` }), _jsx(Highlight, { language: "tsx", children: `
-            import { Toasts } from '@alveole/components';
-            import { ThemeProvider } from '@alveole/theme';
-            import { Stack } from 'expo-router';
-            import React from 'react';
-            import { TamaguiProvider } from 'tamagui';
-            import { tamaguiConfig } from '../tamagui.config';
-
-            export default function RootLayout() {
-              return (
-                <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
-                  <ThemeProvider loader={false}>
-                    <Toasts>
-                      <Stack screenOptions={{ headerShown: false }} />
-                    </Toasts>
-                  </ThemeProvider>
-                </TamaguiProvider>
-              );
-            }
-          ` })] })] }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 8, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Button, { title: "Default toast", variant: "secondary", onPress: defaultToast }), _jsx(Button, { title: "Success toast", variant: "secondary", onPress: successToast }), _jsx(Button, { title: "Error toast", variant: "secondary", onPress: errorToast }), _jsx(Button, { title: "Info toast", variant: "secondary", onPress: infoToast }), _jsx(Button, { title: "Warning toast", variant: "secondary", onPress: warningToast }), _jsx(Button, { title: "Message long", variant: "secondary", onPress: infoToastMultiLine }), _jsx(Button, { title: "Without message toast", variant: "secondary", onPress: withoutMessageToast }), _jsx(Button, { title: "Without message toast error", variant: "secondary", onPress: withoutMessageToastError }), _jsx(Button, { title: "WithCustomIcon", variant: "secondary", onPress: withCustomIcon })] }) }));
 };
 export const PreviewInfo = () => (_jsx(ToastView, { variant: "info", title: "Information", message: "Description additionnelle du toast." }));
 export const PreviewSuccess = () => (_jsx(ToastView, { variant: "success", title: "Succ\u00E8s", message: "Description additionnelle du toast." }));

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

@@ -19,4 +19,5 @@ export declare const storySources: {
     readonly ToastsTypes: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=Toast.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAA+9F,CAAC;AAEh/F,eAAO,MAAM,WAAW,cAAyJ,CAAC;AAElL,eAAO,MAAM,cAAc,cAA0J,CAAC;AAEtL,eAAO,MAAM,YAAY,cAAsJ,CAAC;AAEhL,eAAO,MAAM,cAAc,cAA2J,CAAC;AAEvL,eAAO,MAAM,cAAc,cAA6J,CAAC;AAEzL,eAAO,MAAM,0BAA0B,cAAkI,CAAC;AAE1K,eAAO,MAAM,6BAA6B,cAAgJ,CAAC;AAE3L,eAAO,MAAM,WAAW,cAA0Q,CAAC;AAEnS,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Toast.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAAm8D,CAAC;AAEp9D,eAAO,MAAM,WAAW,cAAyJ,CAAC;AAElL,eAAO,MAAM,cAAc,cAA0J,CAAC;AAEtL,eAAO,MAAM,YAAY,cAAsJ,CAAC;AAEhL,eAAO,MAAM,cAAc,cAA2J,CAAC;AAEvL,eAAO,MAAM,cAAc,cAA6J,CAAC;AAEzL,eAAO,MAAM,0BAA0B,cAAkI,CAAC;AAE1K,eAAO,MAAM,6BAA6B,cAAgJ,CAAC;AAE3L,eAAO,MAAM,WAAW,cAA0Q,CAAC;AAEnS,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Toast/Toast.stories.tsx
-export const All = () => "export const All = () => {\n  const toast = useToast();\n\n  const defaultToast = () => toast.present('Default', 'Message');\n  const successToast = () => toast.present('Success', 'Message', { variant: 'success' });\n  const errorToast = () => toast.present('Error', 'Message beaucoup plus long', { variant: 'error' });\n  const infoToast = () => toast.present('Information', 'Message', { variant: 'info' });\n  const infoToastMultiLine = () =>\n    toast.present('Information', 'Message beaucoup plus long avec retour à la ligne.\\nDeuxième ligne', {\n      variant: 'info',\n    });\n  const warningToast = () => toast.present('Attention', 'Message', { variant: 'warning' });\n  const withoutMessageToast = () => toast.present('Sans message');\n  const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });\n  const withCustomIcon = () => toast.present('Avec icon custom', undefined, { icon: 'Worm' });\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n      <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n        <Button title=\"Default toast\" variant=\"secondary\" onPress={defaultToast} />\n        <Button title=\"Success toast\" variant=\"secondary\" onPress={successToast} />\n        <Button title=\"Error toast\" variant=\"secondary\" onPress={errorToast} />\n        <Button title=\"Info toast\" variant=\"secondary\" onPress={infoToast} />\n        <Button title=\"Warning toast\" variant=\"secondary\" onPress={warningToast} />\n        <Button title=\"Message long\" variant=\"secondary\" onPress={infoToastMultiLine} />\n        <Button title=\"Without message toast\" variant=\"secondary\" onPress={withoutMessageToast} />\n        <Button title=\"Without message toast error\" variant=\"secondary\" onPress={withoutMessageToastError} />\n        <Button title=\"WithCustomIcon\" variant=\"secondary\" onPress={withCustomIcon} />\n      </Box>\n      <Box display=\"flex\" flexDirection=\"column\" gap={4}>\n        <Typography>{`Le fichier _layout.tsx doit inclure la balise <Toasts> pour fonctionner`}</Typography>\n        <Highlight language=\"tsx\">\n          {`\n            import { Toasts } from '@alveole/components';\n            import { ThemeProvider } from '@alveole/theme';\n            import { Stack } from 'expo-router';\n            import React from 'react';\n            import { TamaguiProvider } from 'tamagui';\n            import { tamaguiConfig } from '../tamagui.config';\n\n            export default function RootLayout() {\n              return (\n                <TamaguiProvider config={tamaguiConfig} defaultTheme=\"light\">\n                  <ThemeProvider loader={false}>\n                    <Toasts>\n                      <Stack screenOptions={{ headerShown: false }} />\n                    </Toasts>\n                  </ThemeProvider>\n                </TamaguiProvider>\n              );\n            }\n          `}\n        </Highlight>\n      </Box>\n    </Box>\n  );\n};";
+export const All = () => "export const All = () => {\n  const toast = useToast();\n\n  const defaultToast = () => toast.present('Default', 'Message');\n  const successToast = () => toast.present('Success', 'Message', { variant: 'success' });\n  const errorToast = () => toast.present('Error', 'Message beaucoup plus long', { variant: 'error' });\n  const infoToast = () => toast.present('Information', 'Message', { variant: 'info' });\n  const infoToastMultiLine = () =>\n    toast.present('Information', 'Message beaucoup plus long avec retour à la ligne.\\nDeuxième ligne', {\n      variant: 'info',\n    });\n  const warningToast = () => toast.present('Attention', 'Message', { variant: 'warning' });\n  const withoutMessageToast = () => toast.present('Sans message');\n  const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });\n  const withCustomIcon = () => toast.present('Avec icon custom', undefined, { icon: 'Worm' });\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n      <Box display=\"flex\" flexDirection=\"row\" gap={4} flexWrap=\"wrap\">\n        <Button title=\"Default toast\" variant=\"secondary\" onPress={defaultToast} />\n        <Button title=\"Success toast\" variant=\"secondary\" onPress={successToast} />\n        <Button title=\"Error toast\" variant=\"secondary\" onPress={errorToast} />\n        <Button title=\"Info toast\" variant=\"secondary\" onPress={infoToast} />\n        <Button title=\"Warning toast\" variant=\"secondary\" onPress={warningToast} />\n        <Button title=\"Message long\" variant=\"secondary\" onPress={infoToastMultiLine} />\n        <Button title=\"Without message toast\" variant=\"secondary\" onPress={withoutMessageToast} />\n        <Button title=\"Without message toast error\" variant=\"secondary\" onPress={withoutMessageToastError} />\n        <Button title=\"WithCustomIcon\" variant=\"secondary\" onPress={withCustomIcon} />\n      </Box>\n    </Box>\n  );\n};";
 export const PreviewInfo = () => "export const PreviewInfo = () => (\n  <ToastView variant=\"info\" title=\"Information\" message=\"Description additionnelle du toast.\" />\n);";
 export const PreviewSuccess = () => "export const PreviewSuccess = () => (\n  <ToastView variant=\"success\" title=\"Succès\" message=\"Description additionnelle du toast.\" />\n);";
 export const PreviewError = () => "export const PreviewError = () => (\n  <ToastView variant=\"error\" title=\"Erreur\" message=\"Description additionnelle du toast.\" />\n);";
@@ -20,3 +20,6 @@ export const storySources = {
     PreviewSuccessSansDescription,
     ToastsTypes,
 };
+export const storyDescriptions = {
+    All: "Le fichier `_layout.tsx` doit inclure la balise `<Toasts>` pour fonctionner.\n\n```tsx\nimport { Toasts } from '@alveole/components';\nimport { ThemeProvider } from '@alveole/theme';\nimport { Stack } from 'expo-router';\nimport { TamaguiProvider } from 'tamagui';\nimport { tamaguiConfig } from '../tamagui.config';\n\nexport default function RootLayout() {\n  return (\n    <TamaguiProvider config={tamaguiConfig} defaultTheme=\"light\">\n      <ThemeProvider loader={false}>\n        <Toasts>\n          <Stack screenOptions={{ headerShown: false }} />\n        </Toasts>\n      </ThemeProvider>\n    </TamaguiProvider>\n  );\n}\n```",
+};

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

@@ -2,10 +2,10 @@ export declare const useStyles: () => {
     container: {
         backgroundColor: string;
         width: number;
-        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderRadius: import("@alveole/theme").Radius;
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         overflow: "hidden";
         padding: number;
     } | {
@@ -19,20 +19,20 @@ export declare const useStyles: () => {
         elevation: number;
         backgroundColor: string;
         width: number;
-        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderRadius: import("@alveole/theme").Radius;
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         overflow: "hidden";
         padding: number;
     } | {
         boxShadow: string;
         backgroundColor: string;
         width: number;
-        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderRadius: import("@alveole/theme").Radius;
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         overflow: "hidden";
         padding: number;
     };
@@ -40,8 +40,8 @@ export declare const useStyles: () => {
         display: "flex";
         flex: number;
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
-        padding: import("@alveole/theme").Spacing;
+        gap: string | number;
+        padding: string | number;
     };
     titleContainer: {
         display: "flex";
@@ -62,10 +62,10 @@ export declare const useStyles: () => {
         alignSelf: "stretch";
         justifyContent: "flex-start";
         alignItems: "center";
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
     iconBlockDefault: {
         backgroundColor: string;

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

@@ -3,6 +3,7 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
+    shortDescription: string;
     figmaURL: string;
     component: any;
     styleFn: () => {
@@ -30,6 +31,22 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const ExampleUsage: () => string;
+/**
+ * Exemple d'intégration dans un fichier `_layout.tsx`.
+ *
+ * ```tsx
+ * <ToolbarBottomNav>
+ *   <ToolbarBottomNav.Screen
+ *     name="home"
+ *     options={{ tabBarLabel: 'Home', tabBarIcon: ToolbarBottomNav.Icon('home') }}
+ *   />
+ *   <ToolbarBottomNav.Screen
+ *     name="list"
+ *     options={{ tabBarLabel: 'Liste', tabBarIcon: ToolbarBottomNav.Icon('all-inbox') }}
+ *   />
+ * </ToolbarBottomNav>
+ * ```
+ */
+export declare const ExampleUsage: () => null;
 export * as Sources from './ToolbarBottomNav.stories.sources';
 //# sourceMappingURL=ToolbarBottomNav.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarBottomNav.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBASkB;AASlB,eAAO,MAAM,YAAY,cAAoB,CAAC;AAE9C,OAAO,KAAK,OAAO,MAAM,oCAAoC,CAAC"}
+{"version":3,"file":"ToolbarBottomNav.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,wBAUkB;AAElB;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,YAAa,CAAC;AAEvC,OAAO,KAAK,OAAO,MAAM,oCAAoC,CAAC"}

package/dist/ui/ToolbarBottomNav/ToolbarBottomNav.stories.js

@@ -4,16 +4,27 @@ export default {
     title: 'ToolbarBottomNav',
     tags: ['ui'],
     experimental: false,
-    description: 'Navigation bottom de type TabsExpo. A utiliser dans les _layout.',
+    description: 'Navigation bottom de type TabsExpo. A utiliser dans les `_layout`.',
+    shortDescription: 'Navigation bottom de type TabsExpo. À utiliser dans les layouts de navigation.',
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1880-852&t=baZKFA9BpkeQGeZm-4',
     component: ToolbarBottomNav,
     styleFn: useStyles,
 };
-const codeExample = `<ToolbarBottomNav>
-  // Vers index.tsx
-  <ToolbarBottomNav.Screen name="home" options={{ tabBarLabel: 'Home', tabBarIcon: ToolbarBottomNav.Icon('home') }} />
-  // Vers list.tsx
-  <ToolbarBottomNav.Screen name="list" options={{ tabBarLabel: 'Liste', tabBarIcon: ToolbarBottomNav.Icon('all-inbox') }} />
-</ToolbarBottomNav>`;
-export const ExampleUsage = () => codeExample;
+/**
+ * Exemple d'intégration dans un fichier `_layout.tsx`.
+ *
+ * ```tsx
+ * <ToolbarBottomNav>
+ *   <ToolbarBottomNav.Screen
+ *     name="home"
+ *     options={{ tabBarLabel: 'Home', tabBarIcon: ToolbarBottomNav.Icon('home') }}
+ *   />
+ *   <ToolbarBottomNav.Screen
+ *     name="list"
+ *     options={{ tabBarLabel: 'Liste', tabBarIcon: ToolbarBottomNav.Icon('all-inbox') }}
+ *   />
+ * </ToolbarBottomNav>
+ * ```
+ */
+export const ExampleUsage = () => null;
 export * as Sources from './ToolbarBottomNav.stories.sources';

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

@@ -3,4 +3,5 @@ export declare const storySources: {
     readonly ExampleUsage: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=ToolbarBottomNav.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarBottomNav.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAyD,CAAC;AAEnF,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"ToolbarBottomNav.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarBottomNav/ToolbarBottomNav.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAkD,CAAC;AAE5E,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -1,6 +1,9 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/ToolbarBottomNav/ToolbarBottomNav.stories.tsx
-export const ExampleUsage = () => "export const ExampleUsage = () => codeExample;";
+export const ExampleUsage = () => "export const ExampleUsage = () => null;";
 export const storySources = {
     ExampleUsage,
 };
+export const storyDescriptions = {
+    ExampleUsage: "Exemple d'intégration dans un fichier `_layout.tsx`.\n\n```tsx\n<ToolbarBottomNav>\n  <ToolbarBottomNav.Screen\n    name=\"home\"\n    options={{ tabBarLabel: 'Home', tabBarIcon: ToolbarBottomNav.Icon('home') }}\n  />\n  <ToolbarBottomNav.Screen\n    name=\"list\"\n    options={{ tabBarLabel: 'Liste', tabBarIcon: ToolbarBottomNav.Icon('all-inbox') }}\n  />\n</ToolbarBottomNav>\n```",
+};

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

@@ -12,16 +12,16 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
         compactLargetoolbarContainer: {
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
         };
         largeToolbarContainer: {
             paddingTop: number;
@@ -42,13 +42,13 @@ declare const _default: {
         toolbarNavigation: {
             display: "flex";
             justifyContent: "center";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         toolbarInformation: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             flex: number;
         };
         toolbarInformationTitle: {
@@ -115,6 +115,10 @@ export declare const AvecAvatarSansActions: () => import("react").JSX.Element;
 export declare const AvecAvatarEtActions: () => import("react").JSX.Element;
 export declare const AvecPlusieursActions: () => import("react").JSX.Element;
 export declare const AvecTitreEtSansSousTitre: () => import("react").JSX.Element;
+/**
+ * En règle générale, `withBorder` est appliqué dynamiquement au scroll :
+ * la bordure apparaît quand on a scrollé et disparaît en haut de la page.
+ */
 export declare const AvecBorder: () => import("react").JSX.Element;
 export declare const CompactLarge: () => import("react").JSX.Element;
 export declare const Large: () => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAA4D,CAAC;AAEjF,eAAO,MAAM,iBAAiB,mCAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAOnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mCAahC,CAAC;AAEF,eAAO,MAAM,wBAAwB,mCAYpC,CAAC;AAEF,eAAO,MAAM,UAAU,mCAQtB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,mCAEjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAA4D,CAAC;AAEjF,eAAO,MAAM,iBAAiB,mCAE7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,mCAOnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,mCAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,mCAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mCAahC,CAAC;AAEF,eAAO,MAAM,wBAAwB,mCAYpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,mCAAuE,CAAC;AAE/F,eAAO,MAAM,YAAY,mCAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,mCAEjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.stories.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { router } from 'expo-router';
-import { Typography } from '../../core';
 import { ButtonIcon } from '../Button/ButtonIcon';
 import { ToolbarTop } from './ToolbarTop';
 import { useStyles } from './ToolbarTop.styles';
@@ -21,7 +20,11 @@ export const AvecAvatarSansActions = () => (_jsx(ToolbarTop, { title: "Titre", s
 export const AvecAvatarEtActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }) }));
 export const AvecPlusieursActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', onPress: console.log })] }) }));
 export const AvecTitreEtSansSousTitre = () => (_jsx(ToolbarTop, { title: "Titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', onPress: console.log })] }) }));
-export const AvecBorder = () => (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "En r\u00E8gle g\u00E9n\u00E9ral, on applique la propri\u00E9t\u00E9 `withBorder` sur la ToolbarTop pour ajouter une bordure seulement quand on a scroll dans la page. Si on retourne en haut de la page, la bordure dispara\u00EEt." }), _jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", withBorder: true })] }));
+/**
+ * En règle générale, `withBorder` est appliqué dynamiquement au scroll :
+ * la bordure apparaît quand on a scrollé et disparaît en haut de la page.
+ */
+export const AvecBorder = () => _jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", withBorder: true });
 export const CompactLarge = () => _jsx(ToolbarTop, { title: "Titre compact large", variant: "compactLarge" });
 export const Large = () => (_jsx(ToolbarTop, { title: "Titre large", variant: "large", onNavigate: console.log, sousTitre: "Sous-titre" }));
 export * as Sources from './ToolbarTop.stories.sources';

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

@@ -21,4 +21,5 @@ export declare const storySources: {
     readonly Large: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=ToolbarTop.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgG,CAAC;AAErH,eAAO,MAAM,iBAAiB,cAAmJ,CAAC;AAElL,eAAO,MAAM,uBAAuB,cAAsR,CAAC;AAE3T,eAAO,MAAM,qBAAqB,cAA6K,CAAC;AAEhN,eAAO,MAAM,mBAAmB,cAA8U,CAAC;AAE/W,eAAO,MAAM,oBAAoB,cAAqe,CAAC;AAEvgB,eAAO,MAAM,wBAAwB,cAA2c,CAAC;AAEjf,eAAO,MAAM,UAAU,cAA8X,CAAC;AAEtZ,eAAO,MAAM,YAAY,cAAmH,CAAC;AAE7I,eAAO,MAAM,KAAK,cAAuJ,CAAC;AAE1K,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"ToolbarTop.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAgG,CAAC;AAErH,eAAO,MAAM,iBAAiB,cAAmJ,CAAC;AAElL,eAAO,MAAM,uBAAuB,cAAsR,CAAC;AAE3T,eAAO,MAAM,qBAAqB,cAA6K,CAAC;AAEhN,eAAO,MAAM,mBAAmB,cAA8U,CAAC;AAE/W,eAAO,MAAM,oBAAoB,cAAqe,CAAC;AAEvgB,eAAO,MAAM,wBAAwB,cAA2c,CAAC;AAEjf,eAAO,MAAM,UAAU,cAA8G,CAAC;AAEtI,eAAO,MAAM,YAAY,cAAmH,CAAC;AAE7I,eAAO,MAAM,KAAK,cAAuJ,CAAC;AAE1K,eAAO,MAAM,YAAY;;;;;;;;;;;CAWf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}

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

@@ -7,7 +7,7 @@ export const AvecAvatarSansActions = () => "export const AvecAvatarSansActions =
 export const AvecAvatarEtActions = () => "export const AvecAvatarEtActions = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={console.log}\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={<ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Plus'} onPress={console.log} />}\n  />\n);";
 export const AvecPlusieursActions = () => "export const AvecPlusieursActions = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    sousTitre=\"Sous-titre\"\n    onNavigate={console.log}\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={\n      <>\n        <ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Plus'} onPress={console.log} />\n        <ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Download'} onPress={console.log} />\n      </>\n    }\n  />\n);";
 export const AvecTitreEtSansSousTitre = () => "export const AvecTitreEtSansSousTitre = () => (\n  <ToolbarTop\n    title=\"Titre\"\n    onNavigate={console.log}\n    AvatarProps={{ src: 'https://picsum.photos/100/200' }}\n    actions={\n      <>\n        <ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Plus'} onPress={console.log} />\n        <ButtonIcon variant=\"tertiary\" size=\"lg\" iconSize=\"md\" icon={'Download'} onPress={console.log} />\n      </>\n    }\n  />\n);";
-export const AvecBorder = () => "export const AvecBorder = () => (\n  <>\n    <Typography>\n      En règle général, on applique la propriété `withBorder` sur la ToolbarTop pour ajouter une bordure seulement quand\n      on a scroll dans la page. Si on retourne en haut de la page, la bordure disparaît.\n    </Typography>\n    <ToolbarTop title=\"Titre\" sousTitre=\"Sous-titre\" withBorder />\n  </>\n);";
+export const AvecBorder = () => "export const AvecBorder = () => <ToolbarTop title=\"Titre\" sousTitre=\"Sous-titre\" withBorder />;";
 export const CompactLarge = () => "export const CompactLarge = () => <ToolbarTop title=\"Titre compact large\" variant=\"compactLarge\" />;";
 export const Large = () => "export const Large = () => (\n  <ToolbarTop title=\"Titre large\" variant=\"large\" onNavigate={console.log} sousTitre=\"Sous-titre\" />\n);";
 export const storySources = {
@@ -22,3 +22,6 @@ export const storySources = {
     CompactLarge,
     Large,
 };
+export const storyDescriptions = {
+    AvecBorder: "En règle générale, `withBorder` est appliqué dynamiquement au scroll :\nla bordure apparaît quand on a scrollé et disparaît en haut de la page.",
+};