@alveole/components 0.43.2 → 1.0.0

package/dist/ui/Autocomplete/Autocomplete.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, ButtonIcon, Divider, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, LucideIcon, Typography, } from '@alveole/components';
+import { FlashList } from '@shopify/flash-list';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Modal, Platform, Pressable, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { TextField } from '../TextField';
+import { useStyles } from './Autocomplete.styles';
+import { AutocompleteChip } from './AutocompleteChip';
+export const isAutocompleteOptionWithGroup = (option) => {
+    return option != null && typeof option === 'object' && 'group' in option && typeof option.group === 'string';
+};
+export const isAutocompleteOptionWithGroupArray = (options) => {
+    return options.every(isAutocompleteOptionWithGroup);
+};
+function useDebouncedCallback(cb, delay = 250) {
+    const timer = useRef(null);
+    return useCallback((...args) => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => cb(...args), delay);
+    }, [cb, delay]);
+}
+export const Autocomplete = (props) => {
+    const { value, options, placeholder = 'Sélectionner…', isMulti = true, disabledFilterSearch, disabledSearch, disabled, label, labelRight, hint, error, success, allowEmpty = true, autoFocus = true, onChange, onSearchChange, allowCreate = false, onCreateOption, createOptionLabel = (input) => `Ajouter « ${input} »`, createOptionValue = (input) => input, } = props;
+    const styles = useStyles();
+    const { top, bottom } = useSafeAreaInsets();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [selected, setSelected] = useState(value ?? []);
+    const [syncedValueKey, setSyncedValueKey] = useState(() => value?.map(o => o.value).join('|') ?? '');
+    const searchRef = React.useRef(null);
+    const debouncedOnSearchChange = useDebouncedCallback((text) => onSearchChange?.(text), 500);
+    const selectedIndexByValue = useMemo(() => {
+        const map = new Map();
+        selected.forEach((o, i) => map.set(o.value, i));
+        return map;
+    }, [selected]);
+    const hasExactLabel = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return true;
+        return options.some(o => o.label.toLowerCase() === q) || selected.some(o => o.label.toLowerCase() === q);
+    }, [options, selected, query]);
+    const filteredOptions = useMemo(() => {
+        const base = options ?? [];
+        const filtered = disabledFilterSearch || query.trim().length === 0
+            ? base
+            : base.filter(o => o.label.toLowerCase().includes(query.toLowerCase()));
+        if (isMulti && isAutocompleteOptionWithGroup(filtered[0]))
+            return filtered;
+        const selInList = filtered.filter(o => selectedIndexByValue.has(o.value));
+        const diff = filtered.filter(o => !selectedIndexByValue.has(o.value));
+        return [...selInList, ...diff];
+    }, [options, query, disabledFilterSearch, selectedIndexByValue, isMulti]);
+    const byValue = (arr) => {
+        const map = new Map();
+        arr.forEach(o => map.set(o.value, o));
+        return map;
+    };
+    const makeMeta = (prev, next) => {
+        const prevMap = byValue(prev);
+        const nextMap = byValue(next);
+        const added = next.filter(o => !prevMap.has(o.value));
+        const removed = prev.filter(o => !nextMap.has(o.value));
+        const created = added.filter(o => o.__created);
+        return { added, removed, created };
+    };
+    const commit = (next) => {
+        setSelected(next);
+        const meta = makeMeta(selected, next);
+        onChange?.(next, meta);
+    };
+    const toggleOption = (opt) => {
+        if (!isMulti) {
+            commit([opt]);
+            setOpen(false);
+            return;
+        }
+        const exists = selectedIndexByValue.has(opt.value);
+        const next = exists ? selected.filter(o => o.value !== opt.value) : [...selected, opt];
+        commit(next);
+    };
+    const onPressInput = () => {
+        if (disabled)
+            return;
+        setQuery('');
+        setOpen(true);
+        if (autoFocus)
+            setTimeout(() => searchRef.current?.focus(), 250);
+    };
+    const handleSearchChange = (text) => {
+        setQuery(text);
+        debouncedOnSearchChange(text);
+    };
+    const handleCreateFromQuery = () => {
+        const label = query.trim();
+        if (!label)
+            return;
+        const created = {
+            value: createOptionValue(label),
+            label,
+            __created: true,
+        };
+        const next = isMulti ? [...selected, created] : [created];
+        commit(next);
+        onCreateOption?.(created);
+        if (!isMulti)
+            setOpen(false);
+        setQuery('');
+    };
+    const { width } = useWindowDimensions();
+    const renderChipConstrained = (opt) => (_jsx(AutocompleteChip, { isMulti: isMulti, label: opt.label, onToggle: () => toggleOption(opt), maxWidth: Math.round(width * 0.65) }, opt.value));
+    const currentValueKey = value?.map(o => o.value).join('|') ?? '';
+    if (syncedValueKey !== currentValueKey) {
+        setSyncedValueKey(currentValueKey);
+        setSelected(value ?? []);
+    }
+    return (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Pressable, { onPress: onPressInput, disabled: disabled, style: styles.input, children: _jsxs(Box, { style: styles.inputInner, children: [selected.length === 0 ? (_jsx(Typography, { style: styles.inputPlaceholder, children: placeholder })) : (_jsx(Box, { display: "flex", flexDirection: "row", gap: '050', flexWrap: "wrap", children: selected.map(renderChipConstrained) })), _jsx(LucideIcon, { name: "ChevronDown", size: "sm", style: styles.autocompleteIcon })] }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success }), _jsx(Modal, { visible: open, animationType: "fade", transparent: true, onRequestClose: () => setOpen(false), children: _jsx(KeyboardAvoidingView, { behavior: Platform.select({ ios: 'padding', android: undefined }), style: { ...styles.modalOverlay, flex: 1, paddingTop: top }, children: _jsxs(Box, { style: { ...styles.modalContent }, children: [_jsxs(Box, { tag: "modal-header", style: styles.modalHeader, children: [_jsx(Typography, { style: styles.nativeLabel, children: label ?? 'Sélection' }), _jsx(Box, { ml: 'auto', mr: "100", children: _jsx(ButtonIcon, { icon: "Check", variant: "primary", onPress: () => setOpen(false) }) })] }), _jsx(Divider, { mt: '050', mb: '050' }), !isMulti && (_jsx(Box, { pl: "100", pr: "100", children: selected.length > 0 && (_jsxs(Box, { mt: 'auto', children: [_jsxs(Box, { display: "flex", pl: '100', flexDirection: "row", gap: '050', children: [_jsx(LucideIcon, { name: "Check", size: "md", style: { margin: 'auto' } }), _jsx(Typography, { mr: 48, mt: 4, style: styles.nativeSimpleValue, children: selected[0]?.label })] }), allowEmpty && (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", flexDirection: "row", justify: 'flex-end', mt: '050', children: _jsx(Button, { noPadding: true, title: "Effacer", size: "md", variant: "tertiary", endIcon: 'Trash', onPress: () => commit([]) }) }), disabledSearch && _jsx(Divider, { mt: '050' })] }))] })) })), !disabledSearch && (_jsx(Box, { pl: "100", pr: "100", pb: "100", children: _jsx(TextField, { ref: searchRef, label: "", value: query, onChangeText: handleSearchChange, placeholder: placeholder ?? 'Rechercher…', editable: !disabledFilterSearch }) })), allowCreate && query.trim().length > 0 && !hasExactLabel && (_jsx(Pressable, { onPress: handleCreateFromQuery, style: styles.nativeItem, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: '050', children: [_jsx(LucideIcon, { name: "Plus", size: "md" }), _jsx(Typography, { style: styles.nativeItemTextNew, children: createOptionLabel(query.trim()) })] }) })), filteredOptions.length === 0 ? (allowCreate && query.trim().length > 0 && !hasExactLabel ? null : (_jsx(Box, { pl: "100", pr: "100", children: _jsx(Typography, { children: "Aucun r\u00E9sultat" }) }))) : (_jsx(FlashList, { data: filteredOptions, keyExtractor: item => item.value, keyboardShouldPersistTaps: "handled", ItemSeparatorComponent: Divider, contentContainerStyle: { paddingBottom: bottom }, renderItem: ({ item, index }) => {
+                                    const isSelected = selectedIndexByValue.has(item.value);
+                                    const prevItem = filteredOptions[index - 1];
+                                    const showGroupHeader = isAutocompleteOptionWithGroup(item) &&
+                                        (!isAutocompleteOptionWithGroup(prevItem) || prevItem.group !== item.group);
+                                    return (_jsxs(_Fragment, { children: [showGroupHeader && _jsx(Typography, { style: styles.groupHeader, children: item.group }), _jsx(Pressable, { onPress: () => toggleOption(item), style: {
+                                                    ...styles.nativeItem,
+                                                    backgroundColor: isSelected
+                                                        ? styles.nativeItemSelected.backgroundColor
+                                                        : styles.nativeItem.backgroundColor,
+                                                }, children: _jsxs(Box, { display: "flex", flexDirection: "row", justify: "space-between", children: [_jsx(Typography, { style: styles.nativeItemText, children: item.label }), isSelected && _jsx(LucideIcon, { name: "Check", size: "sm" })] }) })] }));
+                                } }))] }) }) })] }));
+};

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

@@ -0,0 +1,224 @@
+import React from 'react';
+import { AutocompleteProps } from './Autocomplete';
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: (props: AutocompleteProps) => React.JSX.Element;
+    styleFn: () => {
+        select: {
+            lineHeight: number;
+            width: "100%";
+            borderWidth: number;
+            backgroundColor: "transparent";
+            appearance: "none";
+            fontSize: 14;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            outline: string;
+            paddingTop: number;
+            paddingBottom: number;
+            color: string;
+        };
+        inputInner: {
+            display: "flex";
+            flexDirection: "row";
+            gap: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            borderRadius: number;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: "#FFFFFF";
+            overflow: "hidden";
+            width: "100%";
+        };
+        inputContainer: {
+            width: "100%";
+        };
+        inputDisabled: {
+            borderRadius: number;
+            backgroundColor: string;
+        };
+        control: {
+            minHeight: import("@alveole/theme").Spacing;
+            flexWrap: "inherit";
+            borderColor: string;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            borderRadius: number;
+        };
+        controlDisabled: {
+            backgroundColor: string;
+        };
+        multiValue: {
+            borderRadius: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+            paddingLeft: import("@alveole/theme").Spacing;
+        };
+        multiValueDisabled: {
+            backgroundColor: "#FFFFFF";
+            borderColor: string;
+            borderWidth: number;
+            borderRadius: import("@alveole/theme").Spacing;
+            borderStyle: "solid";
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+        };
+        multiValueRemoveHover: {
+            backgroundColor: string;
+            cursor: "pointer";
+        };
+        multiValueRemoveDisabled: {
+            display: "none";
+        };
+        dropdownIndicator: {
+            color: string;
+            padding: import("@alveole/theme").Spacing;
+        };
+        dropdownIndicatorDisabled: {
+            display: "none";
+        };
+        separatorIndicator: {
+            color: string;
+        };
+        indicatorSeparatorDisabled: {
+            display: "none";
+        };
+        clearIndicator: {
+            color: string;
+            padding: import("@alveole/theme").Spacing;
+        };
+        nativeLabel: {
+            color: string;
+            fontSize: 18 | 20;
+            lineHeight: 24 | 28;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        nativeValue: {
+            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        nativeSimpleValue: {
+            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        nativeItem: {
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+        };
+        nativeItemText: {
+            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        nativeItemTextNew: {
+            color: string;
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        nativeItemSelected: {
+            backgroundColor: string;
+        };
+        input: {
+            display: "flex";
+            flexDirection: "row";
+            outline: string;
+            color: string;
+            fontFamily: string;
+            fontSize: 14;
+            minHeight: number;
+            flex: number;
+        };
+        inputPlaceholder: {
+            fontSize: 14;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            color: string;
+        };
+        autocompleteIcon: {
+            position: "absolute";
+            right: import("@alveole/theme").Spacing;
+            top: string;
+        };
+        modalOverlay: {
+            flex: number;
+            justifyContent: "flex-end";
+            backgroundColor: string;
+        };
+        modalContent: {
+            flex: number;
+            backgroundColor: "white";
+            borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            paddingTop: import("@alveole/theme").Spacing;
+        };
+        modalHeader: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "space-between";
+            alignItems: "center";
+            paddingLeft: import("@alveole/theme").Spacing;
+        };
+        groupHeader: {
+            color: string;
+            textTransform: "uppercase";
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: import("@alveole/theme").Spacing;
+            paddingRight: import("@alveole/theme").Spacing;
+            backgroundColor: string;
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        groupHeading: {
+            backgroundColor: string;
+            paddingTop: import("@alveole/theme").Spacing;
+            paddingBottom: import("@alveole/theme").Spacing;
+            color: string;
+            textTransform: "uppercase";
+            marginBottom: number;
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const SingleValue: () => React.JSX.Element;
+export declare const WithSearch: () => React.JSX.Element;
+export declare const WithGroups: () => React.JSX.Element;
+export declare const AllowCreate: () => React.JSX.Element;
+export * as Sources from './Autocomplete.stories.sources';
+//# sourceMappingURL=Autocomplete.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAiE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGlH,wBAOkB;AAUlB,eAAO,MAAM,OAAO,yBAanB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAevB,CAAC;AAEF,eAAO,MAAM,UAAU,yBA0BtB,CAAC;AAEF,eAAO,MAAM,UAAU,yBAmBtB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAcvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC"}

package/dist/ui/Autocomplete/Autocomplete.stories.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { Box } from '../../core';
+import { Autocomplete } from './Autocomplete';
+import { useStyles } from './Autocomplete.styles';
+export default {
+    title: 'Autocomplete',
+    tags: ['ui'],
+    experimental: false,
+    description: "Champ de saisie avec autocomplétion. Supporte multi-sélection, groupes, création d'options.",
+    component: Autocomplete,
+    styleFn: useStyles,
+};
+const BASE_OPTIONS = [
+    { value: '1', label: 'Élément 1' },
+    { value: '2', label: 'Élément 2 — libellé long avec beaucoup de mots' },
+    { value: '3', label: 'Élément 3' },
+    { value: '4', label: 'Élément 4' },
+    { value: '5', label: 'Élément 5' },
+];
+export const Default = () => {
+    const [values, setValues] = useState([]);
+    return (_jsx(Box, { minH: 300, children: _jsx(Autocomplete, { label: "S\u00E9lection multiple", placeholder: "Rechercher...", options: BASE_OPTIONS, value: values, onChange: setValues }) }));
+};
+export const SingleValue = () => {
+    const [values, setValues] = useState([]);
+    return (_jsx(Box, { minH: 300, children: _jsx(Autocomplete, { label: "S\u00E9lection unique", placeholder: "Choisir...", isMulti: false, autoFocus: false, options: BASE_OPTIONS, value: values, onChange: setValues }) }));
+};
+export const WithSearch = () => {
+    const [values, setValues] = useState([]);
+    const [options, setOptions] = useState([]);
+    const onSearchChange = search => {
+        setOptions(search
+            ? [
+                { value: `${search}-1`, label: `${search} — résultat 1` },
+                { value: `${search}-2`, label: `${search} — résultat 2` },
+            ]
+            : []);
+    };
+    return (_jsx(Box, { minH: 300, children: _jsx(Autocomplete, { label: "Recherche dynamique", placeholder: "Saisir pour chercher...", options: options, value: values, onChange: setValues, onSearchChange: onSearchChange, disabledFilterSearch: true }) }));
+};
+export const WithGroups = () => {
+    const [values, setValues] = React.useState([]);
+    const options = [
+        { value: 'brief-collectif', label: 'Brief collectif', group: 'Coaching' },
+        { value: 'brief-individuel', label: 'Brief individuel', group: 'Coaching' },
+        { value: 'formation-module', label: 'Formation module', group: 'Formation' },
+        { value: 'formation-externe', label: 'Formation externe', group: 'Formation' },
+    ];
+    return (_jsx(Box, { minH: 300, children: _jsx(Autocomplete, { label: "Avec groupes", placeholder: "Choisir...", options: options, value: values, onChange: v => setValues(v) }) }));
+};
+export const AllowCreate = () => {
+    const [values, setValues] = useState([]);
+    return (_jsx(Box, { minH: 300, children: _jsx(Autocomplete, { label: "Avec cr\u00E9ation", placeholder: "Rechercher ou cr\u00E9er...", allowCreate: true, options: BASE_OPTIONS, value: values, onChange: setValues }) }));
+};
+export * as Sources from './Autocomplete.stories.sources';

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

@@ -0,0 +1,14 @@
+export declare const Default: () => string;
+export declare const SingleValue: () => string;
+export declare const WithSearch: () => string;
+export declare const WithGroups: () => string;
+export declare const AllowCreate: () => string;
+export declare const storySources: {
+    readonly Default: () => string;
+    readonly SingleValue: () => string;
+    readonly WithSearch: () => string;
+    readonly WithGroups: () => string;
+    readonly AllowCreate: () => string;
+};
+export type StorySourceName = keyof typeof storySources;
+//# sourceMappingURL=Autocomplete.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsW,CAAC;AAE3X,eAAO,MAAM,WAAW,cAAyZ,CAAC;AAElb,eAAO,MAAM,UAAU,cAA4yB,CAAC;AAEp0B,eAAO,MAAM,UAAU,cAAuxB,CAAC;AAE/yB,eAAO,MAAM,WAAW,cAAmY,CAAC;AAE5Z,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,14 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/Autocomplete/Autocomplete.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [values, setValues] = useState<AutocompleteOption[]>([]);\n  return (\n    <Box minH={300}>\n      <Autocomplete\n        label=\"Sélection multiple\"\n        placeholder=\"Rechercher...\"\n        options={BASE_OPTIONS}\n        value={values}\n        onChange={setValues}\n      />\n    </Box>\n  );\n};";
+export const SingleValue = () => "export const SingleValue = () => {\n  const [values, setValues] = useState<AutocompleteOption[]>([]);\n  return (\n    <Box minH={300}>\n      <Autocomplete\n        label=\"Sélection unique\"\n        placeholder=\"Choisir...\"\n        isMulti={false}\n        autoFocus={false}\n        options={BASE_OPTIONS}\n        value={values}\n        onChange={setValues}\n      />\n    </Box>\n  );\n};";
+export const WithSearch = () => "export const WithSearch = () => {\n  const [values, setValues] = useState<AutocompleteOption[]>([]);\n  const [options, setOptions] = useState<AutocompleteOption[]>([]);\n  const onSearchChange: AutocompleteProps['onSearchChange'] = search => {\n    setOptions(\n      search\n        ? [\n            { value: `${search}-1`, label: `${search} — résultat 1` },\n            { value: `${search}-2`, label: `${search} — résultat 2` },\n          ]\n        : [],\n    );\n  };\n  return (\n    <Box minH={300}>\n      <Autocomplete\n        label=\"Recherche dynamique\"\n        placeholder=\"Saisir pour chercher...\"\n        options={options}\n        value={values}\n        onChange={setValues}\n        onSearchChange={onSearchChange}\n        disabledFilterSearch\n      />\n    </Box>\n  );\n};";
+export const WithGroups = () => "export const WithGroups = () => {\n  const [values, setValues] = React.useState<AutocompleteOptionWithGroup[]>([]);\n  const options: AutocompleteOptionWithGroup[] = [\n    { value: 'brief-collectif', label: 'Brief collectif', group: 'Coaching' },\n    { value: 'brief-individuel', label: 'Brief individuel', group: 'Coaching' },\n    { value: 'formation-module', label: 'Formation module', group: 'Formation' },\n    { value: 'formation-externe', label: 'Formation externe', group: 'Formation' },\n  ];\n  return (\n    <Box minH={300}>\n      <Autocomplete\n        label=\"Avec groupes\"\n        placeholder=\"Choisir...\"\n        options={options}\n        value={values}\n        onChange={v => setValues(v as AutocompleteOptionWithGroup[])}\n      />\n    </Box>\n  );\n};";
+export const AllowCreate = () => "export const AllowCreate = () => {\n  const [values, setValues] = useState<AutocompleteOption[]>([]);\n  return (\n    <Box minH={300}>\n      <Autocomplete\n        label=\"Avec création\"\n        placeholder=\"Rechercher ou créer...\"\n        allowCreate\n        options={BASE_OPTIONS}\n        value={values}\n        onChange={setValues}\n      />\n    </Box>\n  );\n};";
+export const storySources = {
+    Default,
+    SingleValue,
+    WithSearch,
+    WithGroups,
+    AllowCreate,
+};

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

@@ -0,0 +1,208 @@
+export declare const useStyles: () => {
+    select: {
+        lineHeight: number;
+        width: "100%";
+        borderWidth: number;
+        backgroundColor: "transparent";
+        appearance: "none";
+        fontSize: 14;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        outline: string;
+        paddingTop: number;
+        paddingBottom: number;
+        color: string;
+    };
+    inputInner: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: "#FFFFFF";
+        overflow: "hidden";
+        width: "100%";
+    };
+    inputContainer: {
+        width: "100%";
+    };
+    inputDisabled: {
+        borderRadius: number;
+        backgroundColor: string;
+    };
+    control: {
+        minHeight: import("@alveole/theme").Spacing;
+        flexWrap: "inherit";
+        borderColor: string;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        borderRadius: number;
+    };
+    controlDisabled: {
+        backgroundColor: string;
+    };
+    multiValue: {
+        borderRadius: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+        paddingLeft: import("@alveole/theme").Spacing;
+    };
+    multiValueDisabled: {
+        backgroundColor: "#FFFFFF";
+        borderColor: string;
+        borderWidth: number;
+        borderRadius: import("@alveole/theme").Spacing;
+        borderStyle: "solid";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+    };
+    multiValueRemoveHover: {
+        backgroundColor: string;
+        cursor: "pointer";
+    };
+    multiValueRemoveDisabled: {
+        display: "none";
+    };
+    dropdownIndicator: {
+        color: string;
+        padding: import("@alveole/theme").Spacing;
+    };
+    dropdownIndicatorDisabled: {
+        display: "none";
+    };
+    separatorIndicator: {
+        color: string;
+    };
+    indicatorSeparatorDisabled: {
+        display: "none";
+    };
+    clearIndicator: {
+        color: string;
+        padding: import("@alveole/theme").Spacing;
+    };
+    nativeLabel: {
+        color: string;
+        fontSize: 18 | 20;
+        lineHeight: 24 | 28;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    nativeValue: {
+        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    nativeSimpleValue: {
+        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    nativeItem: {
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+    };
+    nativeItemText: {
+        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    nativeItemTextNew: {
+        color: string;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    nativeItemSelected: {
+        backgroundColor: string;
+    };
+    input: {
+        display: "flex";
+        flexDirection: "row";
+        outline: string;
+        color: string;
+        fontFamily: string;
+        fontSize: 14;
+        minHeight: number;
+        flex: number;
+    };
+    inputPlaceholder: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        color: string;
+    };
+    autocompleteIcon: {
+        position: "absolute";
+        right: import("@alveole/theme").Spacing;
+        top: string;
+    };
+    modalOverlay: {
+        flex: number;
+        justifyContent: "flex-end";
+        backgroundColor: string;
+    };
+    modalContent: {
+        flex: number;
+        backgroundColor: "white";
+        borderTopLeftRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderTopRightRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        paddingTop: import("@alveole/theme").Spacing;
+    };
+    modalHeader: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        paddingLeft: import("@alveole/theme").Spacing;
+    };
+    groupHeader: {
+        color: string;
+        textTransform: "uppercase";
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        backgroundColor: string;
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    groupHeading: {
+        backgroundColor: string;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        color: string;
+        textTransform: "uppercase";
+        marginBottom: number;
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+};
+//# sourceMappingURL=Autocomplete.styles.d.ts.map

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

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