@alveole/components 0.43.2 → 1.0.0

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

@@ -0,0 +1,173 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
+    select: {
+        outline: 'none',
+        paddingTop: 0,
+        paddingBottom: 0,
+        color: color.text['default-grey'],
+        ...text['Corps de texte'].SM.Regular,
+        lineHeight: 16,
+        width: '100%',
+        borderWidth: 0,
+        backgroundColor: 'transparent',
+        appearance: 'none',
+    },
+    inputInner: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('050'),
+        paddingLeft: spacing('100'),
+        paddingRight: spacing('100'),
+        paddingTop: spacing('050'),
+        paddingBottom: spacing('050'),
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        backgroundColor: '#FFFFFF',
+        overflow: 'hidden',
+        width: '100%',
+    },
+    inputContainer: {
+        width: '100%',
+    },
+    inputDisabled: {
+        borderRadius: 6,
+        backgroundColor: color.background['disabled-grey'],
+    },
+    control: {
+        minHeight: spacing('200'),
+        flexWrap: 'inherit',
+        borderColor: color.border['default-grey'],
+        paddingTop: spacing('0375'),
+        paddingBottom: spacing('0375'),
+        borderRadius: 6,
+    },
+    controlDisabled: {
+        backgroundColor: color.background['disabled-grey'],
+    },
+    multiValue: {
+        borderRadius: spacing('025'),
+        backgroundColor: color.background.badge.default,
+        paddingLeft: spacing('025'),
+    },
+    multiValueDisabled: {
+        backgroundColor: '#FFFFFF',
+        borderColor: color.border['default-grey'],
+        borderWidth: 1,
+        borderRadius: spacing('025'),
+        borderStyle: 'solid',
+        paddingLeft: spacing('025'),
+        paddingRight: spacing('025'),
+    },
+    multiValueRemoveHover: {
+        backgroundColor: color.background.button.secondary.hover,
+        cursor: 'pointer',
+    },
+    multiValueRemoveDisabled: {
+        display: 'none',
+    },
+    dropdownIndicator: {
+        color: color.text['default-grey'],
+        padding: spacing('025'),
+    },
+    dropdownIndicatorDisabled: {
+        display: 'none',
+    },
+    separatorIndicator: {
+        color: color.text['default-grey'],
+    },
+    indicatorSeparatorDisabled: {
+        display: 'none',
+    },
+    clearIndicator: {
+        color: color.text['default-grey'],
+        padding: spacing('025'),
+    },
+    nativeLabel: {
+        ...text.Titres['H6 - XXS'],
+        color: color.text['title-grey'],
+    },
+    nativeValue: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.text['default-grey'],
+    },
+    nativeSimpleValue: {
+        ...text['Corps de texte'].SM.SemiBold,
+        color: color.text['title-grey'],
+    },
+    nativeItem: {
+        paddingTop: spacing('100'),
+        paddingRight: spacing('100'),
+        paddingBottom: spacing('050'),
+        paddingLeft: spacing('050'),
+        backgroundColor: color.background.button.tertiary.default,
+    },
+    nativeItemText: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.text['default-grey'],
+    },
+    nativeItemTextNew: {
+        ...text['Corps de texte'].SM.SemiBold,
+        color: color.text['action-high-primary'],
+    },
+    nativeItemSelected: {
+        backgroundColor: color.background.button.tertiary.hover,
+    },
+    input: {
+        display: 'flex',
+        flexDirection: 'row',
+        outline: 'none',
+        color: color.text['default-grey'],
+        fontFamily: text['Corps de texte'].SM.Regular.fontFamily,
+        fontSize: text['Corps de texte'].SM.Regular.fontSize,
+        minHeight: 42,
+        flex: 1,
+    },
+    inputPlaceholder: {
+        color: color.text.inverse.muted,
+        ...text['Corps de texte'].SM.Regular,
+    },
+    autocompleteIcon: {
+        position: 'absolute',
+        right: spacing('100'),
+        top: '50%',
+    },
+    modalOverlay: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        backgroundColor: color.alpha(color.light.background['alt-grey'], 0.75),
+    },
+    modalContent: {
+        flex: 1,
+        backgroundColor: 'white',
+        borderTopLeftRadius: radius('lg'),
+        borderTopRightRadius: radius('lg'),
+        paddingTop: spacing('100'),
+    },
+    modalHeader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingLeft: spacing('100'),
+    },
+    groupHeader: {
+        ...text['Corps de texte'].XS.SemiBold,
+        color: color.light.text['default-grey'],
+        textTransform: 'uppercase',
+        paddingTop: spacing('075'),
+        paddingBottom: spacing('025'),
+        paddingLeft: spacing('050'),
+        paddingRight: spacing('100'),
+        backgroundColor: color.light.background['disabled-grey'],
+    },
+    groupHeading: {
+        ...text['Corps de texte'].XS.SemiBold,
+        backgroundColor: color.light.background['disabled-grey'],
+        paddingTop: spacing('050'),
+        paddingBottom: spacing('050'),
+        color: color.light.text['default-grey'],
+        textTransform: 'uppercase',
+        marginBottom: 0,
+    },
+}));

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { AutocompleteOption } from './Autocomplete';
+export declare const Autocomplete: React.ForwardRefExoticComponent<{
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & import("@alveole/components").FormControlCaptionProps & import("@alveole/components").FormControlHintProps & {
+    value?: AutocompleteOption[];
+    options: import("@alveole/components").AutocompleteOptionWithoutGroup[] | import("@alveole/components").AutocompleteOptionWithGroup[];
+    placeholder?: string;
+    isMulti?: boolean;
+    allowEmpty?: boolean;
+    isSearchable?: boolean;
+    autoFocus?: boolean;
+    disabledSearch?: boolean;
+    disabledFilterSearch?: boolean;
+    onChange?: (value: AutocompleteOption[], meta?: {
+        added: AutocompleteOption[];
+        removed: AutocompleteOption[];
+        created: AutocompleteOption[];
+    }) => void;
+    onSearchChange?: (value: string) => void;
+    allowCreate?: boolean;
+    onCreateOption?: (created: AutocompleteOption) => void;
+    createOptionLabel?: (input: string) => string;
+    createOptionValue?: (input: string) => string;
+} & React.RefAttributes<any>>;
+//# sourceMappingURL=Autocomplete.web.d.ts.map

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

@@ -0,0 +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;;;;;;;;;;;;;;iDAiDnB,CAAF;;;;;;;;;;6BA4GF,CAAC"}

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import { useTheme } from '@alveole/theme';
+import React, { useEffect, useMemo, useState } from 'react';
+import ReactSelect 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;
+    const styles = useStyles();
+    const { color, spacing } = useTheme();
+    const [selectedOptions, setSelectedOptions] = useState(value ?? []);
+    const [syncedValueKey, setSyncedValueKey] = useState(() => value?.map(o => o.value).join('|') ?? '');
+    const [searchValue, setSearchValue] = useState('');
+    const isGrouped = props.options.length > 0 && 'group' in props.options[0];
+    const currentValueKey = value?.map(o => o.value).join('|') ?? '';
+    if (syncedValueKey !== currentValueKey) {
+        setSyncedValueKey(currentValueKey);
+        setSelectedOptions(value ?? []);
+    }
+    const options = useMemo(() => {
+        if (isGrouped) {
+            const groups = new Map();
+            for (const opt of props.options) {
+                const existing = groups.get(opt.group) ?? [];
+                groups.set(opt.group, [...existing, opt]);
+            }
+            return Array.from(groups.entries()).map(([label, opts]) => ({ label, options: opts }));
+        }
+        const differentOptions = props.options.filter(option => !selectedOptions.includes(option));
+        const allOptions = [...differentOptions, ...selectedOptions];
+        return allOptions.length === 0 ? undefined : allOptions;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.options, isGrouped]);
+    const selectStyles = {
+        control: (s, p) => ({
+            ...s,
+            ...styles.control,
+            ...(p.isDisabled ? styles.controlDisabled : {}),
+        }),
+        multiValue: (s, p) => ({
+            ...s,
+            ...styles.multiValue,
+            ...(p.isDisabled ? styles.multiValueDisabled : {}),
+            ...(isMulti !== false ? {} : { padding: 0, margin: 0 }),
+            ...(isMulti !== false ? {} : { backgroundColor: 'transparent', fontSize: 16 }),
+        }),
+        multiValueLabel: s => ({ ...s, fontSize: 14 }),
+        multiValueRemove: (s, p) => ({
+            ...s,
+            ':hover': styles.multiValueRemoveHover,
+            ...(p.isDisabled ? styles.multiValueRemoveDisabled : {}),
+            ...(isMulti !== false ? {} : { display: 'none' }),
+        }),
+        dropdownIndicator: (s, p) => ({
+            ...s,
+            ...styles.dropdownIndicator,
+            ...(p.isDisabled ? styles.dropdownIndicatorDisabled : {}),
+        }),
+        indicatorSeparator: (s, p) => ({
+            ...s,
+            ...styles.separatorIndicator,
+            ...(p.isDisabled ? styles.indicatorSeparatorDisabled : {}),
+        }),
+        clearIndicator: s => ({ ...s, ...styles.clearIndicator }),
+        valueContainer: s => ({ ...s }),
+        group: s => ({ ...s, paddingTop: 0, paddingBottom: 0 }),
+        groupHeading: () => ({
+            backgroundColor: color.light.background['disabled-grey'],
+            padding: `${spacing('050')}px ${spacing('100')}px`,
+            fontSize: 11,
+            fontWeight: 600,
+            color: color.light.text['default-grey'],
+            textTransform: 'uppercase',
+            marginBottom: 0,
+            letterSpacing: 0.5,
+        }),
+    };
+    const clearValues = () => {
+        setSelectedOptions([]);
+        onChange?.([]);
+    };
+    const onSingleChange = (value) => {
+        if (typeof value != 'object' || value === null)
+            return clearValues();
+        setSelectedOptions([value]);
+        return onChange?.([value]);
+    };
+    const onMultiChange = (values) => {
+        if (typeof value != 'object' || value === null)
+            return clearValues();
+        setSelectedOptions(values);
+        return onChange?.(values);
+    };
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            const newSearchValue = searchValue ?? '';
+            onSearchChange?.(newSearchValue);
+        }, 300);
+        return () => {
+            clearTimeout(handler);
+        };
+        // 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 => {
+                            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 })] }));
+});

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

@@ -0,0 +1,8 @@
+export type AutocompleteChipProps = {
+    label: string;
+    isMulti?: boolean;
+    onToggle?: () => void;
+    maxWidth?: number;
+};
+export declare const AutocompleteChip: (props: AutocompleteChipProps) => import("react").JSX.Element;
+//# sourceMappingURL=AutocompleteChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteChip.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/AutocompleteChip.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,gCAsB5D,CAAC"}

package/dist/ui/Autocomplete/AutocompleteChip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, ButtonIcon, Typography } from '@alveole/components';
+import { useStyles } from './Autocomplete.styles';
+export const AutocompleteChip = (props) => {
+    const { label, isMulti = true, onToggle, maxWidth } = props;
+    const styles = useStyles();
+    return (_jsx(Box, { style: {
+            ...styles.multiValue,
+            backgroundColor: isMulti ? styles.multiValue.backgroundColor : '#FFFFFF',
+            ...(maxWidth != null ? { maxWidth } : {}),
+        }, children: _jsxs(Box, { display: "flex", flexDirection: "row", width: isMulti ? undefined : '100%', children: [_jsx(Box, { pt: isMulti ? '025' : '000', style: maxWidth != null ? { flexShrink: 1 } : {}, children: _jsx(Typography, { style: styles.nativeValue, numberOfLines: maxWidth != null ? 1 : undefined, children: label }) }), isMulti && _jsx(ButtonIcon, { size: "sm", icon: 'X', variant: "tertiary", onPress: onToggle })] }) }));
+};

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

@@ -0,0 +1,3 @@
+export * from './Autocomplete';
+export * from './AutocompleteChip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Autocomplete/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC"}

package/dist/ui/Autocomplete/index.js

@@ -0,0 +1,2 @@
+export * from './Autocomplete';
+export * from './AutocompleteChip';

package/dist/ui/AutocompleteAddress/AutocompleteAddress.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { AutocompleteOption, AutocompleteProps } from '../Autocomplete';
+export type AutocompleteAddressValue = {
+    placeId?: string;
+    address?: string;
+    postalCode?: string;
+    city?: string;
+    country?: string;
+    latitude?: number;
+    longitude?: number;
+    custom?: boolean;
+};
+export type AutocompleteAddressProps = {
+    value?: AutocompleteProps['value'];
+    suggestions?: AutocompleteOption[];
+    disabledCreation?: boolean;
+    label?: string;
+    error?: string;
+    onSearchChange?: (query: string) => void;
+    /** Appelé avec l'id de lieu quand l'utilisateur sélectionne une suggestion */
+    onPlaceSelected?: (placeId: string) => void;
+    /** Appelé avec une adresse personnalisée quand l'utilisateur crée une option */
+    onCustomAddress?: (address: string) => void;
+    /** Appelé avec null quand la sélection est effacée */
+    onClear?: () => void;
+};
+export declare const AutocompleteAddress: (props: AutocompleteAddressProps) => React.JSX.Element;
+//# sourceMappingURL=AutocompleteAddress.d.ts.map

package/dist/ui/AutocompleteAddress/AutocompleteAddress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteAddress.d.ts","sourceRoot":"","sources":["../../../src/ui/AutocompleteAddress/AutocompleteAddress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEtF,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8EAA8E;IAC9E,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,gFAAgF;IAChF,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,sBA8ClE,CAAC"}

package/dist/ui/AutocompleteAddress/AutocompleteAddress.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Autocomplete } from '../Autocomplete';
+export const AutocompleteAddress = (props) => {
+    const { value, disabledCreation, error, label, suggestions = [], onSearchChange, onPlaceSelected, onCustomAddress, onClear, } = props;
+    const uniqueId = React.useId();
+    const options = suggestions.length > 0 ? suggestions : (value ?? []);
+    return (_jsx(Autocomplete, { allowCreate: disabledCreation !== true, disabledFilterSearch: true, isMulti: false, label: label ?? 'Adresse', placeholder: "ex : 3 rue Robespierre", options: options, value: value, error: error, onSearchChange: onSearchChange, onChange: selected => {
+            const place = selected[0];
+            if (!place) {
+                onClear?.();
+                return;
+            }
+            if (place.__created) {
+                onCustomAddress?.(place.label);
+                return;
+            }
+            onPlaceSelected?.(place.value);
+        } }, `autocomplete-address--${value?.map(v => v.value).join(',')}-${uniqueId}`));
+};

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

@@ -0,0 +1,13 @@
+import { AutocompleteAddressProps } from './AutocompleteAddress';
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: true;
+    description: string;
+    component: (props: AutocompleteAddressProps) => import("react").JSX.Element;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './AutocompleteAddress.stories.sources';
+//# sourceMappingURL=AutocompleteAddress.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteAddress.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/AutocompleteAddress/AutocompleteAddress.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;AAEtF,wBAQkB;AAQlB,eAAO,MAAM,OAAO,mCAuBnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,uCAAuC,CAAC"}

package/dist/ui/AutocompleteAddress/AutocompleteAddress.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../../core';
+import { AutocompleteAddress } from './AutocompleteAddress';
+export default {
+    title: 'AutocompleteAddress',
+    tags: ['ui'],
+    experimental: true,
+    description: 'Champ adresse basé sur Autocomplete. Le consommateur fournit les suggestions via onSearchChange/suggestions.',
+    component: AutocompleteAddress,
+    styleFn: () => ({}),
+};
+const MOCK_SUGGESTIONS = [
+    { value: 'place-1', label: '3 rue Robespierre, 75011 Paris' },
+    { value: 'place-2', label: '10 avenue de la République, 75011 Paris' },
+    { value: 'place-3', label: '5 boulevard Voltaire, 75011 Paris' },
+];
+export const Default = () => {
+    const [value, setValue] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+    const onSearchChange = query => {
+        setSuggestions(query && query.length >= 3 ? MOCK_SUGGESTIONS : []);
+    };
+    return (_jsx(Box, { minH: 300, children: _jsx(AutocompleteAddress, { label: "Adresse", value: value, suggestions: suggestions, onSearchChange: onSearchChange, onPlaceSelected: (placeId) => {
+                const found = MOCK_SUGGESTIONS.find(s => s.value === placeId);
+                if (found)
+                    setValue([found]);
+            }, onClear: () => setValue([]) }) }));
+};
+export * as Sources from './AutocompleteAddress.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteAddress.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/AutocompleteAddress/AutocompleteAddress.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA6wB,CAAC;AAElyB,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/AutocompleteAddress/AutocompleteAddress.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<AutocompleteOption[]>([]);\n  const [suggestions, setSuggestions] = useState<AutocompleteOption[]>([]);\n\n  const onSearchChange: AutocompleteAddressProps['onSearchChange'] = query => {\n    setSuggestions(query && query.length >= 3 ? MOCK_SUGGESTIONS : []);\n  };\n\n  return (\n    <Box minH={300}>\n      <AutocompleteAddress\n        label=\"Adresse\"\n        value={value}\n        suggestions={suggestions}\n        onSearchChange={onSearchChange}\n        onPlaceSelected={(placeId: string) => {\n          const found = MOCK_SUGGESTIONS.find(s => s.value === placeId);\n          if (found) setValue([found]);\n        }}\n        onClear={() => setValue([])}\n      />\n    </Box>\n  );\n};";
+export const storySources = {
+    Default,
+};

package/dist/ui/AutocompleteAddress/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteAddress';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/AutocompleteAddress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/AutocompleteAddress/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/ui/AutocompleteAddress/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteAddress';

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

@@ -7,13 +7,13 @@ declare const _default: {
     component: (props: import("./Avatar").AvatarProps) => import("react").JSX.Element;
     styleFn: () => {
         avatar: {
-            backgroundColor: "#232427";
+            backgroundColor: string;
         };
         carre: {
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         };
         fallbackText: {
-            color: "#CED5E1";
+            color: string;
             display: "flex";
             justifyContent: "center";
             textAlign: "center";

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

@@ -1,12 +1,12 @@
 export declare const useStyles: () => {
     avatar: {
-        backgroundColor: "#232427";
+        backgroundColor: string;
     };
     carre: {
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
     };
     fallbackText: {
-        color: "#CED5E1";
+        color: string;
         display: "flex";
         justifyContent: "center";
         textAlign: "center";

package/dist/ui/Badge/Badge.js

@@ -28,7 +28,7 @@ export const Badge = (props) => {
     };
     if (icon) {
         const iconSize = size === 'sm' ? 'xs' : 'sm';
-        return (_jsxs(Box, { tag: "badge", style: [styles.badge, badgeVariant(), badgeSize, style], children: [_jsx(LucideIcon, { name: icon, size: iconSize }), _jsx(Typography, { tag: "badge-text", ...badgeProps })] }));
+        return (_jsxs(Box, { tag: "badge", testID: "badge", style: [styles.badge, badgeVariant(), badgeSize, style], children: [_jsx(LucideIcon, { name: icon, size: iconSize }), _jsx(Typography, { tag: "badge-text", ...badgeProps })] }));
     }
     return _jsx(Typography, { tag: "badge", style: [styles.badge, badgeVariant(), badgeSize, style], ...badgeProps });
 };

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

@@ -15,34 +15,36 @@ declare const _default: {
             justifyContent: "center";
         };
         badgeInfo: {
-            color: "#0264C7";
-            backgroundColor: "#E5F1FE";
+            color: string;
+            backgroundColor: string;
         };
         badgeSuccess: {
-            color: "#1B7440";
-            backgroundColor: "#B9FDD5";
+            color: string;
+            backgroundColor: string;
         };
         badgeError: {
-            color: "#C62416";
-            backgroundColor: "#FDEAE8";
+            color: string;
+            backgroundColor: string;
         };
         badgeWarning: {
-            color: "#BC4401";
-            backgroundColor: "#FFEEE5";
+            color: string;
+            backgroundColor: string;
         };
         badgeNew: {
-            color: "#7F4214";
-            backgroundColor: "#FBF2C6";
+            color: string;
+            backgroundColor: string;
         };
         badgeDefault: {
-            color: "#373A3F";
-            backgroundColor: "#EFF1F6";
+            color: string;
+            backgroundColor: string;
         };
         badgeSm: {
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
             textTransform: "uppercase";
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
             paddingLeft: import("@alveole/theme").Spacing;
             paddingRight: import("@alveole/theme").Spacing;
             gap: import("@alveole/theme").Spacing;

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,QAAQ,mCAuBpB,CAAC;AAEF,eAAO,MAAM,KAAK,mCASjB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"Badge.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,QAAQ,mCAuBpB,CAAC;AAEF,eAAO,MAAM,KAAK,mCASjB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

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

@@ -8,34 +8,36 @@ export declare const useStyles: () => {
         justifyContent: "center";
     };
     badgeInfo: {
-        color: "#0264C7";
-        backgroundColor: "#E5F1FE";
+        color: string;
+        backgroundColor: string;
     };
     badgeSuccess: {
-        color: "#1B7440";
-        backgroundColor: "#B9FDD5";
+        color: string;
+        backgroundColor: string;
     };
     badgeError: {
-        color: "#C62416";
-        backgroundColor: "#FDEAE8";
+        color: string;
+        backgroundColor: string;
     };
     badgeWarning: {
-        color: "#BC4401";
-        backgroundColor: "#FFEEE5";
+        color: string;
+        backgroundColor: string;
     };
     badgeNew: {
-        color: "#7F4214";
-        backgroundColor: "#FBF2C6";
+        color: string;
+        backgroundColor: string;
     };
     badgeDefault: {
-        color: "#373A3F";
-        backgroundColor: "#EFF1F6";
+        color: string;
+        backgroundColor: string;
     };
     badgeSm: {
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
         textTransform: "uppercase";
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
         paddingLeft: import("@alveole/theme").Spacing;
         paddingRight: import("@alveole/theme").Spacing;
         gap: import("@alveole/theme").Spacing;

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

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