@alveole/components 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -21,7 +21,7 @@ export default {
         'Le composant reste **strictement contrôlé**, y compris pour la création d’option : `onCreateOption` reçoit',
         'la saisie, à l’appelant d’ajouter l’option à `options` puis de mettre `value` à jour.',
         '',
-        '### Migration depuis `Autocomplete`',
+        '## Migration depuis `Autocomplete`',
         '',
         // Cellules en texte brut : le rendu Markdown du catalogue échoue sur du code
         // inline dans un tableau.
@@ -81,29 +81,29 @@ const LONG_OPTIONS = Array.from({ length: 60 }, (_, index) => ({
 }));
 export const Default = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "S\u00E9lection", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "S\u00E9lection", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue }) }) }));
 };
-export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Avec valeur", children: _jsx(Select, { options: OPTIONS, value: "b" }) }), _jsx(FormControl, { label: "Erreur", error: "Ce champ est requis", children: _jsx(Select, { options: OPTIONS, value: null, error: "Ce champ est requis" }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Valide", children: _jsx(Select, { options: OPTIONS, value: "a", success: "Valide" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(Select, { options: OPTIONS, value: "a", disabled: true }) })] }));
+export const States = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(FormControl, { label: "Avec valeur", children: _jsx(Select, { options: OPTIONS, value: "b" }) }), _jsx(FormControl, { label: "Erreur", error: "Ce champ est requis", children: _jsx(Select, { options: OPTIONS, value: null, error: "Ce champ est requis" }) }), _jsx(FormControl, { label: "Succ\u00E8s", success: "Valide", children: _jsx(Select, { options: OPTIONS, value: "a", success: "Valide" }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(Select, { options: OPTIONS, value: "a", disabled: true }) })] }));
 export const WithIcons = () => {
     const [value, setValue] = useState('contact');
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Type de ressource", children: _jsx(Select, { options: ICON_OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Type de ressource", children: _jsx(Select, { options: ICON_OPTIONS, value: value, onChange: setValue }) }) }));
 };
 export const Grouped = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Type de document", children: _jsx(Select, { placeholder: "Tous les types", options: GROUPED_OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Type de document", children: _jsx(Select, { placeholder: "Tous les types", options: GROUPED_OPTIONS, value: value, onChange: setValue }) }) }));
 };
 export const LongList = () => {
     const [value, setValue] = useState('option-42');
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Liste d\u00E9filante", children: _jsx(Select, { options: LONG_OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Liste d\u00E9filante", children: _jsx(Select, { options: LONG_OPTIONS, value: value, onChange: setValue }) }) }));
 };
 export const Clearable = () => {
     const [value, setValue] = useState('b');
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Effa\u00E7able", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue, clearable: true }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Effa\u00E7able", children: _jsx(Select, { placeholder: "Choisir...", options: OPTIONS, value: value, onChange: setValue, clearable: true }) }) }));
 };
 /** `searchable` ajoute un champ de recherche au panneau et filtre les options sur leur libellé. */
 export const Searchable = () => {
     const [value, setValue] = useState(null);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Ville", children: _jsx(Select, { placeholder: "Choisir...", searchable: true, options: CITY_OPTIONS, value: value, onChange: setValue }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Ville", children: _jsx(Select, { placeholder: "Choisir...", searchable: true, options: CITY_OPTIONS, value: value, onChange: setValue }) }) }));
 };
 /**
  * Recherche distante : `localFilter={false}` laisse le filtrage au serveur, et
@@ -125,12 +125,12 @@ export const RemoteSearch = () => {
         ]);
         setLoading(false);
     };
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Recherche distante", children: _jsx(Select, { placeholder: "Saisir au moins 3 caract\u00E8res...", searchable: true, localFilter: false, loading: loading, emptyMessage: "Saisir au moins 3 caract\u00E8res", options: options, value: value, onChange: setValue, onSearchChange: search }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Recherche distante", children: _jsx(Select, { placeholder: "Saisir au moins 3 caract\u00E8res...", searchable: true, localFilter: false, loading: loading, emptyMessage: "Saisir au moins 3 caract\u00E8res", options: options, value: value, onChange: setValue, onSearchChange: search }) }) }));
 };
 /** `multiple` fait de la valeur un tableau. Les valeurs retenues s’affichent en puces retirables. */
 export const Multiple = () => {
     const [values, setValues] = useState(['a']);
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "S\u00E9lection multiple", children: _jsx(Select, { placeholder: "Choisir...", multiple: true, clearable: true, options: OPTIONS, value: values, onChange: setValues }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "S\u00E9lection multiple", children: _jsx(Select, { placeholder: "Choisir...", multiple: true, clearable: true, options: OPTIONS, value: values, onChange: setValues }) }) }));
 };
 /**
  * `creatable` propose d’ajouter la saisie à la liste. Le composant restant contrôlé,
@@ -143,7 +143,7 @@ export const Creatable = () => {
         setOptions(current => [...current, { label: query, value: query }]);
         setValues(current => [...current, query]);
     };
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "\u00C9tiquettes", children: _jsx(Select, { placeholder: "Rechercher ou cr\u00E9er...", multiple: true, searchable: true, creatable: true, options: options, value: values, onChange: setValues, onCreateOption: createOption }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "\u00C9tiquettes", children: _jsx(Select, { placeholder: "Rechercher ou cr\u00E9er...", multiple: true, searchable: true, creatable: true, options: options, value: values, onChange: setValues, onCreateOption: createOption }) }) }));
 };
 /**
  * Champ adresse : recherche distante et saisie libre autorisée. Ce préréglage remplace
@@ -159,6 +159,6 @@ export const Address = () => {
         setOptions(current => [...current, { label: query, value: query }]);
         setValue(query);
     };
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 24, children: _jsx(FormControl, { label: "Adresse", children: _jsx(Select, { placeholder: "ex : 3 rue Robespierre", searchable: true, localFilter: false, creatable: true, clearable: true, emptyMessage: "Saisir au moins 3 caract\u00E8res", createLabel: query => `Utiliser « ${query} »`, options: options, value: value, onChange: setValue, onSearchChange: search, onCreateOption: createAddress }) }) }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "3W", children: _jsx(FormControl, { label: "Adresse", children: _jsx(Select, { placeholder: "ex : 3 rue Robespierre", searchable: true, localFilter: false, creatable: true, clearable: true, emptyMessage: "Saisir au moins 3 caract\u00E8res", createLabel: query => `Utiliser « ${query} »`, options: options, value: value, onChange: setValue, onSearchChange: search, onCreateOption: createAddress }) }) }));
 };
 export * as Sources from './Select.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuW,CAAC;AAE5X,eAAO,MAAM,MAAM,cAA+oB,CAAC;AAEnqB,eAAO,MAAM,SAAS,cAAgW,CAAC;AAEvX,eAAO,MAAM,OAAO,cAA0X,CAAC;AAE/Y,eAAO,MAAM,QAAQ,cAA+V,CAAC;AAErX,eAAO,MAAM,SAAS,cAAkX,CAAC;AAEzY,eAAO,MAAM,UAAU,cAAsX,CAAC;AAE9Y,eAAO,MAAM,YAAY,cAAmiC,CAAC;AAE7jC,eAAO,MAAM,QAAQ,cAAoY,CAAC;AAE1Z,eAAO,MAAM,SAAS,cAAqwB,CAAC;AAE5xB,eAAO,MAAM,OAAO,cAA0gC,CAAC;AAE/hC,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAMtE,CAAC"}
+{"version":3,"file":"Select.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAyW,CAAC;AAE9X,eAAO,MAAM,MAAM,cAAipB,CAAC;AAErqB,eAAO,MAAM,SAAS,cAAkW,CAAC;AAEzX,eAAO,MAAM,OAAO,cAA4X,CAAC;AAEjZ,eAAO,MAAM,QAAQ,cAAiW,CAAC;AAEvX,eAAO,MAAM,SAAS,cAAoX,CAAC;AAE3Y,eAAO,MAAM,UAAU,cAAwX,CAAC;AAEhZ,eAAO,MAAM,YAAY,cAAqiC,CAAC;AAE/jC,eAAO,MAAM,QAAQ,cAAsY,CAAC;AAE5Z,eAAO,MAAM,SAAS,cAAuwB,CAAC;AAE9xB,eAAO,MAAM,OAAO,cAA4gC,CAAC;AAEjiC,eAAO,MAAM,YAAY;;;;;;;;;;;;CAYf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAMtE,CAAC"}

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

@@ -1,16 +1,16 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Select/Select.stories.tsx
-export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Sélection\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <FormControl label=\"Avec valeur\">\n      <Select options={OPTIONS} value=\"b\" />\n    </FormControl>\n    <FormControl label=\"Erreur\" error=\"Ce champ est requis\">\n      <Select options={OPTIONS} value={null} error=\"Ce champ est requis\" />\n    </FormControl>\n    <FormControl label=\"Succès\" success=\"Valide\">\n      <Select options={OPTIONS} value=\"a\" success=\"Valide\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <Select options={OPTIONS} value=\"a\" disabled />\n    </FormControl>\n  </Box>\n);";
-export const WithIcons = () => "export const WithIcons = () => {\n  const [value, setValue] = useState<string | null>('contact');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Type de ressource\">\n        <Select options={ICON_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Grouped = () => "export const Grouped = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Type de document\">\n        <Select placeholder=\"Tous les types\" options={GROUPED_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const LongList = () => "export const LongList = () => {\n  const [value, setValue] = useState<string | null>('option-42');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Liste défilante\">\n        <Select options={LONG_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Clearable = () => "export const Clearable = () => {\n  const [value, setValue] = useState<string | null>('b');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Effaçable\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} clearable />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Searchable = () => "export const Searchable = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Ville\">\n        <Select placeholder=\"Choisir...\" searchable options={CITY_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const RemoteSearch = () => "export const RemoteSearch = () => {\n  const [value, setValue] = useState<string | null>(null);\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const search = (query: string) => {\n    if (query.length < 3) {\n      setOptions([]);\n      return;\n    }\n    setLoading(true);\n    setOptions([\n      { label: `${query} — résultat 1`, value: `${query}-1` },\n      { label: `${query} — résultat 2`, value: `${query}-2` },\n    ]);\n    setLoading(false);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Recherche distante\">\n        <Select\n          placeholder=\"Saisir au moins 3 caractères...\"\n          searchable\n          localFilter={false}\n          loading={loading}\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Multiple = () => "export const Multiple = () => {\n  const [values, setValues] = useState<string[]>(['a']);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Sélection multiple\">\n        <Select placeholder=\"Choisir...\" multiple clearable options={OPTIONS} value={values} onChange={setValues} />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Creatable = () => "export const Creatable = () => {\n  const [options, setOptions] = useState<SelectOption[]>(OPTIONS);\n  const [values, setValues] = useState<string[]>([]);\n\n  const createOption = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValues(current => [...current, query]);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Étiquettes\">\n        <Select\n          placeholder=\"Rechercher ou créer...\"\n          multiple\n          searchable\n          creatable\n          options={options}\n          value={values}\n          onChange={setValues}\n          onCreateOption={createOption}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
-export const Address = () => "export const Address = () => {\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [value, setValue] = useState<string | null>(null);\n\n  const search = (query: string) => {\n    setOptions(query.length >= 3 ? ADDRESS_SUGGESTIONS : []);\n  };\n\n  const createAddress = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValue(query);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Adresse\">\n        <Select\n          placeholder=\"ex : 3 rue Robespierre\"\n          searchable\n          localFilter={false}\n          creatable\n          clearable\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          createLabel={query => `Utiliser « ${query} »`}\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n          onCreateOption={createAddress}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Sélection\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const States = () => "export const States = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <FormControl label=\"Avec valeur\">\n      <Select options={OPTIONS} value=\"b\" />\n    </FormControl>\n    <FormControl label=\"Erreur\" error=\"Ce champ est requis\">\n      <Select options={OPTIONS} value={null} error=\"Ce champ est requis\" />\n    </FormControl>\n    <FormControl label=\"Succès\" success=\"Valide\">\n      <Select options={OPTIONS} value=\"a\" success=\"Valide\" />\n    </FormControl>\n    <FormControl label=\"Désactivé\" disabled>\n      <Select options={OPTIONS} value=\"a\" disabled />\n    </FormControl>\n  </Box>\n);";
+export const WithIcons = () => "export const WithIcons = () => {\n  const [value, setValue] = useState<string | null>('contact');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Type de ressource\">\n        <Select options={ICON_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Grouped = () => "export const Grouped = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Type de document\">\n        <Select placeholder=\"Tous les types\" options={GROUPED_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const LongList = () => "export const LongList = () => {\n  const [value, setValue] = useState<string | null>('option-42');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Liste défilante\">\n        <Select options={LONG_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Clearable = () => "export const Clearable = () => {\n  const [value, setValue] = useState<string | null>('b');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Effaçable\">\n        <Select placeholder=\"Choisir...\" options={OPTIONS} value={value} onChange={setValue} clearable />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Searchable = () => "export const Searchable = () => {\n  const [value, setValue] = useState<string | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Ville\">\n        <Select placeholder=\"Choisir...\" searchable options={CITY_OPTIONS} value={value} onChange={setValue} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const RemoteSearch = () => "export const RemoteSearch = () => {\n  const [value, setValue] = useState<string | null>(null);\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const search = (query: string) => {\n    if (query.length < 3) {\n      setOptions([]);\n      return;\n    }\n    setLoading(true);\n    setOptions([\n      { label: `${query} — résultat 1`, value: `${query}-1` },\n      { label: `${query} — résultat 2`, value: `${query}-2` },\n    ]);\n    setLoading(false);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Recherche distante\">\n        <Select\n          placeholder=\"Saisir au moins 3 caractères...\"\n          searchable\n          localFilter={false}\n          loading={loading}\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Multiple = () => "export const Multiple = () => {\n  const [values, setValues] = useState<string[]>(['a']);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Sélection multiple\">\n        <Select placeholder=\"Choisir...\" multiple clearable options={OPTIONS} value={values} onChange={setValues} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Creatable = () => "export const Creatable = () => {\n  const [options, setOptions] = useState<SelectOption[]>(OPTIONS);\n  const [values, setValues] = useState<string[]>([]);\n\n  const createOption = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValues(current => [...current, query]);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Étiquettes\">\n        <Select\n          placeholder=\"Rechercher ou créer...\"\n          multiple\n          searchable\n          creatable\n          options={options}\n          value={values}\n          onChange={setValues}\n          onCreateOption={createOption}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Address = () => "export const Address = () => {\n  const [options, setOptions] = useState<SelectOption[]>([]);\n  const [value, setValue] = useState<string | null>(null);\n\n  const search = (query: string) => {\n    setOptions(query.length >= 3 ? ADDRESS_SUGGESTIONS : []);\n  };\n\n  const createAddress = (query: string) => {\n    setOptions(current => [...current, { label: query, value: query }]);\n    setValue(query);\n  };\n\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n      <FormControl label=\"Adresse\">\n        <Select\n          placeholder=\"ex : 3 rue Robespierre\"\n          searchable\n          localFilter={false}\n          creatable\n          clearable\n          emptyMessage=\"Saisir au moins 3 caractères\"\n          createLabel={query => `Utiliser « ${query} »`}\n          options={options}\n          value={value}\n          onChange={setValue}\n          onSearchChange={search}\n          onCreateOption={createAddress}\n        />\n      </FormControl>\n    </Box>\n  );\n};";
 export const storySources = {
     Default,
     States,

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     value: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         flex: number;
         fontSize: 14;
         lineHeight: 20;
@@ -9,14 +9,13 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     valuePlaceholder: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     valueDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
-    /** Les puces repassent à la ligne : le champ s'aligne en haut et respire verticalement. */
+    /** Les puces repassent à la ligne ; le chevron et la valeur restent centrés dans le champ. */
     inputInnerMultiple: {
-        alignItems: "flex-start";
         paddingTop: string | number;
         paddingBottom: string | number;
     };
@@ -43,18 +42,18 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         width: "100%";
     };
     inputError: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputSuccess: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     inputDisabled: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     /** Web uniquement : `cursor` n'appartient pas aux styles React Native. */
     inputCursor: {

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

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.styles.ts"],"names":[],"mappings":"AAwFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;IAhBlB,2FAA2F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA7B3F,0EAA0E;;;;;;;IAO1E;;;;OAIG;;CAkCsF,CAAC"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/Select.styles.ts"],"names":[],"mappings":"AAuFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;IAflB,8FAA8F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA7B9F,0EAA0E;;;;;;;IAO1E;;;;OAIG;;CAiCsF,CAAC"}

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

@@ -59,9 +59,8 @@ const contenuDuChamp = ({ text, color, spacing }) => ({
     valueDisabled: {
         color: color.light.text['disabled-grey'],
     },
-    /** Les puces repassent à la ligne : le champ s'aligne en haut et respire verticalement. */
+    /** Les puces repassent à la ligne ; le chevron et la valeur restent centrés dans le champ. */
     inputInnerMultiple: {
-        alignItems: 'flex-start',
         paddingTop: spacing('1V'),
         paddingBottom: spacing('1V'),
     },

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

@@ -29,6 +29,8 @@ type SelectSharedProps = FormControlCaptionProps & {
     sheetTitle?: string;
     /** Ajoute une entrée permettant de revenir à une sélection vide. */
     clearable?: boolean;
+    /** Points d'ancrage du bottom sheet (en % de la hauteur écran). Omis : le sheet s'adapte au contenu. */
+    sheetSnapPoints?: number[];
     /** Ajoute un champ de recherche au panneau. Par défaut : false. */
     searchable?: boolean;
     searchPlaceholder?: string;

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

@@ -1 +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"}
+{"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,wGAAwG;IACxG,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAE3B,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/SelectBottomSheet.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"SelectBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectBottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG/E,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA6C9D,CAAC"}

package/dist/ui/Select/SelectBottomSheet.js

@@ -1,6 +1,5 @@
 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';
@@ -8,16 +7,17 @@ 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 { open, setOpen, title, multiple, searchable, query, onQueryChange, sheetSnapPoints } = 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.
+    // `requestIdleCallback` remplace `InteractionManager`, retiré de React Native 0.88.
     React.useEffect(() => {
         if (!open || !searchable)
             return;
-        const task = InteractionManager.runAfterInteractions(() => searchRef.current?.focus());
-        return () => task.cancel();
+        const handle = requestIdleCallback(() => searchRef.current?.focus());
+        return () => cancelIdleCallback(handle);
     }, [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 })] }));
+    return (_jsxs(BottomSheet, { open: open, setOpen: setOpen, title: title, ...(sheetSnapPoints != null ? { points: sheetSnapPoints } : { 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.js

@@ -19,5 +19,5 @@ export const SelectItem = ({ label, leading, selected, highlighted, disabled, mu
         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 })] })] }));
+    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, backgroundColor: aspect.fondDeBande, 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

@@ -13,21 +13,22 @@ export declare const useStyles: () => {
         width: import("@alveole/theme").Spacing;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderRadius: import("@alveole/theme").Radius;
         backgroundColor: "transparent";
     };
     checkboxChecked: {
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     checkboxDisabled: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
     };
     checkboxCheckedDisabled: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     itemLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         flex: number;
         fontSize: 14;
         lineHeight: 20;
@@ -36,7 +37,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     itemLabelDisabled: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     placeCoche: {
         width: import("@alveole/theme").Spacing;
@@ -67,7 +68,7 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
     };
     bandHighlighted: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     barre: {
         position: "absolute";
@@ -76,16 +77,13 @@ export declare const useStyles: () => {
         bottom: string | number;
         width: import("@alveole/theme").Spacing;
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     panel: {
         paddingTop: string | number;
         paddingBottom: string | number;
         borderRadius: import("@alveole/theme").Radius;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     } | {
         shadowColor: string;
@@ -99,24 +97,18 @@ export declare const useStyles: () => {
         paddingTop: string | number;
         paddingBottom: string | number;
         borderRadius: import("@alveole/theme").Radius;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     } | {
         boxShadow: string;
         paddingTop: string | number;
         paddingBottom: string | number;
         borderRadius: import("@alveole/theme").Radius;
-        borderWidth: number;
-        borderStyle: "solid";
-        borderColor: string;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     };
     emptyMessage: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingTop: string | number;
         paddingBottom: string | number;
         paddingLeft: string | number;
@@ -128,7 +120,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     groupHeader: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingTop: string | number;
         paddingBottom: string | number;
         paddingLeft: string | number;

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

@@ -1 +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"}
+{"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;AA2IjE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKnB,CAAC"}

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

@@ -10,10 +10,7 @@ const panneau = ({ text, color, spacing, radius, shadows }) => ({
     panel: {
         paddingTop: spacing('1W'),
         paddingBottom: spacing('1W'),
-        borderRadius: radius('md'),
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: color.light.border['default-grey'],
+        borderRadius: radius('lg'),
         backgroundColor: color.light.background['default-grey'],
         overflow: 'hidden',
         ...shadows('lifted'),
@@ -89,27 +86,29 @@ const contenuDeLaLigne = ({ text, color, spacingValue }) => ({
     },
     // Place de la coche, vide sur les options non retenues : les libelles restent alignes.
     placeCoche: {
-        width: spacingValue('100'),
+        width: spacingValue('2W'),
         flexShrink: 0,
     },
 });
-// Visuel de la case a cocher en multi-selection : reprend les tokens de `Checkbox` taille sm
+// Visuel de la case a cocher en multi-selection : reprend la geometrie de `Checkbox` taille sm
 // (voir `Checkbox.styles.ts`) sans en etre une instance, la ligne restant seule pressable.
+// Au repos, bordure grise comme chez Primer : la couleur d'action n'arrive qu'a la coche.
 const caseACocher = ({ color, spacingValue, radius }) => ({
     checkbox: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         flexShrink: 0,
-        height: spacingValue('100'),
-        width: spacingValue('100'),
+        height: spacingValue('2W'),
+        width: spacingValue('2W'),
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: color.light.border['action-high-primary'],
+        borderColor: color.light.border['contrast-grey'],
         borderRadius: radius('sm'),
         backgroundColor: 'transparent',
     },
     checkboxChecked: {
+        borderColor: color.light.border['action-high-primary'],
         backgroundColor: color.light.background['action-high-primary'],
     },
     checkboxDisabled: {

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

@@ -23,6 +23,7 @@ export type SelectPanelProps = {
     loading?: boolean;
     loadingMessage?: string;
     emptyMessage?: string;
+    sheetSnapPoints?: number[];
 };
 /**
  * Le contenu deroulant du panneau : l'entree de creation, celle d'effacement, les options et

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOptionsList.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectOptionsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAWnD,uFAAuF;AACvF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,8EAA8E;IAC9E,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,gBAAgB,gCAgExD,CAAC"}
+{"version":3,"file":"SelectOptionsList.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/SelectOptionsList.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAWnD,uFAAuF;AACvF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,8EAA8E;IAC9E,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,gBAAgB,gCAgExD,CAAC"}

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

@@ -21,7 +21,71 @@ export declare const selectControlStyle: (styles: SelectStyles, state: SelectCon
     ':hover': {
         borderColor: string;
     };
+    borderWidth: number;
     borderColor: string;
+    outlineWidth?: number | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineColor?: string | undefined;
+    outlineOffset?: number | undefined;
+    cursor: "pointer";
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
+    cursor: "pointer";
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
+    cursor: "pointer";
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
     cursor: "pointer";
     display: "flex";
     flexDirection: "row";
@@ -33,7 +97,7 @@ export declare const selectControlStyle: (styles: SelectStyles, state: SelectCon
     borderRadius: import("@alveole/theme").Radius;
     borderWidth: number;
     borderStyle: "solid";
-    backgroundColor: string;
+    backgroundColor: import("@alveole/theme").ThemeColor;
     width: "100%";
 } | {
     boxShadow: string;
@@ -41,7 +105,71 @@ export declare const selectControlStyle: (styles: SelectStyles, state: SelectCon
     ':hover': {
         borderColor: string;
     };
+    borderWidth: number;
     borderColor: string;
+    outlineWidth?: number | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineColor?: string | undefined;
+    outlineOffset?: number | undefined;
+    cursor: "not-allowed";
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
+    cursor: "not-allowed";
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
+    cursor: "not-allowed";
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
     cursor: "not-allowed";
     display: "flex";
     flexDirection: "row";
@@ -53,7 +181,7 @@ export declare const selectControlStyle: (styles: SelectStyles, state: SelectCon
     borderRadius: import("@alveole/theme").Radius;
     borderWidth: number;
     borderStyle: "solid";
-    backgroundColor: string;
+    backgroundColor: import("@alveole/theme").ThemeColor;
     width: "100%";
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"selectControlStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectControlStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBjF,CAAC"}
+{"version":3,"file":"selectControlStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectControlStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBjF,CAAC"}