@alveole/components 2.0.0-alpha.25 → 2.0.0-alpha.28

package/dist/core/Box/Box.js

@@ -35,5 +35,5 @@ export const Box = React.forwardRef(function Box(props, ref) {
         gap: resolveSpacing(gap),
     };
     const correctionFlex = correctionFlexDuWeb(style, viewProps.flex);
-    return (_jsx(StyledView, { ref: ref, render: elementDuTag(tag), style: { ...aplatirStyle(style), ...correctionFlex }, ...radius, ...viewProps, ...definis(margins), ...definis(paddings), ...definis(spacings) }));
+    return (_jsx(StyledView, { ref: ref, render: elementDuTag(tag), style: { ...aplatirStyle(style), ...correctionFlex }, ...definis(radius), ...viewProps, ...definis(margins), ...definis(paddings), ...definis(spacings) }));
 });

package/dist/generated/version.d.ts

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

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.25";
+export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.28";

package/dist/stories/index.d.ts

@@ -32,12 +32,14 @@ export * as CheckboxStory from '../ui/Checkbox/Checkbox.stories';
 export * as CounterStory from '../ui/Counter/Counter.stories';
 export * as DataTableStory from '../ui/DataTable/DataTable.stories';
 export * as DateInputStory from '../ui/DateInput/DateInput.stories';
+export * as DateRangeInputStory from '../ui/DateRangeInput/DateRangeInput.stories';
 export * as DividerStory from '../ui/Divider/Divider.stories';
 export * as DocumentViewerStory from '../ui/DocumentViewer/DocumentViewer.stories';
 export * as DurationInputStory from '../ui/DurationInput/DurationInput.stories';
 export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
 export * as FileDropZoneStory from '../ui/FileDropZone/FileDropZone.stories';
 export * as FilterDateStory from '../ui/FilterDate/FilterDate.stories';
+export * as FilterTimeRangeStory from '../ui/FilterTimeRange/FilterTimeRange.stories';
 export * as FileInputStory from '../ui/FormControl/FileInput.stories';
 export * as FormControlStory from '../ui/FormControl/FormControl.stories';
 export * as NumberInputStory from '../ui/FormControl/NumberInput.stories';
@@ -66,6 +68,7 @@ export * as TagStory from '../ui/Tag/Tag.stories';
 export * as TextareaInputStory from '../ui/TextareaInput/TextareaInput.stories';
 export * as TextInputArrayStory from '../ui/TextInputArray/TextInputArray.stories';
 export * as TimeInputStory from '../ui/TimeInput/TimeInput.stories';
+export * as TimeRangeInputStory from '../ui/TimeRangeInput/TimeRangeInput.stories';
 export * as ToastStory from '../ui/Toast/Toast.stories';
 export * as ToolbarBottomNavStory from '../ui/ToolbarBottomNav/ToolbarBottomNav.stories';
 export * as ToolbarTopStory from '../ui/ToolbarTop/ToolbarTop.stories';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}

package/dist/stories/index.js

@@ -34,12 +34,14 @@ export * as CheckboxStory from '../ui/Checkbox/Checkbox.stories';
 export * as CounterStory from '../ui/Counter/Counter.stories';
 export * as DataTableStory from '../ui/DataTable/DataTable.stories';
 export * as DateInputStory from '../ui/DateInput/DateInput.stories';
+export * as DateRangeInputStory from '../ui/DateRangeInput/DateRangeInput.stories';
 export * as DividerStory from '../ui/Divider/Divider.stories';
 export * as DocumentViewerStory from '../ui/DocumentViewer/DocumentViewer.stories';
 export * as DurationInputStory from '../ui/DurationInput/DurationInput.stories';
 export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
 export * as FileDropZoneStory from '../ui/FileDropZone/FileDropZone.stories';
 export * as FilterDateStory from '../ui/FilterDate/FilterDate.stories';
+export * as FilterTimeRangeStory from '../ui/FilterTimeRange/FilterTimeRange.stories';
 export * as FileInputStory from '../ui/FormControl/FileInput.stories';
 export * as FormControlStory from '../ui/FormControl/FormControl.stories';
 export * as NumberInputStory from '../ui/FormControl/NumberInput.stories';
@@ -68,6 +70,7 @@ export * as TagStory from '../ui/Tag/Tag.stories';
 export * as TextareaInputStory from '../ui/TextareaInput/TextareaInput.stories';
 export * as TextInputArrayStory from '../ui/TextInputArray/TextInputArray.stories';
 export * as TimeInputStory from '../ui/TimeInput/TimeInput.stories';
+export * as TimeRangeInputStory from '../ui/TimeRangeInput/TimeRangeInput.stories';
 export * as ToastStory from '../ui/Toast/Toast.stories';
 export * as ToolbarBottomNavStory from '../ui/ToolbarBottomNav/ToolbarBottomNav.stories';
 export * as ToolbarTopStory from '../ui/ToolbarTop/ToolbarTop.stories';

package/dist/ui/DateRangeInput/Calendrier.d.ts

@@ -0,0 +1,19 @@
+import type { Locale } from 'date-fns/locale';
+import React from 'react';
+import { PlageEnCours } from './plage';
+type MotsDuCalendrier = {
+    locale: Locale;
+    precedent: string;
+    suivant: string;
+    mois: string;
+    annee: string;
+};
+type CalendrierProps = {
+    plage: PlageEnCours;
+    onChange: (plage: PlageEnCours) => void;
+    mots: MotsDuCalendrier;
+};
+/** Un mois navigable, semaine du lundi, où l'on pose les deux bornes d'une plage. */
+export declare const Calendrier: ({ plage, onChange, mots }: CalendrierProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Calendrier.d.ts.map

package/dist/ui/DateRangeInput/Calendrier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendrier.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/Calendrier.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAA2E,YAAY,EAAE,MAAM,SAAS,CAAC;AAEhH,KAAK,gBAAgB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5G,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,IAAI,EAAE,gBAAgB,CAAC;CACxB,CAAC;AAgIF,qFAAqF;AACrF,eAAO,MAAM,UAAU,GAAI,2BAA2B,eAAe,sBA4BpE,CAAC"}

package/dist/ui/DateRangeInput/Calendrier.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Pressable } from 'react-native';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { ActionMenu } from '../ActionMenu';
+import { ButtonIcon } from '../Button';
+import { useStyles } from './Calendrier.styles';
+import { choisirJour, formeDuJour, joursDuMois, optionsDesAnnees, optionsDesMois } from './plage';
+const CaseJour = ({ jour, colonne, plage, onChange, }) => {
+    const styles = useStyles();
+    const forme = formeDuJour(jour, colonne, plage);
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected: forme.dansPlage }, onPress: () => onChange(choisirJour(plage, jour)), children: _jsx(Box, { tag: "date-range-input-case-jour", style: [
+                styles.jour,
+                forme.dansPlage && styles.jourDansPlage,
+                forme.debut && styles.jourDebut,
+                forme.fin && styles.jourFin,
+            ], children: _jsx(Typography, { tag: "date-range-input-jour", style: [styles.texteJour, forme.dansPlage && styles.texteJourDansPlage], children: jour.getDate() }) }) }));
+};
+// Le mois ou l'année s'affiche en texte ; un clic ouvre la liste des valeurs dans un popover.
+const ChoixDansMenu = ({ nom, options, valeur, onChoix, }) => {
+    const styles = useStyles();
+    const [open, setOpen] = React.useState(false);
+    const libelle = options.find(option => option.value === valeur)?.label;
+    return (_jsx(ActionMenu, { placement: "bottom", open: open, setOpen: setOpen, renderTrigger: () => (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `${nom} : ${libelle}`, onPress: () => setOpen(!open), children: _jsx(Typography, { tag: "date-range-input-titre-mois", style: styles.titreMois, children: libelle }) })), children: options.map(option => (_jsx(ActionMenu.Item, { title: option.label, selected: option.value === valeur, onPress: () => {
+                onChoix(option.value);
+                setOpen(false);
+            } }, option.value))) }));
+};
+// Flèches pour le mois voisin, et deux listes pour sauter directement à un mois ou une année.
+const EnteteCalendrier = ({ mois, onMois, mots, }) => {
+    const styles = useStyles();
+    const aller = (annee, numero) => onMois(new Date(annee, numero, 1));
+    return (_jsxs(Box, { tag: "date-range-input-entete", style: styles.entete, children: [_jsx(ButtonIcon, { icon: "ChevronLeft", variant: "tertiary", size: "sm", accessibilityLabel: mots.precedent, onPress: () => aller(mois.getFullYear(), mois.getMonth() - 1) }), _jsxs(Box, { tag: "date-range-input-choix-mois", style: styles.choixMois, children: [_jsx(ChoixDansMenu, { nom: mots.mois, options: optionsDesMois(mots.locale), valeur: String(mois.getMonth()), onChoix: numero => aller(mois.getFullYear(), Number(numero)) }), _jsx(ChoixDansMenu, { nom: mots.annee, options: optionsDesAnnees(mois.getFullYear()), valeur: String(mois.getFullYear()), onChoix: annee => aller(Number(annee), mois.getMonth()) })] }), _jsx(ButtonIcon, { icon: "ChevronRight", variant: "tertiary", size: "sm", accessibilityLabel: mots.suivant, onPress: () => aller(mois.getFullYear(), mois.getMonth() + 1) })] }));
+};
+/** Un mois navigable, semaine du lundi, où l'on pose les deux bornes d'une plage. */
+export const Calendrier = ({ plage, onChange, mots }) => {
+    const styles = useStyles();
+    const [mois, setMois] = React.useState(() => {
+        const reference = plage.debut ?? new Date();
+        return new Date(reference.getFullYear(), reference.getMonth(), 1);
+    });
+    return (_jsxs(React.Fragment, { children: [_jsx(EnteteCalendrier, { mois: mois, onMois: setMois, mots: mots }), _jsx(Box, { tag: "date-range-input-grille", style: styles.grille, children: joursDuMois(mois.getFullYear(), mois.getMonth()).map((numero, index) => numero === null ? (_jsx(Box, { tag: "date-range-input-case-vide", style: styles.jour }, `vide-${index}`)) : (_jsx(CaseJour, { jour: new Date(mois.getFullYear(), mois.getMonth(), numero), colonne: index % 7, plage: plage, onChange: onChange }, numero))) })] }));
+};

package/dist/ui/DateRangeInput/Calendrier.styles.d.ts

@@ -0,0 +1,54 @@
+export declare const useStyles: () => {
+    entete: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+    };
+    choixMois: {
+        flexDirection: "row";
+        gap: string | number;
+    };
+    titreMois: {
+        color: import("@alveole/theme").ThemeColor;
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    grille: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        rowGap: string | number;
+        width: number;
+    };
+    jour: {
+        width: import("@alveole/theme").Spacing;
+        height: import("@alveole/theme").Spacing;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    jourDansPlage: {
+        backgroundColor: import("@alveole/theme").ThemeColor;
+    };
+    jourDebut: {
+        borderTopLeftRadius: import("@alveole/theme").Radius;
+        borderBottomLeftRadius: import("@alveole/theme").Radius;
+    };
+    jourFin: {
+        borderTopRightRadius: import("@alveole/theme").Radius;
+        borderBottomRightRadius: import("@alveole/theme").Radius;
+    };
+    texteJour: {
+        color: import("@alveole/theme").ThemeColor;
+        fontSize: 16;
+        lineHeight: 24;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    texteJourDansPlage: {
+        color: import("@alveole/theme").ThemeColor;
+    };
+};
+//# sourceMappingURL=Calendrier.styles.d.ts.map

package/dist/ui/DateRangeInput/Calendrier.styles.d.ts.map

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

package/dist/ui/DateRangeInput/Calendrier.styles.js

@@ -0,0 +1,46 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ spacing, spacingValue, color, text, radius }) => ({
+    entete: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    choixMois: {
+        flexDirection: 'row',
+        gap: spacing('1W'),
+    },
+    titreMois: {
+        ...text['Corps de texte'].MD.Medium,
+        color: color.light.text['title-grey'],
+    },
+    grille: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        rowGap: spacing('1V'),
+        width: spacingValue('5W') * 7,
+    },
+    jour: {
+        width: spacingValue('5W'),
+        height: spacingValue('5W'),
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    jourDansPlage: {
+        backgroundColor: color.light.background['action-high-primary'],
+    },
+    jourDebut: {
+        borderTopLeftRadius: radius('full'),
+        borderBottomLeftRadius: radius('full'),
+    },
+    jourFin: {
+        borderTopRightRadius: radius('full'),
+        borderBottomRightRadius: radius('full'),
+    },
+    texteJour: {
+        ...text['Corps de texte'].MD.Regular,
+        color: color.light.text['default-grey'],
+    },
+    texteJourDansPlage: {
+        color: color.light.text['inverted-primary'],
+    },
+}));

package/dist/ui/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+/** Deux jours, bornes comprises, sans heure. */
+export type PlageDeDates = {
+    debut: Date;
+    fin: Date;
+};
+export type DateRangeInputProps = {
+    title?: string;
+    value?: PlageDeDates;
+    local?: 'fr' | 'en';
+    onApply: (plage: PlageDeDates) => void;
+    /** Affiche le bouton « Retour » quand il est fourni. */
+    onCancel?: () => void;
+};
+export declare const libellesDuCalendrier: (local: "fr" | "en") => {
+    retour: string;
+    appliquer: string;
+    precedent: string;
+    suivant: string;
+    mois: string;
+    annee: string;
+    locale: import("date-fns").Locale;
+};
+/** Choix d'une plage de dates au calendrier, sans heure. TimeRangeInput y ajoute les heures et l'UTC. */
+export declare const DateRangeInput: (props: DateRangeInputProps) => React.JSX.Element;
+//# sourceMappingURL=DateRangeInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,gDAAgD;AAChD,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,IAAI,GAAG,IAAI;;;;;;;;CAmBhD,CAAC;AAER,yGAAyG;AACzG,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA4BxD,CAAC"}

package/dist/ui/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { enUS } from 'date-fns/locale/en-US';
+import { fr } from 'date-fns/locale/fr';
+import React from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
+import { Calendrier } from './Calendrier';
+import { useStyles } from './DateRangeInput.styles';
+export const libellesDuCalendrier = (local) => local === 'fr'
+    ? {
+        retour: 'Retour',
+        appliquer: 'Appliquer',
+        precedent: 'Mois précédent',
+        suivant: 'Mois suivant',
+        mois: 'Mois',
+        annee: 'Année',
+        locale: fr,
+    }
+    : {
+        retour: 'Back',
+        appliquer: 'Apply',
+        precedent: 'Previous month',
+        suivant: 'Next month',
+        mois: 'Month',
+        annee: 'Year',
+        locale: enUS,
+    };
+/** Choix d'une plage de dates au calendrier, sans heure. TimeRangeInput y ajoute les heures et l'UTC. */
+export const DateRangeInput = (props) => {
+    const { title, value, local = 'fr', onApply, onCancel } = props;
+    const styles = useStyles();
+    const mots = libellesDuCalendrier(local);
+    const [plage, setPlage] = React.useState({ debut: value?.debut, fin: value?.fin });
+    return (_jsxs(Box, { tag: "date-range-input-container", style: styles.container, children: [title && (_jsx(Typography, { tag: "date-range-input-titre", style: styles.titre, children: title })), _jsx(Calendrier, { plage: plage, onChange: setPlage, mots: mots }), _jsxs(Box, { tag: "date-range-input-actions", style: styles.actions, children: [onCancel && _jsx(Button, { title: mots.retour, variant: "tertiary", size: "sm", leading: "ArrowLeft", onPress: onCancel }), _jsx(Button, { title: mots.appliquer, variant: "primary", size: "sm", disabled: !plage.debut, onPress: () => plage.debut && onApply({ debut: plage.debut, fin: plage.fin ?? plage.debut }) })] })] }));
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: true;
+    description: string;
+    component: (props: import("./DateRangeInput").DateRangeInputProps) => React.JSX.Element;
+    styleFn: () => {
+        container: {
+            display: "flex";
+            flexDirection: "column";
+            gap: string | number;
+            padding: string | number;
+        };
+        titre: {
+            color: import("@alveole/theme").ThemeColor;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        actions: {
+            flexDirection: "row";
+            justifyContent: "flex-end";
+            gap: string | number;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const EnAnglaisSansValeur: () => React.JSX.Element;
+export * as Sources from './DateRangeInput.stories.sources';
+//# sourceMappingURL=DateRangeInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/DateRangeInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBASnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,yBAI/B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}

package/dist/ui/DateRangeInput/DateRangeInput.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns/format';
+import React from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { DateRangeInput } from './DateRangeInput';
+import { useStyles } from './DateRangeInput.styles';
+export default {
+    title: 'DateRangeInput',
+    tags: ['ui'],
+    experimental: true,
+    description: "Choix d'une plage de dates au calendrier, sans heure. Le mois et l'année se changent par les flèches ou en cliquant dessus. TimeRangeInput y ajoute les heures et l'UTC.",
+    component: DateRangeInput,
+    styleFn: useStyles,
+};
+export const Default = () => {
+    const [value, setValue] = React.useState({ debut: new Date(2026, 9, 14), fin: new Date(2026, 9, 22) });
+    return (_jsxs(Box, { gap: "1W", children: [_jsx(DateRangeInput, { value: value, onApply: setValue, onCancel: () => undefined }), _jsx(Typography, { children: `${format(value.debut, 'dd/MM/yyyy')} – ${format(value.fin, 'dd/MM/yyyy')}` })] }));
+};
+export const EnAnglaisSansValeur = () => {
+    const [value, setValue] = React.useState();
+    return _jsx(DateRangeInput, { title: "Date range", local: "en", value: value, onApply: setValue });
+};
+export * as Sources from './DateRangeInput.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/DateRangeInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAga,CAAC;AAErb,eAAO,MAAM,mBAAmB,cAAyN,CAAC;AAE1P,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/DateRangeInput/DateRangeInput.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = React.useState<PlageDeDates>({ debut: new Date(2026, 9, 14), fin: new Date(2026, 9, 22) });\n\n  return (\n    <Box gap=\"1W\">\n      <DateRangeInput value={value} onApply={setValue} onCancel={() => undefined} />\n      <Typography>{`${format(value.debut, 'dd/MM/yyyy')} – ${format(value.fin, 'dd/MM/yyyy')}`}</Typography>\n    </Box>\n  );\n};";
+export const EnAnglaisSansValeur = () => "export const EnAnglaisSansValeur = () => {\n  const [value, setValue] = React.useState<PlageDeDates>();\n\n  return <DateRangeInput title=\"Date range\" local=\"en\" value={value} onApply={setValue} />;\n};";
+export const storySources = {
+    Default,
+    EnAnglaisSansValeur,
+};

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

@@ -0,0 +1,22 @@
+export declare const useStyles: () => {
+    container: {
+        display: "flex";
+        flexDirection: "column";
+        gap: string | number;
+        padding: string | number;
+    };
+    titre: {
+        color: import("@alveole/theme").ThemeColor;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    actions: {
+        flexDirection: "row";
+        justifyContent: "flex-end";
+        gap: string | number;
+    };
+};
+//# sourceMappingURL=DateRangeInput.styles.d.ts.map

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

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

package/dist/ui/DateRangeInput/DateRangeInput.styles.js

@@ -0,0 +1,18 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ spacing, color, text }) => ({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('2W'),
+        padding: spacing('2W'),
+    },
+    titre: {
+        ...text['Corps de texte'].SM.Medium,
+        color: color.light.text['title-grey'],
+    },
+    actions: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        gap: spacing('1W'),
+    },
+}));

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

@@ -0,0 +1,4 @@
+export * from './DateRangeInput';
+export { dureeRelative, libelleDePlage } from './plage';
+export type { DureeRelative, PlageDeTemps } from './plage';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/ui/DateRangeInput/index.js

@@ -0,0 +1,2 @@
+export * from './DateRangeInput';
+export { dureeRelative, libelleDePlage } from './plage';

package/dist/ui/DateRangeInput/plage.d.ts

@@ -0,0 +1,39 @@
+import type { Locale } from 'date-fns/locale';
+/** Une durée qui remonte depuis maintenant : un nombre suivi de h (heures), d (jours) ou w (semaines). */
+export type DureeRelative = `${number}${'h' | 'd' | 'w'}`;
+export type PlageDeTemps = {
+    type: 'relative';
+    duree: DureeRelative;
+} | {
+    type: 'absolue';
+    debut: Date;
+    fin: Date;
+    utc: boolean;
+};
+export type PlageEnCours = {
+    debut?: Date;
+    fin?: Date;
+};
+/** Les douze mois dans la langue du calendrier, la valeur étant le numéro de mois JavaScript (0 à 11). */
+export declare const optionsDesMois: (locale: Locale) => {
+    value: string;
+    label: string;
+}[];
+export declare const optionsDesAnnees: (annee: number) => {
+    value: string;
+    label: string;
+}[];
+/** Les jours du mois, précédés d'une case vide par jour de semaine avant le 1er (semaine du lundi). */
+export declare const joursDuMois: (annee: number, mois: number) => (number | null)[];
+export declare const choisirJour: (plage: PlageEnCours, jour: Date) => PlageEnCours;
+/** Place d'une case du calendrier dans la plage : la pastille s'arrondit aux bornes et aux bords de semaine. */
+export declare const formeDuJour: (jour: Date, colonne: number, plage: PlageEnCours) => {
+    dansPlage: boolean;
+    debut: boolean;
+    fin: boolean;
+};
+/** Le jour choisi au calendrier, à l'heure saisie `HH:MM`, lue en UTC ou en heure locale. */
+export declare const composerDate: (jour: Date, heure: string, utc: boolean) => Date;
+export declare const dureeRelative: (saisie: string) => DureeRelative | undefined;
+export declare const libelleDePlage: (plage: PlageDeTemps, local?: "fr" | "en") => string;
+//# sourceMappingURL=plage.d.ts.map

package/dist/ui/DateRangeInput/plage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plage.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/plage.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAI9C,0GAA0G;AAC1G,MAAM,MAAM,aAAa,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC;AAE1D,MAAM,MAAM,YAAY,GACtB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzG,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,IAAI,CAAC;IAAC,GAAG,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExD,0GAA0G;AAC1G,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM;;;GAIzC,CAAC;AAGL,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM;;;GAC4D,CAAC;AAE3G,uGAAuG;AACvG,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,EAAE,MAAM,MAAM,KAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAKxE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,YAAY,EAAE,MAAM,IAAI,KAAG,YAG7D,CAAC;AAIF,gHAAgH;AAChH,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,EAAE,SAAS,MAAM,EAAE,OAAO,YAAY;;;;CAQ3E,CAAC;AAEF,6FAA6F;AAC7F,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,EAAE,OAAO,MAAM,EAAE,KAAK,OAAO,KAAG,IAKtE,CAAC;AAIF,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,KAAG,aAAa,GAAG,SAG9D,CAAC;AAcF,eAAO,MAAM,cAAc,GAAI,OAAO,YAAY,EAAE,QAAO,IAAI,GAAG,IAAW,KAAG,MAGe,CAAC"}

package/dist/ui/DateRangeInput/plage.js

@@ -0,0 +1,55 @@
+import { format } from 'date-fns/format';
+import { enUS } from 'date-fns/locale/en-US';
+import { fr } from 'date-fns/locale/fr';
+/** Les douze mois dans la langue du calendrier, la valeur étant le numéro de mois JavaScript (0 à 11). */
+export const optionsDesMois = (locale) => Array.from({ length: 12 }, (_, numero) => {
+    const nom = format(new Date(2026, numero, 1), 'MMMM', { locale });
+    return { value: String(numero), label: nom.charAt(0).toUpperCase() + nom.slice(1) };
+});
+// shortcut: fenêtre glissante de dix ans de part et d'autre, à ouvrir en props si un usage demande des bornes.
+export const optionsDesAnnees = (annee) => Array.from({ length: 21 }, (_, i) => ({ value: String(annee - 10 + i), label: String(annee - 10 + i) }));
+/** Les jours du mois, précédés d'une case vide par jour de semaine avant le 1er (semaine du lundi). */
+export const joursDuMois = (annee, mois) => {
+    const decalage = (new Date(annee, mois, 1).getDay() + 6) % 7;
+    const nombre = new Date(annee, mois + 1, 0).getDate();
+    return [...Array(decalage).fill(null), ...Array.from({ length: nombre }, (_, i) => i + 1)];
+};
+export const choisirJour = (plage, jour) => {
+    if (!plage.debut || plage.fin)
+        return { debut: jour };
+    return jour < plage.debut ? { debut: jour, fin: plage.debut } : { debut: plage.debut, fin: jour };
+};
+const memeJour = (a, b) => !!a && !!b && a.toDateString() === b.toDateString();
+/** Place d'une case du calendrier dans la plage : la pastille s'arrondit aux bornes et aux bords de semaine. */
+export const formeDuJour = (jour, colonne, plage) => {
+    const fin = plage.fin ?? plage.debut;
+    const dansPlage = !!plage.debut && !!fin && jour >= plage.debut && jour <= fin;
+    return {
+        dansPlage,
+        debut: dansPlage && (memeJour(jour, plage.debut) || colonne === 0),
+        fin: dansPlage && (memeJour(jour, fin) || colonne === 6),
+    };
+};
+/** Le jour choisi au calendrier, à l'heure saisie `HH:MM`, lue en UTC ou en heure locale. */
+export const composerDate = (jour, heure, utc) => {
+    const [h = 0, m = 0] = heure.split(':').map(Number);
+    return utc
+        ? new Date(Date.UTC(jour.getFullYear(), jour.getMonth(), jour.getDate(), h, m))
+        : new Date(jour.getFullYear(), jour.getMonth(), jour.getDate(), h, m);
+};
+const estDureeRelative = (texte) => /^[1-9]\d*[hdw]$/.test(texte);
+export const dureeRelative = (saisie) => {
+    const duree = saisie.trim().toLowerCase();
+    return estDureeRelative(duree) ? duree : undefined;
+};
+// date-fns formate en heure locale : on recopie les champs UTC dans une date locale.
+const enUTC = (date) => new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes());
+const formatDate = (date, utc, local) => {
+    const texte = local === 'en'
+        ? format(utc ? enUTC(date) : date, 'MMM d, h:mm a', { locale: enUS })
+        : format(utc ? enUTC(date) : date, 'd MMM HH:mm', { locale: fr });
+    return utc ? `${texte} UTC` : texte;
+};
+export const libelleDePlage = (plage, local = 'fr') => plage.type === 'relative'
+    ? plage.duree.toUpperCase()
+    : `${formatDate(plage.debut, plage.utc, local)}–${formatDate(plage.fin, plage.utc, local)}`;

package/dist/ui/FilterTimeRange/FilterTimeRange.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FilterTimeRangeProps } from './FilterTimeRange.shared';
+export type { FilterTimeRangeProps } from './FilterTimeRange.shared';
+/** Sur mobile, le choix s'ouvre en BottomSheet plutôt qu'en Popover, comme Select et FilterDate. */
+export declare const FilterTimeRange: (props: FilterTimeRangeProps) => React.JSX.Element;
+//# sourceMappingURL=FilterTimeRange.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTimeRange.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterTimeRange/FilterTimeRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,oBAAoB,EAAsB,MAAM,0BAA0B,CAAC;AAEpF,YAAY,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAErE,oGAAoG;AACpG,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAW1D,CAAC"}

package/dist/ui/FilterTimeRange/FilterTimeRange.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { BottomSheet } from '../BottomSheet';
+import { useFilterTimeRange } from './FilterTimeRange.shared';
+/** Sur mobile, le choix s'ouvre en BottomSheet plutôt qu'en Popover, comme Select et FilterDate. */
+export const FilterTimeRange = (props) => {
+    const { open, changerOuverture, declencheur, contenu } = useFilterTimeRange(props);
+    return (_jsxs(React.Fragment, { children: [declencheur, _jsx(BottomSheet, { fitContent: true, title: props.title, open: open, setOpen: changerOuverture, children: contenu() })] }));
+};

package/dist/ui/FilterTimeRange/FilterTimeRange.shared.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PlageDeTemps } from '../DateRangeInput';
+export type FilterTimeRangeProps = {
+    title: string;
+    local?: 'fr' | 'en';
+    value?: PlageDeTemps;
+    onChange: (plage: PlageDeTemps) => void;
+};
+type ListeDesPlagesProps = Pick<FilterTimeRangeProps, 'value'> & {
+    /** Absent dans un BottomSheet, qui porte déjà le titre. */
+    title?: string;
+    local: 'fr' | 'en';
+    onChoisir: (plage: PlageDeTemps) => void;
+    onAbsolue: () => void;
+};
+export declare const ListeDesPlages: ({ title, local, value, onChoisir, onAbsolue }: ListeDesPlagesProps) => React.JSX.Element;
+export declare const useFilterTimeRange: ({ value, local, title, onChange }: FilterTimeRangeProps) => {
+    open: boolean;
+    changerOuverture: (ouvert: boolean) => void;
+    declencheur: React.JSX.Element;
+    contenu: (titre?: string) => React.JSX.Element;
+};
+export {};
+//# sourceMappingURL=FilterTimeRange.shared.d.ts.map

package/dist/ui/FilterTimeRange/FilterTimeRange.shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTimeRange.shared.d.ts","sourceRoot":"","sources":["../../../src/ui/FilterTimeRange/FilterTimeRange.shared.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAgD,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CACzC,CAAC;AA0BF,KAAK,mBAAmB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC,GAAG;IAC/D,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,+CAA+C,mBAAmB,sBAsDhG,CAAC;AAGF,eAAO,MAAM,kBAAkB,GAAI,mCAA0C,oBAAoB;;+BAI7D,OAAO;;sBAuBhB,MAAM;CAoBhC,CAAC"}