@alveole/components 1.8.2 → 1.8.4

package/dist/generated/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ALVEOLE_COMPONENTS_VERSION: "1.8.2";
+export declare const ALVEOLE_COMPONENTS_VERSION: "1.8.4";
 //# sourceMappingURL=version.d.ts.map

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "1.8.2";
+export const ALVEOLE_COMPONENTS_VERSION = "1.8.4";

package/dist/ui/Autocomplete/Autocomplete.js

@@ -116,7 +116,7 @@ export const Autocomplete = (props) => {
         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 }) => {
+    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) &&

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

@@ -77,18 +77,9 @@ declare const _default: {
             display: "none";
         };
         dropdownIndicator: {
-            color: string;
             padding: string | number;
         };
-        dropdownIndicatorDisabled: {
-            display: "none";
-        };
-        separatorIndicator: {
-            color: string;
-        };
-        indicatorSeparatorDisabled: {
-            display: "none";
-        };
+        dropdownIndicatorDisabled: {};
         clearIndicator: {
             color: string;
             padding: string | number;
@@ -165,6 +156,7 @@ declare const _default: {
             position: "absolute";
             right: string | number;
             top: string;
+            color: string;
         };
         modalOverlay: {
             flex: number;

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

@@ -1 +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"}
+{"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.styles.d.ts

@@ -69,18 +69,9 @@ export declare const useStyles: () => {
         display: "none";
     };
     dropdownIndicator: {
-        color: string;
         padding: string | number;
     };
-    dropdownIndicatorDisabled: {
-        display: "none";
-    };
-    separatorIndicator: {
-        color: string;
-    };
-    indicatorSeparatorDisabled: {
-        display: "none";
-    };
+    dropdownIndicatorDisabled: {};
     clearIndicator: {
         color: string;
         padding: string | number;
@@ -157,6 +148,7 @@ export declare const useStyles: () => {
         position: "absolute";
         right: string | number;
         top: string;
+        color: string;
     };
     modalOverlay: {
         flex: number;

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

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

package/dist/ui/Autocomplete/Autocomplete.styles.js

@@ -67,18 +67,9 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
         display: 'none',
     },
     dropdownIndicator: {
-        color: color.text['default-grey'],
         padding: spacing('025'),
     },
-    dropdownIndicatorDisabled: {
-        display: 'none',
-    },
-    separatorIndicator: {
-        color: color.text['default-grey'],
-    },
-    indicatorSeparatorDisabled: {
-        display: 'none',
-    },
+    dropdownIndicatorDisabled: {},
     clearIndicator: {
         color: color.text['default-grey'],
         padding: spacing('025'),
@@ -131,6 +122,7 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
         position: 'absolute',
         right: spacing('100'),
         top: '50%',
+        color: color.light.text['default-grey'],
     },
     modalOverlay: {
         flex: 1,

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.web.tsx"],"names":[],"mappings":"AASA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAqB,MAAM,gBAAgB,CAAC;AAGvE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;iDAmDnB,CAAF;;;;;;;;;;6BA0GF,CAAC"}
+{"version":3,"file":"Autocomplete.web.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/Autocomplete.web.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAqB,MAAM,gBAAgB,CAAC;AAGvE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;iDAkDnB,CAAH;;;;;;;;;;6BAgID,CAAC"}

package/dist/ui/Autocomplete/Autocomplete.web.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, LucideIcon, } from '@alveole/components';
 import { useTheme } from '@alveole/theme';
 import React, { useEffect, useMemo, useState } from 'react';
-import ReactSelect from 'react-select';
+import ReactSelect, { components } from 'react-select';
 import { useStyles } from './Autocomplete.styles';
 export const Autocomplete = React.forwardRef(function Select(props, ref) {
     const { value, disabledFilterSearch, label, labelRight, hint, error, success, placeholder, disabled, isMulti, isSearchable, onChange, onSearchChange, } = props;
@@ -36,6 +36,10 @@ export const Autocomplete = React.forwardRef(function Select(props, ref) {
             ...s,
             ...styles.control,
             ...(p.isDisabled ? styles.controlDisabled : {}),
+            boxShadow: 'none',
+            outline: p.isFocused ? `2px solid ${color.light.system.focus}` : 'none',
+            outlineOffset: 2,
+            ':hover': { borderColor: styles.control.borderColor },
         }),
         multiValue: (s, p) => ({
             ...s,
@@ -56,13 +60,13 @@ export const Autocomplete = React.forwardRef(function Select(props, ref) {
             ...styles.dropdownIndicator,
             ...(p.isDisabled ? styles.dropdownIndicatorDisabled : {}),
         }),
-        indicatorSeparator: (s, p) => ({
+        indicatorSeparator: () => ({ display: 'none' }),
+        placeholder: s => ({ ...s, color: color.light.text['mention-grey'] }),
+        clearIndicator: s => ({ ...s, ...styles.clearIndicator }),
+        valueContainer: s => ({
             ...s,
-            ...styles.separatorIndicator,
-            ...(p.isDisabled ? styles.indicatorSeparatorDisabled : {}),
+            ...(isMulti !== false ? { padding: '0 8px' } : {}),
         }),
-        clearIndicator: s => ({ ...s, ...styles.clearIndicator }),
-        valueContainer: s => ({ ...s }),
         group: s => ({ ...s, paddingTop: 0, paddingBottom: 0 }),
         groupHeading: () => ({
             backgroundColor: color.light.background['disabled-grey'],
@@ -75,6 +79,8 @@ export const Autocomplete = React.forwardRef(function Select(props, ref) {
             letterSpacing: 0.5,
         }),
     };
+    const MultiValueRemove = (props) => (_jsx(components.MultiValueRemove, { ...props, children: _jsx(LucideIcon, { name: "X", size: "xs", color: color.light.text['default-grey'] }) }));
+    const DropdownIndicator = (props) => (_jsx(components.DropdownIndicator, { ...props, children: _jsx(LucideIcon, { name: "ChevronDown", size: "sm", color: props.isDisabled ? color.light.text['disabled-grey'] : color.light.text['default-grey'] }) }));
     const clearValues = () => {
         setSelectedOptions([]);
         onChange?.([]);
@@ -101,12 +107,12 @@ export const Autocomplete = React.forwardRef(function Select(props, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [searchValue]);
-    return (_jsxs(FormControl, { style: styles.select, 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(Box, { tag: "form-control-select-input", style: styles.inputContainer, children: _jsx(Box, { style: { ...(disabled ? styles.inputDisabled : {}) }, children: _jsx(ReactSelect, { ref: ref, value: selectedOptions, styles: selectStyles, isMulti: true, placeholder: placeholder, options: options, filterOption: disabledFilterSearch ? () => true : undefined, isSearchable: isSearchable, onInputChange: inputValue => setSearchValue(inputValue), noOptionsMessage: () => 'Aucun résultat', onChange: options => {
+    return (_jsxs(FormControl, { style: styles.select, 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(Box, { tag: "form-control-select-input", style: styles.inputContainer, children: _jsx(Box, { style: { ...(disabled ? styles.inputDisabled : {}) }, children: _jsx(ReactSelect, { ref: ref, value: selectedOptions, styles: selectStyles, isMulti: true, placeholder: placeholder, options: options, filterOption: disabledFilterSearch ? () => true : undefined, isSearchable: isSearchable, onInputChange: inputValue => setSearchValue(inputValue), noOptionsMessage: () => 'Aucun résultat', onChange: options => {
                             const lastOption = Array.isArray(options) ? options[options.length - 1] : undefined;
                             if (isMulti === false && lastOption)
                                 return onSingleChange(lastOption);
                             if (Array.isArray(options))
                                 return onMultiChange(options);
                             return clearValues();
-                        }, isDisabled: disabled }) }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+                        }, isDisabled: disabled, components: { DropdownIndicator, MultiValueRemove } }) }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/Checkbox/Checkbox.js

@@ -13,5 +13,5 @@ export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     const styles = useStyles();
     const uniqId = useId();
     const id = `checkbox--${variant}--${uniqId}`;
-    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacingValue('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(Box, { tag: "check-box-container", gap: error || success ? spacingValue('050') : 0, style: styles.checkboxContainer, children: [_jsxs(Box, { tag: "check-box", style: styles.container, children: [_jsx(CheckboxContainer, { id: id, ref: ref, ...props, children: _jsx(CheckboxIndicator, { ...baseProps, indeterminate: props.checked === 'indeterminate' }) }), !!label && _jsx(CheckboxLabel, { htmlFor: id, ...baseProps })] }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/DateInput/DateInput.ios.js

@@ -41,5 +41,5 @@ export const DateInput = React.forwardRef(function DateInput(props, ref) {
         }
         return '';
     }, [type]);
-    return (_jsxs(Box, { tag: "date-input", onPress: handleOpen, children: [_jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: handleValidate, children: _jsx(Box, { style: { marginTop: 'auto' }, children: _jsx(DateTimePicker, { value: toDate(date), mode: type === 'month' ? 'date' : type, locale: 'fr', maximumDate: maximumDate, minimumDate: minimumDate, is24Hour: is24Hour, minuteInterval: minuteInterval, themeVariant: "light", display: Platform.OS === 'ios' ? 'spinner' : 'default', onChange: handleChange }) }) }), _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(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...inputProps, caretHidden: true, inputMode: "none", onPress: handleOpen, readOnly: true }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] })] }));
+    return (_jsxs(Box, { tag: "date-input", onPress: handleOpen, children: [_jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: handleValidate, children: _jsx(Box, { style: { marginTop: 'auto' }, children: _jsx(DateTimePicker, { value: toDate(date), mode: type === 'month' ? 'date' : type, locale: 'fr', maximumDate: maximumDate, minimumDate: minimumDate, is24Hour: is24Hour, minuteInterval: minuteInterval, themeVariant: "light", display: Platform.OS === 'ios' ? 'spinner' : 'default', onChange: handleChange }) }) }), _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(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...inputProps, caretHidden: true, inputMode: "none", onPress: handleOpen, readOnly: true }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] })] }));
 });

package/dist/ui/DateInput/DateInput.js

@@ -66,5 +66,5 @@ export const DateInput = React.forwardRef(function DateInput({ label, labelRight
             return 'JJ/MM/AAAA';
         return displayDate(selectedDate, { format: DateFormats.DateSlash });
     }, [selectedDate, type]);
-    return (_jsx(Box, { tag: "date-input", onPress: handleOpen, children: _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(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...props, readOnly: true, onPress: handleOpen, caretHidden: true, inputMode: "none" }), showPicker && (_jsx(DateTimePicker, { value: selectedDate, mode: mode, locale: 'fr', display: display ?? 'default', maximumDate: maximumDate, minimumDate: minimumDate, onChange: handleChange, is24Hour: is24Hour, minuteInterval: minuteInterval })), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
+    return (_jsx(Box, { tag: "date-input", onPress: handleOpen, children: _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(TextInput, { ref: ref, placeholder: "JJ/MM/AAAA", value: displayValue(value), ...props, readOnly: true, onPress: handleOpen, caretHidden: true, inputMode: "none" }), !!showPicker && (_jsx(DateTimePicker, { value: selectedDate, mode: mode, locale: 'fr', display: display ?? 'default', maximumDate: maximumDate, minimumDate: minimumDate, onChange: handleChange, is24Hour: is24Hour, minuteInterval: minuteInterval })), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
 });

package/dist/ui/DateInput/DateInput.web.js

@@ -5,5 +5,5 @@ import { useStyles } from './DateInput.styles';
 export const DateInput = React.forwardRef(function DateInput(props, ref) {
     const { label, hint, disabled, error, success } = props;
     const styles = useStyles();
-    return (_jsxs(FormControl, { style: styles.dateInput, children: [_jsxs(InputHeading, { children: [label && _jsx(FormControlLabel, { label: label, disabled: disabled, error: error, success: success }), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(FormControlDateInput, { ref: ref, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(FormControl, { style: styles.dateInput, children: [_jsxs(InputHeading, { children: [!!label && _jsx(FormControlLabel, { label: label, disabled: disabled, error: error, success: success }), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(FormControlDateInput, { ref: ref, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/DurationInput/DurationInput.js

@@ -18,5 +18,5 @@ export const DurationInput = React.forwardRef(function DurationInput({ label, la
         onChange?.(localValue);
         onBlur?.();
     };
-    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(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, inputMode: "numeric", maxLength: 5 }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    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(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, inputMode: "numeric", maxLength: 5 }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/EmailField/EmailField.js

@@ -4,5 +4,5 @@ import React from 'react';
 import { EmailInput } from '../EmailInput';
 export const EmailField = React.forwardRef(function EmailField(props, ref) {
     const { label, labelRight, hint, error, success, disabled, onChange } = props;
-    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(EmailInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    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(EmailInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/FileField/FileField.js

@@ -23,5 +23,5 @@ export const FileField = (props) => {
             });
         }
     };
-    return (_jsxs(FormControl, { style: styles.fileInput, 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(FormControlFileInput, { ...props, onChange: onValueChange }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(FormControl, { style: styles.fileInput, 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(FormControlFileInput, { ...props, onChange: onValueChange }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 };

package/dist/ui/FormControl/FormControlDateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControlDateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlDateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,CAAC;AAC3D,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAaF,eAAO,MAAM,oBAAoB,oGA6ChC,CAAC"}
+{"version":3,"file":"FormControlDateInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlDateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,CAAC;AAC3D,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAaF,eAAO,MAAM,oBAAoB,oGAwDhC,CAAC"}

package/dist/ui/FormControl/FormControlDateInput.js

@@ -18,6 +18,15 @@ function formatForInput(value, type) {
 export const FormControlDateInput = React.forwardRef(function DateInput(props, ref) {
     const { value, type, onChange, ...inputProps } = props;
     const styles = useStyles();
+    const [focus, setFocus] = React.useState(false);
+    const handleFocus = () => {
+        if (!props.disabled && !props.readOnly)
+            setFocus(true);
+    };
+    const handleBlur = () => {
+        if (!props.disabled && !props.readOnly)
+            setFocus(false);
+    };
     const parsed = React.useMemo(() => {
         if (value == null)
             return value;
@@ -34,13 +43,14 @@ export const FormControlDateInput = React.forwardRef(function DateInput(props, r
             return formatForInput(value, 'month');
         return value;
     }, [type, value]);
-    return (_jsx(Box, { tag: "form-control-text-input", style: styles.inputContainer, children: _jsx(Box, { tag: "form-control-text-input-inner", style: {
+    return (_jsx(Box, { tag: "form-control-date-input", style: styles.inputContainer, children: _jsx(Box, { tag: "form-control-date-input-inner", style: {
                 ...styles.inputInner,
                 ...(props.disabled ? styles.inputDisabled : {}),
+                ...(focus ? styles.inputFocused : {}),
             }, children: _jsx("input", { ref: ref, onChange: e => {
                     const newDate = e.target.value;
                     if (type === 'month')
                         return onChange?.(newDate + '-01');
                     return onChange?.(newDate);
-                }, autoComplete: undefined, style: { ...styles.input, ...styles.inputWeb }, type: type === 'datetime' ? 'datetime-local' : (type ?? 'date'), ...inputProps, value: parsed }) }) }));
+                }, autoComplete: undefined, style: { ...styles.input, ...styles.inputWeb }, type: type === 'datetime' ? 'datetime-local' : (type ?? 'date'), ...inputProps, value: parsed, onFocus: handleFocus, onBlur: handleBlur }) }) }));
 });

package/dist/ui/FormControl/FormControlHint.js

@@ -4,5 +4,5 @@ import { useStyles } from './FormControl.styles';
 export const FormControlHint = (props) => {
     const { hint, disabled } = props;
     const styles = useStyles();
-    return (_jsx(Box, { style: styles.hintContainer, children: _jsx(Typography, { style: { ...styles.hint, ...(disabled ? styles.hintDisabled : {}) }, children: hint }) }));
+    return (_jsx(Box, { tag: "form-control-hint", style: styles.hintContainer, children: _jsx(Typography, { style: { ...styles.hint, ...(disabled ? styles.hintDisabled : {}) }, children: hint }) }));
 };

package/dist/ui/FormControl/FormControlLabel.js

@@ -4,10 +4,10 @@ import { useStyles } from './FormControl.styles';
 export const FormControlLabel = (props) => {
     const { label, labelRight, optional = false, optionalText = '(optionnel)', disabled, error, success } = props;
     const styles = useStyles();
-    return (_jsxs(Box, { style: styles.labelContainer, children: [_jsx(Typography, { style: {
+    return (_jsxs(Box, { tag: "form-control-label", style: styles.labelContainer, children: [_jsx(Typography, { style: {
                     ...styles.label,
                     ...(error ? styles.errorText : {}),
                     ...(success ? styles.successText : {}),
                     ...(disabled ? styles.labelDisabled : {}),
-                }, children: label }), optional && _jsx(Typography, { style: styles.optionalText, children: optionalText }), label && (_jsx(Box, { mt: 'auto', mb: 'auto', ml: 'auto', children: labelRight }))] }));
+                }, children: label }), !!optional && _jsx(Typography, { style: styles.optionalText, children: optionalText }), !!label && (_jsx(Box, { mt: 'auto', mb: 'auto', ml: 'auto', children: labelRight }))] }));
 };

package/dist/ui/FormControl/FormControlNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControlNumberInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlNumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,6BAA6B,GAAG,gBAAgB,CAAC;AAC7D,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,sGAyClC,CAAC"}
+{"version":3,"file":"FormControlNumberInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlNumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,6BAA6B,GAAG,gBAAgB,CAAC;AAC7D,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,sGAoDlC,CAAC"}

package/dist/ui/FormControl/FormControlNumberInput.js

@@ -5,9 +5,19 @@ import { useStyles } from './FormControl.styles';
 export const FormControlNumberInput = React.forwardRef(function DateInput(props, ref) {
     const { value, onChange, startAdornment, endAdornment, ...inputProps } = props;
     const styles = useStyles();
-    return (_jsx(Box, { tag: "form-control-text-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-text-input-inner", style: {
+    const [focus, setFocus] = React.useState(false);
+    const handleFocus = () => {
+        if (!props.disabled && !props.readOnly)
+            setFocus(true);
+    };
+    const handleBlur = () => {
+        if (!props.disabled && !props.readOnly)
+            setFocus(false);
+    };
+    return (_jsx(Box, { tag: "form-control-number-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-number-input-inner", style: {
                 ...styles.inputInner,
                 ...(props.disabled ? styles.inputDisabled : {}),
+                ...(focus ? styles.inputFocused : {}),
                 ...(endAdornment ? { paddingRight: 0 } : {}),
                 ...(startAdornment ? { paddingLeft: 0 } : {}),
             }, children: [startAdornment, _jsx("input", { ref: ref, value: value ?? '', onChange: e => {
@@ -18,5 +28,5 @@ export const FormControlNumberInput = React.forwardRef(function DateInput(props,
                         ...styles.inputWeb,
                         ...(endAdornment && startAdornment ? { textAlign: 'center' } : {}),
                         ...(endAdornment ? { minWidth: 0 } : {}),
-                    }, ...inputProps }), endAdornment] }) }));
+                    }, ...inputProps, onFocus: handleFocus, onBlur: handleBlur }), endAdornment] }) }));
 });

package/dist/ui/NumberField/NumberField.js

@@ -7,7 +7,7 @@ export const NumberField = React.forwardRef(function NumberField(props, ref) {
     const { value, label, labelRight, hint, error, success, disabled, onChange } = props;
     const { value: _v, onChange: _e, ...inputProps } = props;
     const styles = useStyles();
-    return (_jsxs(FormControl, { style: styles.textInput, 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(TextInput, { ref: ref, ...inputProps, startAdornment: props.controlButton ? (_jsx(NumberFieldControlButton, { action: "moins", step: props.step, disabled: value === 0 || (props.min != null && props.min === value), onPress: add => onChange?.((value ?? 0) + add) })) : (props.startAdornment), endAdornment: props.controlButton ? (_jsx(NumberFieldControlButton, { action: "plus", step: props.step, onPress: add => onChange?.((value ?? 0) + add) })) : (props.endAdornment), value: value ? String(value) : '0', onChangeText: e => {
+    return (_jsxs(FormControl, { style: styles.textInput, 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(TextInput, { ref: ref, ...inputProps, startAdornment: props.controlButton ? (_jsx(NumberFieldControlButton, { action: "moins", step: props.step, disabled: value === 0 || (props.min != null && props.min === value), onPress: add => onChange?.((value ?? 0) + add) })) : (props.startAdornment), endAdornment: props.controlButton ? (_jsx(NumberFieldControlButton, { action: "plus", step: props.step, onPress: add => onChange?.((value ?? 0) + add) })) : (props.endAdornment), value: value ? String(value) : '0', onChangeText: e => {
                     onChange?.(e === '' ? 0 : Number(e));
                 }, keyboardType: 'number-pad', inputMode: 'numeric' }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/NumberField/NumberField.web.js

@@ -6,5 +6,5 @@ import { NumberFieldControlButton } from './NumberFieldControlButton';
 export const NumberField = React.forwardRef(function NumberField(props, ref) {
     const { label, labelRight, hint, error, success, disabled, onChange } = props;
     const styles = useStyles();
-    return (_jsxs(FormControl, { style: styles.textInput, 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(FormControlNumberInput, { ref: ref, onChange: onChange, ...props, startAdornment: props.controlButton ? (_jsx(NumberFieldControlButton, { action: "moins", step: props.step, disabled: props.value === 0 || (props.min != null && props.min === props.value), onPress: add => onChange?.((props.value ?? 0) + add) })) : (props.startAdornment), endAdornment: props.controlButton ? (_jsx(NumberFieldControlButton, { action: "plus", step: props.step, onPress: add => onChange?.((props.value ?? 0) + add) })) : (props.endAdornment) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(FormControl, { style: styles.textInput, 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(FormControlNumberInput, { ref: ref, onChange: onChange, ...props, startAdornment: props.controlButton ? (_jsx(NumberFieldControlButton, { action: "moins", step: props.step, disabled: props.value === 0 || (props.min != null && props.min === props.value), onPress: add => onChange?.((props.value ?? 0) + add) })) : (props.startAdornment), endAdornment: props.controlButton ? (_jsx(NumberFieldControlButton, { action: "plus", step: props.step, onPress: add => onChange?.((props.value ?? 0) + add) })) : (props.endAdornment) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/OtpField/OtpField.js

@@ -5,7 +5,7 @@ import { useStyles } from './OtpField.styles';
 export const OtpField = React.forwardRef(function OtpField(props, ref) {
     const { label, labelRight, hint, error, success, disabled, onChange } = props;
     const styles = useStyles();
-    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(FormControlOtpInput, { ref: ref, theme: {
+    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(FormControlOtpInput, { ref: ref, theme: {
                     containerStyle: styles.containerStyle,
                     pinCodeContainerStyle: {
                         ...styles.pinCodeContainerStyle,

package/dist/ui/PasswordField/PasswordField.js

@@ -6,5 +6,5 @@ export const PasswordField = React.forwardRef(function PasswordField(props, ref)
     const { label, labelRight, hint, error, success, disabled, onChange } = props;
     const styles = useStyles();
     const [visibilityOff, setVisibilityOff] = React.useState(true);
-    return (_jsxs(FormControl, { style: styles.passwordInput, children: [label && (_jsx(FormControlLabel, { label: label, labelRight: labelRight, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled }), _jsx(TextInput, { ref: ref, secureTextEntry: visibilityOff, endAdornment: _jsx(ButtonIcon, { size: "sm", variant: "tertiary", style: styles.visibilityButton, icon: visibilityOff ? 'EyeClosed' : 'Eye', onPress: () => setVisibilityOff(initial => !initial) }), onChangeText: onChange, textContentType: "password", autoComplete: "password", autoCapitalize: "none", inputMode: "text", ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(FormControl, { style: styles.passwordInput, children: [!!label && (_jsx(FormControlLabel, { label: label, labelRight: labelRight, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled }), _jsx(TextInput, { ref: ref, secureTextEntry: visibilityOff, endAdornment: _jsx(ButtonIcon, { size: "sm", variant: "tertiary", style: styles.visibilityButton, icon: visibilityOff ? 'EyeClosed' : 'Eye', onPress: () => setVisibilityOff(initial => !initial) }), onChangeText: onChange, textContentType: "password", autoComplete: "password", autoCapitalize: "none", inputMode: "text", ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/PhoneField/PhoneField.js

@@ -4,5 +4,5 @@ import React from 'react';
 import { PhoneInput } from '../PhoneInput';
 export const PhoneField = React.forwardRef(function PhoneField(props, ref) {
     const { label, labelRight, hint, error, success, disabled, onChange } = props;
-    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(PhoneInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    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(PhoneInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/RadioGroup/RadioGroup.js

@@ -7,5 +7,5 @@ import { RadioGroupContext } from './RadioGroupContext';
 export const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
     const { children, value, label, labelRight, hint, error, success, disabled, onChange, variant = 'default', ...groupProps } = props;
     const styles = useStyles();
-    return (_jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: _jsxs(Box, { tag: "radio-group", style: styles.container, children: [_jsxs(Box, { tag: "radio-group-heading", children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Box, { width: '100%', children: _jsx(TamaguiRadioGroup, { orientation: "vertical", ref: ref, value: value, onValueChange: onChange, style: [styles.group, variant === 'card' ? styles.groupCard : styles.groupItem], width: "100%", ...groupProps, minWidth: '100%', children: children }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
+    return (_jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: _jsxs(Box, { tag: "radio-group", style: styles.container, children: [_jsxs(Box, { tag: "radio-group-heading", children: [!!label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), !!hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(Box, { width: '100%', children: _jsx(TamaguiRadioGroup, { orientation: "vertical", ref: ref, value: value, onValueChange: onChange, style: [styles.group, variant === 'card' ? styles.groupCard : styles.groupItem], width: "100%", ...groupProps, minWidth: '100%', children: children }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
 });

package/dist/ui/Select/Select.js

@@ -18,7 +18,7 @@ export const Select = React.forwardRef(function Select(props, ref) {
             setFocus(false);
         onBlur?.(e);
     };
-    return (_jsxs(FormControl, { style: styles.pickerContainer, 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(Box, { tag: "form-control-text-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-text-input-inner", style: {
+    return (_jsxs(FormControl, { style: styles.pickerContainer, 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(Box, { tag: "form-control-text-input", style: styles.inputContainer, children: _jsxs(Box, { tag: "form-control-text-input-inner", style: {
                         ...styles.inputInner,
                         ...(disabled ? styles.inputDisabled : {}),
                         ...(focus ? styles.inputFocused : {}),

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

@@ -59,12 +59,6 @@ declare const _default: {
         dropdownIndicator: {
             padding: string | number;
         };
-        dropdownIndicatorDisabled: {
-            display: "none";
-        };
-        indicatorSeparatorDisabled: {
-            display: "none";
-        };
         clearIndicator: {
             padding: string | number;
         };

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMultiple.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/SelectMultiple/SelectMultiple.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AASlB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAMlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}
+{"version":3,"file":"SelectMultiple.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/SelectMultiple/SelectMultiple.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AASlB,eAAO,MAAM,OAAO,mCAOnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAMlB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}

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

@@ -53,12 +53,6 @@ export declare const useStyles: () => {
     dropdownIndicator: {
         padding: string | number;
     };
-    dropdownIndicatorDisabled: {
-        display: "none";
-    };
-    indicatorSeparatorDisabled: {
-        display: "none";
-    };
     clearIndicator: {
         padding: string | number;
     };

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

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

package/dist/ui/SelectMultiple/SelectMultiple.styles.js

@@ -54,12 +54,6 @@ export const useStyles = makeStyles(({ color, spacing }) => ({
     dropdownIndicator: {
         padding: spacing('025'),
     },
-    dropdownIndicatorDisabled: {
-        display: 'none',
-    },
-    indicatorSeparatorDisabled: {
-        display: 'none',
-    },
     clearIndicator: {
         padding: spacing('025'),
     },

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

@@ -1 +1 @@
-{"version":3,"file":"SelectMultiple.web.d.ts","sourceRoot":"","sources":["../../../src/ui/SelectMultiple/SelectMultiple.web.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,oBAAoB,EAAuB,MAAM,kBAAkB,CAAC;AAGlF,eAAO,MAAM,cAAc;;;;;;;;;;;;6BA4EzB,CAAC"}
+{"version":3,"file":"SelectMultiple.web.d.ts","sourceRoot":"","sources":["../../../src/ui/SelectMultiple/SelectMultiple.web.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,oBAAoB,EAAuB,MAAM,kBAAkB,CAAC;AAGlF,eAAO,MAAM,cAAc;;;;;;;;;;;;6BA6FzB,CAAC"}

package/dist/ui/SelectMultiple/SelectMultiple.web.js

@@ -1,21 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, LucideIcon, } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
 import React from 'react';
-import ReactSelect from 'react-select';
+import ReactSelect, { components } from 'react-select';
 import { useStyles } from './SelectMultiple.styles';
 export const SelectMultiple = React.forwardRef(function SelectMultiple(props, ref) {
     const { value, label, labelRight, hint, error, success, placeholder = '', disabled, options, onChange } = props;
     const styles = useStyles();
+    const { color } = useTheme();
     const selectStyles = {
         control: (s, p) => ({
             ...s,
             ...styles.control,
             ...(p.isDisabled ? styles.controlDisabled : {}),
+            boxShadow: 'none',
+            outline: p.isFocused ? `2px solid ${color.light.system.focus}` : 'none',
+            outlineOffset: 2,
+            ':hover': { borderColor: styles.control.borderColor },
         }),
         valueContainer: s => ({
             ...s,
             ...styles.valueContainer,
+            padding: '0 8px',
         }),
+        placeholder: s => ({ ...s, color: color.light.text['mention-grey'] }),
         multiValue: (s, p) => ({
             ...s,
             ...styles.multiValue,
@@ -26,24 +34,19 @@ export const SelectMultiple = React.forwardRef(function SelectMultiple(props, re
             ':hover': styles.multiValueRemoveHover,
             ...(p.isDisabled ? styles.multiValueRemoveDisabled : {}),
         }),
-        dropdownIndicator: (s, p) => ({
-            ...s,
-            ...styles.dropdownIndicator,
-            ...(p.isDisabled ? styles.dropdownIndicatorDisabled : {}),
-        }),
-        indicatorSeparator: (s, p) => ({
-            ...s,
-            ...(p.isDisabled ? styles.indicatorSeparatorDisabled : {}),
-        }),
+        dropdownIndicator: s => ({ ...s, ...styles.dropdownIndicator }),
+        indicatorSeparator: () => ({ display: 'none' }),
         clearIndicator: s => ({ ...s, ...styles.clearIndicator }),
     };
+    const MultiValueRemove = (props) => (_jsx(components.MultiValueRemove, { ...props, children: _jsx(LucideIcon, { name: "X", size: "xs", color: color.light.text['default-grey'] }) }));
+    const DropdownIndicator = (props) => (_jsx(components.DropdownIndicator, { ...props, children: _jsx(LucideIcon, { name: "ChevronDown", size: "sm", color: props.isDisabled ? color.light.text['disabled-grey'] : color.light.text['default-grey'] }) }));
     const displayValue = React.useMemo(() => options?.filter(option => Array.isArray(value) && value.some(v => `${v}` === `${option.value}`)), [options, value]);
-    return (_jsxs(FormControl, { style: styles.select, 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(Box, { tag: "form-control-select-input", style: styles.inputContainer, children: _jsx(Box, { style: { ...(disabled ? styles.inputDisabled : {}) }, children: _jsx(ReactSelect, { ref: ref, value: displayValue, styles: selectStyles, isMulti: true, placeholder: placeholder, options: options, noOptionsMessage: () => 'Aucun résultat', onChange: selectedOptions => {
+    return (_jsxs(FormControl, { style: styles.select, 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(Box, { tag: "form-control-select-input", style: styles.inputContainer, children: _jsx(Box, { style: { ...(disabled ? styles.inputDisabled : {}) }, children: _jsx(ReactSelect, { ref: ref, value: displayValue, styles: selectStyles, isMulti: true, placeholder: placeholder, options: options, noOptionsMessage: () => 'Aucun résultat', onChange: selectedOptions => {
                             if (Array.isArray(selectedOptions)) {
                                 onChange?.(selectedOptions.map(o => String(o.value)));
                             }
                             else {
                                 onChange?.([]);
                             }
-                        }, isDisabled: disabled }) }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+                        }, isDisabled: disabled, components: { DropdownIndicator, MultiValueRemove } }) }) }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/Switch/Switch.js

@@ -37,6 +37,6 @@ export const Switch = React.forwardRef(function Switch(props, ref) {
         ...(noPadding ? { padding: 0, marginRight: 0 } : {}),
     };
     const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, checked: value, onCheckedChange: onChange, style: switchButtonStyles, disabled: disabled, ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { animation: "quicker", style: switchThumbStyles }) }));
-    const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(Label, { unstyled: true, htmlFor: id, width: '100%', children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, label && (_jsx(Typography, { htmlFor: id, style: switchLabelStyles, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(Label, { unstyled: true, htmlFor: id, width: '100%', children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, !!label && (_jsx(Typography, { htmlFor: id, style: switchLabelStyles, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
     return (_jsx(Box, { tag: "switch", gap: error || success ? spacingValue('050') : 0, style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
 });

package/dist/ui/TextField/TextField.js

@@ -10,5 +10,5 @@ export const TextField = React.forwardRef(function TextField(props, ref) {
     const autoCapitalize = 'sentences';
     const autoComplete = 'off';
     const inputMode = 'text';
-    return (_jsxs(FormControl, { style: styles.textField, 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(TextInput, { ref: ref, keyboardType: keyboardType, textContentType: textContentType, autoCapitalize: autoCapitalize, autoComplete: autoComplete, inputMode: inputMode, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(FormControl, { style: styles.textField, 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(TextInput, { ref: ref, keyboardType: keyboardType, textContentType: textContentType, autoCapitalize: autoCapitalize, autoComplete: autoComplete, inputMode: inputMode, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/TextareaField/TextareaField.js

@@ -4,5 +4,5 @@ import React from 'react';
 import { TextareaInput } from '../TextareaInput';
 export const TextareaField = React.forwardRef(function TextareaField(props, ref) {
     const { label, labelRight, hint, error, success, disabled, onChange, onModalSubmit, onFocus } = props;
-    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(TextareaInput, { ref: ref, onChangeText: onChange, onModalSubmit: onModalSubmit, onFocus: onFocus, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    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(TextareaInput, { ref: ref, onChangeText: onChange, onModalSubmit: onModalSubmit, onFocus: onFocus, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/TimeInput/TimeInput.js

@@ -28,5 +28,5 @@ export const TimeInput = React.forwardRef(function TimeInput({ label, labelRight
         onChange?.(localValue);
         onBlur?.();
     };
-    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(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, keyboardType: "number-pad", maxLength: 5 }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    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(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, keyboardType: "number-pad", maxLength: 5 }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/dist/ui/TimeInput/TimeInput.web.js

@@ -5,5 +5,5 @@ import { useStyles } from './TimeInput.styles';
 export const TimeInput = React.forwardRef(function TimeInput(props, ref) {
     const { label, labelRight, hint, disabled, error, success } = props;
     const styles = useStyles();
-    return (_jsxs(FormControl, { style: styles.timeInput, 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(FormControlDateInput, { ref: ref, ...props, type: "time" }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+    return (_jsxs(FormControl, { style: styles.timeInput, 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(FormControlDateInput, { ref: ref, ...props, type: "time" }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -69,7 +69,7 @@
   },
   "dependencies": {
     "react-markdown": "8.0.7",
-    "remark-gfm": "4.0.1",
+    "remark-gfm": "3.0.1",
     "zod": "4.4.3"
   },
   "peerDependencies": {