@alveole/components 1.9.0 → 2.0.0-alpha

package/dist/ui/Select/Select.styles.js

@@ -1,57 +1,77 @@
-import { makeStyles } from '@alveole/theme';
-import { Platform } from 'react-native';
-export const useStyles = makeStyles(({ text, color, spacing }) => ({
+import { focusBorder, makeStyles } from '@alveole/theme';
+/** Le champ fermé : sa boîte, et ce qui la marque selon l'état. */
+const champ = ({ color, spacing, control, radius }) => ({
     pickerContainer: {},
-    picker: {
-        flex: 1,
-        outline: 'none',
-        padding: 0,
-        paddingTop: spacing('050'),
-        paddingBottom: spacing('050'),
-        paddingLeft: spacing('100'),
-        paddingRight: spacing('100'),
-        color: color.text['default-grey'],
-        ...text['Corps de texte'].MD.Regular,
-        width: '100%',
-        borderWidth: 0,
-        backgroundColor: 'transparent',
-        appearance: 'none',
-    },
     inputContainer: {
         width: '100%',
-        padding: 0,
     },
     inputInner: {
         display: 'flex',
         flexDirection: 'row',
-        gap: spacing('050'),
-        padding: 0,
-        borderRadius: 8,
-        borderWidth: Platform.OS === 'ios' ? 0 : 1,
-        borderColor: Platform.OS === 'ios' ? undefined : color.border['default-grey'],
-        backgroundColor: '#FFFFFF',
-        overflow: 'hidden',
+        alignItems: 'center',
+        gap: spacing('1W'),
+        // Meme creux horizontal que le bouton md (`control('md').paddingInline`), comme
+        // TextInput : le champ et le bouton accoles se creusent pareil.
+        paddingLeft: control('md').paddingInline,
+        paddingRight: control('md').paddingInline,
+        // Meme hauteur que le bouton md (`control('md').height`), comme TextInput.
+        minHeight: control('md').height,
+        borderRadius: radius('md'),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color.light.border['default-grey'],
+        backgroundColor: color.light.background['default-grey'],
         width: '100%',
     },
     inputError: {
-        borderColor: color.border['plain-error'],
+        borderColor: color.light.border['plain-error'],
     },
     inputSuccess: {
-        borderColor: color.border['plain-success'],
+        borderColor: color.light.border['plain-success'],
     },
     inputDisabled: {
-        borderColor: color.border['disabled-grey'],
+        borderColor: color.light.border['disabled-grey'],
+    },
+    /** Web uniquement : `cursor` n'appartient pas aux styles React Native. */
+    inputCursor: {
+        cursor: 'pointer',
+    },
+    inputCursorDisabled: {
+        cursor: 'not-allowed',
+    },
+    /**
+     * Le selecteur actif ne recoit pas d'anneau : c'est sa propre bordure qui change de
+     * couleur, selon la definition commune du theme (ADR 0012). Web et natif la partagent,
+     * et react-select n'en pose aucune autre par-dessus.
+     */
+    inputFocused: focusBorder(),
+});
+/** Ce que le champ fermé affiche : une valeur en mono, une trame de puces en multi. */
+const contenuDuChamp = ({ text, color, spacing }) => ({
+    value: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['default-grey'],
+        flex: 1,
+    },
+    valuePlaceholder: {
+        color: color.light.text['mention-grey'],
+    },
+    valueDisabled: {
+        color: color.light.text['disabled-grey'],
     },
-    inputFocused: {
-        outlineStyle: 'solid',
-        outlineWidth: 2,
-        outlineColor: color.system.focus,
-        outlineOffset: 2,
+    /** Les puces repassent à la ligne : le champ s'aligne en haut et respire verticalement. */
+    inputInnerMultiple: {
+        alignItems: 'flex-start',
+        paddingTop: spacing('1V'),
+        paddingBottom: spacing('1V'),
     },
-    indicator: {
-        position: 'absolute',
-        right: spacing('100'),
-        top: spacing('075'),
+    tagList: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: spacing('1V'),
     },
-    indicatorFocus: {},
-}));
+});
+export const useStyles = makeStyles(theme => ({ ...champ(theme), ...contenuDuChamp(theme) }));

package/dist/ui/Select/Select.types.d.ts

@@ -0,0 +1,84 @@
+import type { NativeSyntheticEvent, TargetedEvent } from 'react-native';
+import type { FormControlCaptionProps } from '../FormControl';
+import type { Leading } from '../Leading';
+export type SelectOption = {
+    value: string;
+    label: string;
+    /** Icône affichée à gauche du libellé, dans le panneau et dans le champ fermé. */
+    leading?: Leading;
+    /** Les options consécutives partageant le même `group` sont regroupées sous un en-tête. */
+    group?: string;
+    disabled?: boolean;
+};
+/**
+ * Handle exposé par `ref`, identique sur web et natif.
+ * `focus`/`blur` sont des alias d'`open`/`close` : ouvrir le panneau est l'équivalent
+ * de la prise de focus sur un `<select>`.
+ */
+export type SelectRef = {
+    focus: () => void;
+    blur: () => void;
+    open: () => void;
+    close: () => void;
+};
+type SelectSharedProps = FormControlCaptionProps & {
+    options: SelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    /** Titre du bottom sheet sur mobile. Par défaut : l'étiquette du `FormControl`. */
+    sheetTitle?: string;
+    /** Ajoute une entrée permettant de revenir à une sélection vide. */
+    clearable?: boolean;
+    /** Ajoute un champ de recherche au panneau. Par défaut : false. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /**
+     * Saisie de recherche, émise après stabilisation (300 ms) et jamais au montage.
+     * Combiner avec `localFilter={false}` pour une recherche distante.
+     */
+    onSearchChange?: (query: string) => void;
+    /**
+     * Filtre les options sur leur libellé. Par défaut : true.
+     * Mettre à false quand `options` est déjà le résultat d'une recherche distante.
+     */
+    localFilter?: boolean;
+    /** Signale une recherche en cours à la place du message de liste vide. */
+    loading?: boolean;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    /** Propose de créer une option à partir de la saisie. Implique `searchable`. */
+    creatable?: boolean;
+    /**
+     * Reçoit la saisie débarrassée de ses espaces. `Select` restant strictement
+     * contrôlé, c'est à l'appelant d'ajouter l'option à `options` puis de mettre
+     * `value` à jour : la nouvelle valeur n'apparaît qu'au rendu suivant.
+     */
+    onCreateOption?: (query: string) => void;
+    createLabel?: (query: string) => string;
+    /**
+     * Le paramètre est absent sur natif : l'ouverture du panneau n'émet pas
+     * d'événement natif de focus.
+     */
+    onFocus?: (event?: NativeSyntheticEvent<TargetedEvent>) => void;
+    onBlur?: (event?: NativeSyntheticEvent<TargetedEvent>) => void;
+};
+export type SelectSingleValueProps = SelectSharedProps & {
+    multiple?: false;
+    value: string | null;
+    onChange?: (value: string | null) => void;
+};
+export type SelectMultiValueProps = SelectSharedProps & {
+    multiple: true;
+    value: string[];
+    onChange?: (value: string[]) => void;
+};
+/**
+ * Union discriminée par `multiple` plutôt que composant générique : `forwardRef`
+ * ne préserve pas les génériques sans cast, et `multiple` omis inférerait
+ * `boolean` au lieu de `false`. Conséquence côté implémentation : ne jamais
+ * déstructurer `multiple`/`value`/`onChange`, le narrowing ne joue que sur
+ * l'objet `props` entier.
+ */
+export type SelectProps = SelectSingleValueProps | SelectMultiValueProps;
+export {};
+//# sourceMappingURL=Select.types.d.ts.map

package/dist/ui/Select/Select.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAEF,KAAK,iBAAiB,GAAG,uBAAuB,GAAG;IACjD,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAExC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAChE,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,GAAG;IACvD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,GAAG;IACtD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,sBAAsB,GAAG,qBAAqB,CAAC"}

package/dist/ui/Select/Select.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SelectProps, SelectRef } from './Select.types';
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectRef>>;
+//# sourceMappingURL=Select.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,WAAW,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3E,eAAO,MAAM,MAAM,+EAuBjB,CAAC"}

package/dist/ui/Select/Select.web.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactSelect from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import { Box } from '../../core/Box';
+import { useFieldId } from '../FormControl/FieldId';
+import { useStyles as useSelectStyles } from './Select.styles';
+import { useSelectWebField } from './useSelectWebField';
+export const Select = React.forwardRef(function Select(props, ref) {
+    const { creatable, onCreateOption } = props;
+    const selectStyles = useSelectStyles();
+    const { fieldProps, instanceRef, createLabel } = useSelectWebField(props, ref, selectStyles);
+    // L'id vient du FormControl, dont l'étiquette désigne ainsi le champ (ADR 0026).
+    const champ = { ...fieldProps, inputId: useFieldId() };
+    return (_jsx(Box, { tag: "form-control-select-input", style: selectStyles.inputContainer, children: creatable ? (_jsx(CreatableSelect, { ...champ, ref: instanceRef, onCreateOption: query => onCreateOption?.(query.trim()), formatCreateLabel: query => createLabel(query.trim()), createOptionPosition: "first" })) : (_jsx(ReactSelect, { ...champ, ref: instanceRef })) }));
+});

package/dist/ui/Select/SelectBottomSheet.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type SelectPanelProps } from './SelectOptionsList';
+export type SelectBottomSheetProps = SelectPanelProps;
+export declare const SelectBottomSheet: (props: SelectBottomSheetProps) => React.JSX.Element;
+//# sourceMappingURL=SelectBottomSheet.d.ts.map

package/dist/ui/Select/SelectBottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG/E,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA4C9D,CAAC"}

package/dist/ui/Select/SelectBottomSheet.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { InteractionManager } from 'react-native';
+import { Box } from '../../core/Box';
+import { BottomSheet } from '../BottomSheet';
+import { Button } from '../Button';
+import { TextInput } from '../FormControl';
+import { SelectOptionsList } from './SelectOptionsList';
+import { textesDuPanneau } from './selectReglages';
+export const SelectBottomSheet = (props) => {
+    const { open, setOpen, title, multiple, searchable, query, onQueryChange } = props;
+    const { searchPlaceholder } = textesDuPanneau(props);
+    const searchRef = React.useRef(null);
+    // Le focus n'est pris qu'une fois l'animation d'ouverture terminée : pendant
+    // celle-ci le champ n'est pas encore mesuré et le clavier se referme aussitôt.
+    React.useEffect(() => {
+        if (!open || !searchable)
+            return;
+        const task = InteractionManager.runAfterInteractions(() => searchRef.current?.focus());
+        return () => task.cancel();
+    }, [open, searchable]);
+    return (_jsxs(BottomSheet, { open: open, setOpen: setOpen, title: title, fitContent: true, moveOnKeyboardChange: searchable, action: multiple ? (_jsx(Button, { testID: "select-validate", title: "Valider", size: "sm", variant: "primary", onPress: () => setOpen(false) })) : undefined, children: [searchable && (_jsx(Box, { pl: "2W", pr: "2W", pb: "1W", children: _jsx(TextInput, { ref: searchRef, testID: "select-search", accessibilityLabel: "Rechercher", value: query, onChangeText: onQueryChange, placeholder: searchPlaceholder }) })), _jsx(SelectOptionsList, { ...props })] }));
+};

package/dist/ui/Select/SelectItem.d.ts

@@ -0,0 +1,19 @@
+import { Leading } from '../Leading';
+export type SelectItemProps = {
+    label: string;
+    leading?: Leading;
+    /** Option actuellement sélectionnée : coche en tête de bande. */
+    selected?: boolean;
+    /** Option survolée ou active au clavier : fond et barre d'accent. */
+    highlighted?: boolean;
+    disabled?: boolean;
+    /** Multi-sélection : la sélection se marque par une case à cocher en tête de bande, pas par la coche. */
+    multiple?: boolean;
+};
+/**
+ * Rendu d'une option, sans aucun comportement : la zone pressable (natif) ou
+ * le conteneur porteur du clavier et de l'ARIA (web, via `components.Option`
+ * de react-select) est fourni par l'appelant.
+ */
+export declare const SelectItem: ({ label, leading, selected, highlighted, disabled, multiple }: SelectItemProps) => import("react").JSX.Element;
+//# sourceMappingURL=SelectItem.d.ts.map

package/dist/ui/Select/SelectItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAKlD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,+DAA+D,eAAe,gCA0CxG,CAAC"}

package/dist/ui/Select/SelectItem.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { LeadingSlot } from '../Leading';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './SelectList.styles';
+import { selectItemStyle } from './selectItemStyle';
+/**
+ * Rendu d'une option, sans aucun comportement : la zone pressable (natif) ou
+ * le conteneur porteur du clavier et de l'ARIA (web, via `components.Option`
+ * de react-select) est fourni par l'appelant.
+ */
+export const SelectItem = ({ label, leading, selected, highlighted, disabled, multiple }) => {
+    const styles = useStyles();
+    const { color } = useTheme();
+    const aspect = selectItemStyle(styles, {
+        texte: color.light.text['default-grey'],
+        texteDesactive: color.light.text['disabled-grey'],
+        coche: color.light.text['inverted-grey'],
+    }, { selected, highlighted, disabled });
+    return (_jsxs(Box, { tag: "select-item", style: aspect.item, children: [highlighted && _jsx(Box, { testID: "select-item-barre", style: styles.barre }), _jsxs(Box, { tag: "select-item-band", style: aspect.band, hoverStyle: aspect.bandHover, children: [multiple && (_jsx(Box, { tag: "select-item-checkbox", style: aspect.caseACocher, children: selected && _jsx(LucideIcon, { size: "xs", name: "Check", color: aspect.coche }) })), !multiple && (_jsx(Box, { testID: "select-item-place-coche", style: styles.placeCoche, children: selected && (_jsx(Box, { testID: "select-item-coche", children: _jsx(LucideIcon, { size: "sm", name: "Check", color: aspect.icone }) })) })), _jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm', color: aspect.icone } }), _jsx(Typography, { style: aspect.label, children: label })] })] }));
+};

package/dist/ui/Select/SelectList.styles.d.ts

@@ -0,0 +1,143 @@
+/**
+ * Hauteur d'une option. 32 px sur desktop (maquette), 44 pt sur mobile pour
+ * respecter les cibles tactiles minimales (HIG Apple / Material).
+ */
+export declare const SELECT_ROW_HEIGHT: number;
+export declare const useStyles: () => {
+    checkbox: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        flexShrink: number;
+        height: import("@alveole/theme").Spacing;
+        width: import("@alveole/theme").Spacing;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: string;
+        borderRadius: import("@alveole/theme").Radius;
+        backgroundColor: "transparent";
+    };
+    checkboxChecked: {
+        backgroundColor: string;
+    };
+    checkboxDisabled: {
+        borderColor: string;
+    };
+    checkboxCheckedDisabled: {
+        backgroundColor: string;
+    };
+    itemLabel: {
+        color: string;
+        flex: number;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    itemLabelDisabled: {
+        color: string;
+    };
+    placeCoche: {
+        width: import("@alveole/theme").Spacing;
+        flexShrink: number;
+    };
+    item: {
+        position: "relative";
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "stretch";
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        minHeight: number;
+        width: "100%";
+        cursor: "pointer";
+    };
+    itemDisabled: {
+        cursor: "not-allowed";
+    };
+    band: {
+        flex: number;
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        borderRadius: import("@alveole/theme").Radius;
+    };
+    bandHighlighted: {
+        backgroundColor: string;
+    };
+    barre: {
+        position: "absolute";
+        left: number;
+        top: string | number;
+        bottom: string | number;
+        width: import("@alveole/theme").Spacing;
+        borderRadius: import("@alveole/theme").Radius;
+        backgroundColor: string;
+    };
+    panel: {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        borderRadius: import("@alveole/theme").Radius;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: string;
+        backgroundColor: string;
+        overflow: "hidden";
+    } | {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        borderRadius: import("@alveole/theme").Radius;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: string;
+        backgroundColor: string;
+        overflow: "hidden";
+    } | {
+        boxShadow: string;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        borderRadius: import("@alveole/theme").Radius;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: string;
+        backgroundColor: string;
+        overflow: "hidden";
+    };
+    emptyMessage: {
+        color: string;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    groupHeader: {
+        color: string;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+};
+//# sourceMappingURL=SelectList.styles.d.ts.map

package/dist/ui/Select/SelectList.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectList.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectList.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAAkC,CAAC;AA4IjE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKnB,CAAC"}

package/dist/ui/Select/SelectList.styles.js

@@ -0,0 +1,129 @@
+import { makeStyles } from '@alveole/theme';
+import { Platform } from 'react-native';
+/**
+ * Hauteur d'une option. 32 px sur desktop (maquette), 44 pt sur mobile pour
+ * respecter les cibles tactiles minimales (HIG Apple / Material).
+ */
+export const SELECT_ROW_HEIGHT = Platform.OS === 'web' ? 32 : 44;
+const panneau = ({ text, color, spacing, radius, shadows }) => ({
+    // Panneau
+    panel: {
+        paddingTop: spacing('1W'),
+        paddingBottom: spacing('1W'),
+        borderRadius: radius('md'),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color.light.border['default-grey'],
+        backgroundColor: color.light.background['default-grey'],
+        overflow: 'hidden',
+        ...shadows('lifted'),
+    },
+    // Message liste vide
+    emptyMessage: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['mention-grey'],
+        paddingTop: spacing('1W'),
+        paddingBottom: spacing('1W'),
+        paddingLeft: spacing('3W'),
+        paddingRight: spacing('3W'),
+    },
+    // En-tête de groupe
+    groupHeader: {
+        ...text['Corps de texte'].XS.Bold,
+        color: color.light.text['mention-grey'],
+        paddingTop: spacing('3V'),
+        paddingBottom: spacing('1V'),
+        paddingLeft: spacing('2W'),
+        paddingRight: spacing('2W'),
+    },
+});
+const ligne = ({ color, spacing, spacingValue, radius }) => ({
+    // Option : conteneur pleine largeur, sans fond propre
+    item: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        paddingLeft: spacing('1W'),
+        paddingRight: spacing('1W'),
+        minHeight: SELECT_ROW_HEIGHT,
+        width: '100%',
+        cursor: 'pointer',
+    },
+    itemDisabled: {
+        cursor: 'not-allowed',
+    },
+    // Bande arrondie portant le fond de l option active
+    band: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing('1W'),
+        paddingLeft: spacing('1W'),
+        paddingRight: spacing('1W'),
+        borderRadius: radius('md'),
+    },
+    bandHighlighted: {
+        backgroundColor: color.light.background['transparent-hover'],
+    },
+    // Barre d'accent de l'option active, dans la gouttiere laissee par le retrait de la bande (Primer).
+    barre: {
+        position: 'absolute',
+        left: 0,
+        top: spacing('1V'),
+        bottom: spacing('1V'),
+        width: spacingValue('1V'),
+        borderRadius: radius('md'),
+        backgroundColor: color.light.border['default-primary'],
+    },
+});
+const contenuDeLaLigne = ({ text, color, spacingValue }) => ({
+    itemLabel: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.light.text['default-grey'],
+        flex: 1,
+    },
+    itemLabelDisabled: {
+        color: color.light.text['disabled-grey'],
+    },
+    // Place de la coche, vide sur les options non retenues : les libelles restent alignes.
+    placeCoche: {
+        width: spacingValue('100'),
+        flexShrink: 0,
+    },
+});
+// Visuel de la case a cocher en multi-selection : reprend les tokens de `Checkbox` taille sm
+// (voir `Checkbox.styles.ts`) sans en etre une instance, la ligne restant seule pressable.
+const caseACocher = ({ color, spacingValue, radius }) => ({
+    checkbox: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        height: spacingValue('100'),
+        width: spacingValue('100'),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color.light.border['action-high-primary'],
+        borderRadius: radius('sm'),
+        backgroundColor: 'transparent',
+    },
+    checkboxChecked: {
+        backgroundColor: color.light.background['action-high-primary'],
+    },
+    checkboxDisabled: {
+        borderColor: color.light.border['disabled-grey'],
+    },
+    checkboxCheckedDisabled: {
+        backgroundColor: color.light.background['disabled-grey'],
+    },
+});
+// La puce ne vit pas dans le panneau mais dans le champ fermé, en multi-sélection.
+// Elle partage cette table parce qu'elle décrit la même chose : une option retenue.
+export const useStyles = makeStyles(theme => ({
+    ...panneau(theme),
+    ...ligne(theme),
+    ...contenuDeLaLigne(theme),
+    ...caseACocher(theme),
+}));

package/dist/ui/Select/SelectOptionRow.d.ts

@@ -0,0 +1,14 @@
+import { LayoutChangeEvent } from 'react-native';
+import type { SelectOption } from './Select.types';
+export type SelectOptionRowProps = {
+    option: SelectOption;
+    /** Titre du groupe que cette option ouvre, quand elle en ouvre un. */
+    groupHeader?: string;
+    selected: boolean;
+    multiple?: boolean;
+    onPress: (value: string) => void;
+    onSelectedLayout: (event: LayoutChangeEvent) => void;
+};
+/** Une ligne du panneau : son en-tete de groupe eventuel, et l'option pressable elle-meme. */
+export declare const SelectOptionRow: ({ option, groupHeader, selected, multiple, onPress, onSelectedLayout, }: SelectOptionRowProps) => import("react").JSX.Element;
+//# sourceMappingURL=SelectOptionRow.d.ts.map

package/dist/ui/Select/SelectOptionRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptionRow.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectOptionRow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAa,MAAM,cAAc,CAAC;AAE5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,YAAY,CAAC;IACrB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,gBAAgB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,eAAe,GAAI,yEAO7B,oBAAoB,gCA6BtB,CAAC"}

package/dist/ui/Select/SelectOptionRow.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { Typography } from '../../core/Typography';
+import { SelectItem } from './SelectItem';
+import { useStyles } from './SelectList.styles';
+/** Une ligne du panneau : son en-tete de groupe eventuel, et l'option pressable elle-meme. */
+export const SelectOptionRow = ({ option, groupHeader, selected, multiple, onPress, onSelectedLayout, }) => {
+    const styles = useStyles();
+    return (_jsxs(_Fragment, { children: [groupHeader && _jsx(Typography, { style: styles.groupHeader, children: groupHeader }), _jsx(Pressable, { testID: `select-option-${option.value}`, accessibilityRole: multiple ? 'checkbox' : 'button', accessibilityState: multiple
+                    ? { disabled: Boolean(option.disabled), checked: selected }
+                    : { disabled: Boolean(option.disabled), selected }, disabled: option.disabled, onPress: () => onPress(option.value), onLayout: selected ? onSelectedLayout : undefined, children: _jsx(SelectItem, { label: option.label, leading: option.leading, selected: selected, disabled: option.disabled, multiple: multiple }) })] }));
+};