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

package/dist/ui/RadioGroup/RadioGroupCard.js

@@ -13,5 +13,5 @@ export const RadioGroupCard = (props) => {
     const id = React.useMemo(() => `radiogroup-${value}-${rid}`, [value, rid]);
     const styles = useStyles();
     useRadioGroup();
-    return (_jsx(Box, { tag: "radio-group-card", style: styles.card, children: _jsx(Label, { htmlFor: id, display: "flex", flexDirection: "row", width: '100%', children: _jsx(Box, { style: { ...styles.itemCard, ...style }, backgroundColor: { hover: styles.itemCardHover.backgroundColor }, children: _jsxs(Box, { style: styles.radioGroupCardContent, children: [_jsx(RadioInput, { value: value, id: id, size: "sm" }), leading != null && (_jsx(Box, { display: "flex", flexDirection: "row", gap: '050', style: styles.itemCardIcon, children: _jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }) })), _jsx(Box, { style: { ...styles.radioGroupCardLabelContainer, ...(separator ? styles.itemCardSeparator : {}) }, children: _jsx(Typography, { style: styles.radioGroupCardLabel, children: label }) })] }) }) }) }));
+    return (_jsx(Box, { tag: "radio-group-card", style: styles.card, children: _jsx(Label, { htmlFor: id, display: "flex", flexDirection: "row", width: '100%', children: _jsx(Box, { style: { ...styles.itemCard, ...style }, backgroundColor: { hover: styles.itemCardHover.backgroundColor }, children: _jsxs(Box, { style: styles.radioGroupCardContent, children: [_jsx(RadioInput, { value: value, id: id, size: "sm" }), leading != null && (_jsx(Box, { display: "flex", flexDirection: "row", gap: "1W", style: styles.itemCardIcon, children: _jsx(LeadingSlot, { contenu: leading, apparence: { size: 'sm' } }) })), _jsx(Box, { style: { ...styles.radioGroupCardLabelContainer, ...(separator ? styles.itemCardSeparator : {}) }, children: _jsx(Typography, { style: styles.radioGroupCardLabel, children: label }) })] }) }) }) }));
 };

package/dist/ui/RadioGroup/RadioGroupItem.styles.d.ts

@@ -18,7 +18,7 @@ export declare const useStyles: () => {
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
         cursor: "pointer";
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=RadioGroupItem.styles.d.ts.map

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

@@ -17,7 +17,7 @@ declare const _default: {
             paddingBottom: string | number;
         };
         enteteTitle: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -32,7 +32,7 @@ declare const _default: {
         };
         withBorder: {
             borderWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderLeftWidth: number;
             borderRightWidth: number;
         };

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

@@ -10,7 +10,7 @@ export declare const useStyles: () => {
         paddingBottom: string | number;
     };
     enteteTitle: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -25,7 +25,7 @@ export declare const useStyles: () => {
     };
     withBorder: {
         borderWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderLeftWidth: number;
         borderRightWidth: number;
     };

package/dist/ui/ResourceList/ResourceListDivider.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '../../core/Box';
 import { Divider } from '../Divider';
-export const ResourceListDivider = () => (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Divider, {}) }));
+export const ResourceListDivider = () => (_jsx(Box, { pl: "2W", pr: "2W", children: _jsx(Divider, {}) }));

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

@@ -8,7 +8,7 @@ declare const _default: {
     component: import("react").ForwardRefExoticComponent<import("./Select.types").SelectProps & import("react").RefAttributes<import("./Select.types").SelectRef>>;
     styleFn: () => {
         value: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             flex: number;
             fontSize: 14;
             lineHeight: 20;
@@ -17,10 +17,10 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         valuePlaceholder: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         valueDisabled: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         inputInnerMultiple: {
             paddingTop: string | number;
@@ -49,18 +49,18 @@ declare const _default: {
             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;
         };
         inputCursor: {
             cursor: "pointer";

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

@@ -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,10 +9,10 @@ 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 chevron et la valeur restent centrés dans le champ. */
     inputInnerMultiple: {
@@ -42,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/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';
@@ -13,11 +12,12 @@ export const SelectBottomSheet = (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, ...(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/SelectList.styles.d.ts

@@ -13,22 +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: {
-        borderColor: string;
-        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;
@@ -37,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;
@@ -68,7 +68,7 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme").Radius;
     };
     bandHighlighted: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     barre: {
         position: "absolute";
@@ -77,13 +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;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     } | {
         shadowColor: string;
@@ -97,18 +97,18 @@ export declare const useStyles: () => {
         paddingTop: string | number;
         paddingBottom: string | number;
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         overflow: "hidden";
     } | {
         boxShadow: string;
         paddingTop: string | number;
         paddingBottom: string | number;
         borderRadius: import("@alveole/theme").Radius;
-        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;
@@ -120,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.js

@@ -86,7 +86,7 @@ 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,
     },
 });
@@ -99,8 +99,8 @@ const caseACocher = ({ color, spacingValue, radius }) => ({
         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['contrast-grey'],

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"}

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

@@ -37,11 +37,11 @@ export declare const selectItemStyle: (styles: SelectListStyles, couleurs: {
         borderRadius: import("@alveole/theme").Radius;
     };
     fondDeBande: {
-        default: string | undefined;
-        hover: string | undefined;
+        default: import("@alveole/theme").ThemeColor | undefined;
+        hover: import("@alveole/theme").ThemeColor | undefined;
     };
     label: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         flex: number;
         fontSize: 14;
         lineHeight: 20;
@@ -51,8 +51,8 @@ export declare const selectItemStyle: (styles: SelectListStyles, couleurs: {
     };
     icone: string;
     caseACocher: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor | "transparent";
+        borderColor: import("@alveole/theme").ThemeColor;
         display: "flex";
         alignItems: "center";
         justifyContent: "center";