@alveole/components 0.42.2 → 0.43.0

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

@@ -0,0 +1,30 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/FormControl/FormControl.stories.tsx
+export const WithTextInput = () => "export const WithTextInput = () => (\n  <FormControl>\n    <FormControlLabel label=\"Adresse email\" />\n    <TextInput placeholder=\"jean@exemple.fr\" keyboardType=\"email-address\" />\n    <FormControlHint hint=\"Votre email professionnel\" />\n  </FormControl>\n);";
+export const WithError = () => "export const WithError = () => (\n  <FormControl>\n    <FormControlLabel label=\"Adresse email\" error=\"Format invalide\" />\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption error=\"Format invalide\" />\n  </FormControl>\n);";
+export const WithSuccess = () => "export const WithSuccess = () => (\n  <FormControl>\n    <FormControlLabel label=\"Adresse email\" success=\"Email valide\" />\n    <TextInput placeholder=\"jean@exemple.fr\" />\n    <FormControlCaption success=\"Email valide\" />\n  </FormControl>\n);";
+export const Multiline = () => "export const Multiline = () => (\n  <FormControl>\n    <FormControlLabel label=\"Message\" />\n    <TextInput placeholder=\"Votre message...\" multiline numberOfLines={4} />\n  </FormControl>\n);";
+export const MultilineWithModal = () => "export const MultilineWithModal = () => {\n  const [text, setText] = useState('');\n  return (\n    <FormControl>\n      <FormControlLabel label=\"Description\" />\n      <TextInput\n        value={text}\n        onChangeText={setText}\n        placeholder=\"Taper pour ouvrir la modale de saisie...\"\n        multiline\n        openModal\n        modalSubmitLabel=\"Confirmer\"\n      />\n    </FormControl>\n  );\n};";
+export const Label = () => "export const Label = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n    <FormControlLabel label=\"Label par defaut\" />\n    <FormControlLabel label=\"Desactive\" disabled />\n    <FormControlLabel label=\"Erreur\" error=\"Message erreur\" />\n    <FormControlLabel label=\"Succes\" success=\"Message succes\" />\n    <FormControlLabel label=\"Avec badge\" labelRight={<Typography>Optionnel</Typography>} />\n  </Box>\n);";
+export const Caption = () => "export const Caption = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n    <FormControlCaption error=\"Champ requis\" />\n    <FormControlCaption success=\"Valeur correcte\" />\n  </Box>\n);";
+export const Hint = () => "export const Hint = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={8}>\n    <FormControlHint hint=\"Texte descriptif du champ\" />\n    <FormControlHint hint=\"Texte desactive\" disabled />\n  </Box>\n);";
+export const Modal = () => "export const Modal = () => {\n  const [open, setOpen] = useState(false);\n  return (\n    <Box>\n      <Button variant=\"secondary\" title=\"Ouvrir la modale\" onPress={() => setOpen(true)} />\n      <FormControlModal\n        open={open}\n        onClose={() => setOpen(false)}\n        submitLabel=\"Valider\"\n        onSubmit={() => setOpen(false)}\n      >\n        <TextInput placeholder=\"Saisir un texte...\" multiline numberOfLines={6} />\n      </FormControlModal>\n    </Box>\n  );\n};";
+export const NumberInput = () => "export const NumberInput = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <FormControlLabel label=\"Montant\" />\n        <FormControlNumberInput value={value} onChange={setValue} placeholder=\"0\" />\n      </FormControl>\n      <FormControl>\n        <FormControlLabel label=\"Avec unites\" />\n        <FormControlNumberInput\n          value={value}\n          onChange={setValue}\n          startAdornment={\n            <Box style={{ paddingLeft: 8, paddingRight: 4 }}>\n              <Typography>€</Typography>\n            </Box>\n          }\n          endAdornment={\n            <Box style={{ paddingLeft: 4, paddingRight: 8 }}>\n              <Typography>TTC</Typography>\n            </Box>\n          }\n        />\n      </FormControl>\n      <FormControl>\n        <FormControlLabel label=\"Desactive\" />\n        <FormControlNumberInput value={42} onChange={() => {}} disabled />\n      </FormControl>\n    </Box>\n  );\n};";
+export const DateInput = () => "export const DateInput = () => {\n  const [date, setDate] = useState('');\n  const [time, setTime] = useState('');\n  const [month, setMonth] = useState('');\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <FormControlLabel label=\"Date\" />\n        <FormControlDateInput type=\"date\" value={date} onChange={setDate} />\n      </FormControl>\n      <FormControl>\n        <FormControlLabel label=\"Heure\" />\n        <FormControlDateInput type=\"time\" value={time} onChange={setTime} />\n      </FormControl>\n      <FormControl>\n        <FormControlLabel label=\"Mois\" />\n        <FormControlDateInput type=\"month\" value={month} onChange={setMonth} />\n      </FormControl>\n    </Box>\n  );\n};";
+export const FileInput = () => "export const FileInput = () => {\n  const [file, setFile] = useState<FormControlFileInputValue>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <FormControl>\n        <FormControlLabel label=\"Piece jointe\" />\n        <FormControlFileInput value={file} onChange={setFile} />\n      </FormControl>\n      <FormControl>\n        <FormControlLabel label=\"Plusieurs fichiers\" />\n        <FormControlFileInput value={file} onChange={setFile} multiple />\n      </FormControl>\n      <FormControl>\n        <FormControlLabel label=\"Desactive\" disabled />\n        <FormControlFileInput value={null} onChange={() => {}} disabled />\n      </FormControl>\n    </Box>\n  );\n};";
+export const OtpInput = () => "export const OtpInput = () => {\n  const [code, setCode] = useState('');\n  return (\n    <FormControl>\n      <FormControlLabel label=\"Code de verification\" />\n      <FormControlOtpInput numberOfDigits={6} onTextChange={setCode} />\n      {code.length === 6 && <FormControlCaption success={`Code saisi : ${code}`} />}\n    </FormControl>\n  );\n};";
+export const storySources = {
+    WithTextInput,
+    WithError,
+    WithSuccess,
+    Multiline,
+    MultilineWithModal,
+    Label,
+    Caption,
+    Hint,
+    Modal,
+    NumberInput,
+    DateInput,
+    FileInput,
+    OtpInput,
+};

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

@@ -0,0 +1,199 @@
+export declare const useStyles: () => {
+    formControl: {
+        display: "flex";
+        flexDirection: "column";
+        gap: import("@alveole/theme").Spacing;
+        width: "100%";
+    };
+    labelContainer: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
+    label: {
+        color: "#373A3F";
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    labelDisabled: {
+        color: "#8D97AC";
+    };
+    hintContainer: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
+    hint: {
+        color: "#5F6571";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    hintDisabled: {
+        color: "#8D97AC";
+    };
+    inputContainer: {
+        width: "100%";
+    };
+    inputInner: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+        padding: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: "#DEE3EC";
+        backgroundColor: "#FFFFFF";
+        overflow: "hidden";
+        width: "100%";
+        minHeight: number;
+    };
+    input: {
+        display: "flex";
+        flexDirection: "row";
+        outline: string;
+        color: "#373A3F";
+        fontFamily: string;
+        fontSize: 14;
+        marginTop: import("@alveole/theme").Spacing;
+        marginBottom: import("@alveole/theme").Spacing;
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        minHeight: number | undefined;
+        flex: number;
+    };
+    inputError: {
+        borderColor: "#C62416";
+    };
+    inputSuccess: {
+        borderColor: "#1B7440";
+    };
+    inputDisabled: {
+        borderColor: "#E6EAF1";
+    };
+    inputFocused: {
+        outlineStyle: "solid";
+        outlineWidth: number;
+        outlineColor: "#0A76F6";
+        outlineOffset: number;
+        borderColor: "#0A76F6" | undefined;
+    };
+    inputFile: {
+        margin: number;
+    };
+    inputFileText: {
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        color: "#373A3F";
+    };
+    inputFileClear: {
+        position: "absolute";
+        right: number;
+    };
+    inputFileIcon: {
+        marginTop: string;
+        marginBottom: string;
+    };
+    inputWeb: {
+        borderWidth: number;
+        borderStyle: "none";
+        outline: string;
+        backgroundColor: "transparent";
+        lineHeight: string;
+    };
+    modalOverlay: {
+        flex: number;
+        backgroundColor: `rgba${string}`;
+    };
+    modalSheet: {
+        width: "100%";
+        flex: number;
+    };
+    modalContent: {
+        flex: number;
+        backgroundColor: "#FFFFFF";
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        padding: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+    modalHeader: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        marginBottom: import("@alveole/theme").Spacing;
+    };
+    modalHeaderLeft: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    modalHeaderRight: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    modalFooter: {
+        marginTop: import("@alveole/theme").Spacing;
+    };
+    modalInputContainer: {
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: "#DEE3EC";
+        backgroundColor: "#FFFFFF";
+        minHeight: number;
+    };
+    modalInput: {
+        color: "#373A3F";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+        minHeight: number;
+        flex: number;
+        fontSize: 14;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    caption: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+        alignItems: "flex-start";
+        marginTop: import("@alveole/theme").Spacing;
+        width: "100%";
+    };
+    captionIcon: {
+        flexShrink: number;
+        marginTop: number;
+    };
+    captionText: {
+        flex: number;
+        flexShrink: number;
+        minWidth: number;
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    errorText: {
+        color: "#C62416";
+    };
+    successText: {
+        color: "#1C7F54";
+    };
+};
+//# sourceMappingURL=FormControl.styles.d.ts.map

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

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

package/dist/ui/FormControl/FormControl.styles.js

@@ -0,0 +1,185 @@
+import { makeStyles } from '@alveole/theme';
+import { Platform } from 'react-native';
+export const useStyles = makeStyles(({ text, color, spacing }) => ({
+    formControl: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacing('025'),
+        width: '100%',
+    },
+    // Label
+    labelContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    label: {
+        ...text['Corps de texte'].SM.Medium,
+        color: color.text['default-grey'],
+    },
+    labelDisabled: {
+        color: color.text['disabled-grey'],
+    },
+    // Hint
+    hintContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    hint: {
+        ...text['Corps de texte'].XS.Regular,
+        color: color.text.mention,
+    },
+    hintDisabled: {
+        color: color.text['disabled-grey'],
+    },
+    // Input
+    inputContainer: {
+        width: '100%',
+    },
+    inputInner: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('050'),
+        padding: 0,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        backgroundColor: '#FFFFFF',
+        overflow: 'hidden',
+        width: '100%',
+        minHeight: 42,
+    },
+    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,
+        marginTop: Platform.OS === 'web' ? spacing('050') : spacing('025'),
+        marginBottom: Platform.OS === 'web' ? spacing('050') : spacing('025'),
+        paddingLeft: spacing('100'),
+        paddingRight: spacing('100'),
+        minHeight: Platform.OS === 'web' ? undefined : 42,
+        flex: 1,
+    },
+    inputError: {
+        borderColor: color.border['plain-error'],
+    },
+    inputSuccess: {
+        borderColor: color.border['plain-success'],
+    },
+    inputDisabled: {
+        borderColor: color.border['disabled-grey'],
+    },
+    inputFocused: {
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineColor: color.system.focus,
+        outlineOffset: 2,
+        borderColor: Platform.OS === 'ios' ? color.system.focus : undefined,
+    },
+    inputFile: {
+        margin: 0,
+    },
+    inputFileText: {
+        color: color.text['default-grey'],
+        ...text['Corps de texte'].SM.Regular,
+    },
+    inputFileClear: {
+        position: 'absolute',
+        right: 0,
+    },
+    inputFileIcon: {
+        marginTop: 'auto',
+        marginBottom: 'auto',
+    },
+    inputWeb: {
+        borderWidth: 0,
+        borderStyle: 'none',
+        outline: 'none',
+        backgroundColor: 'transparent',
+        lineHeight: 'auto',
+    },
+    // Modal (multiline)
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: color.alpha(color.background['alt-grey'], 0.75),
+    },
+    modalSheet: {
+        width: '100%',
+        flex: 1,
+    },
+    modalContent: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        padding: spacing('150'),
+        paddingTop: spacing('075'),
+        paddingBottom: spacing('075'),
+    },
+    modalHeader: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: spacing('100'),
+    },
+    modalHeaderLeft: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    modalHeaderRight: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    modalFooter: {
+        marginTop: spacing('100'),
+    },
+    modalInputContainer: {
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: color.border['default-grey'],
+        backgroundColor: '#FFFFFF',
+        minHeight: 200,
+    },
+    modalInput: {
+        ...text['Corps de texte'].SM.Regular,
+        color: color.text['default-grey'],
+        paddingLeft: spacing('100'),
+        paddingRight: spacing('100'),
+        paddingTop: spacing('100'),
+        paddingBottom: spacing('100'),
+        minHeight: 180,
+        flex: 1,
+    },
+    // Caption
+    caption: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: spacing('025'),
+        alignItems: 'flex-start',
+        marginTop: spacing('050'),
+        width: '100%',
+    },
+    captionIcon: {
+        flexShrink: 0,
+        marginTop: 2,
+    },
+    captionText: {
+        ...text['Corps de texte'].XS.Regular,
+        flex: 1,
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    errorText: {
+        color: color.danger,
+    },
+    successText: {
+        color: color.success,
+    },
+}));

package/dist/ui/FormControl/FormControlCaption.d.ts

@@ -0,0 +1,6 @@
+export type FormControlCaptionProps = {
+    error?: string;
+    success?: string;
+};
+export declare const FormControlCaption: (props: FormControlCaptionProps) => import("react").JSX.Element;
+//# sourceMappingURL=FormControlCaption.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlCaption.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlCaption.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,gCAuBhE,CAAC"}

package/dist/ui/FormControl/FormControlCaption.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from './FormControl.styles';
+export const FormControlCaption = (props) => {
+    const { error, success } = props;
+    const styles = useStyles();
+    return (_jsxs(Box, { tag: "form-control-caption", style: styles.caption, children: [(error != null || success != null) &&
+                (success ? (_jsx(Box, { style: styles.captionIcon, children: _jsx(LucideIcon, { name: "CircleCheck", size: "sm", color: styles.successText.color }) })) : (_jsx(Box, { style: styles.captionIcon, children: _jsx(LucideIcon, { name: "OctagonX", size: "sm", color: styles.errorText.color }) }))), _jsx(Typography, { style: styles.captionText, color: error ? styles.errorText.color : styles.successText.color, children: error ?? success })] }));
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export type FormControlDateInputElement = HTMLInputElement;
+export type FormControlDateInputProps = {
+    value?: string;
+    type?: 'date' | 'time' | 'datetime' | 'month';
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (value: string) => void;
+};
+export declare const FormControlDateInput: React.ForwardRefExoticComponent<FormControlDateInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=FormControlDateInput.d.ts.map

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

@@ -0,0 +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"}

package/dist/ui/FormControl/FormControlDateInput.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '../../core';
+import { useStyles } from './FormControl.styles';
+function formatForInput(value, type) {
+    const d = new Date(value);
+    if (isNaN(d.getTime()))
+        return value;
+    const pad = (n) => String(n).padStart(2, '0');
+    if (type === 'datetime')
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    if (type === 'time')
+        return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    if (type === 'month')
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}`;
+    return value;
+}
+export const FormControlDateInput = React.forwardRef(function DateInput(props, ref) {
+    const { value, type, onChange, ...inputProps } = props;
+    const styles = useStyles();
+    const parsed = React.useMemo(() => {
+        if (value == null)
+            return value;
+        if (type === 'datetime') {
+            const d = new Date(value);
+            if (isNaN(d.getTime()))
+                return '';
+            const pad = (n) => String(n).padStart(2, '0');
+            return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+        }
+        if (type === 'time')
+            return formatForInput(value, 'time');
+        if (type === 'month')
+            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: {
+                ...styles.inputInner,
+                ...(props.disabled ? styles.inputDisabled : {}),
+            }, 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 }) }) }));
+});

package/dist/ui/FormControl/FormControlFileInput.d.ts

@@ -0,0 +1,20 @@
+import * as DocumentPicker from 'expo-document-picker';
+import React from 'react';
+export type FormControlFileInputValue = DocumentPicker.DocumentPickerAsset | DocumentPicker.DocumentPickerAsset[] | null;
+export type FormControlFileInputProps = {
+    value: FormControlFileInputValue;
+    previewURL?: string;
+    placeholder?: string;
+    forcePlaceholder?: boolean;
+    hideButton?: boolean;
+    hideFilename?: boolean;
+    canChange?: boolean;
+    disabled?: boolean;
+    type?: DocumentPicker.DocumentPickerOptions['type'];
+    multiple?: boolean;
+    onChange: (value: FormControlFileInputValue) => void;
+    reopen?: boolean;
+    onPickStart?: () => void;
+};
+export declare const FormControlFileInput: (props: FormControlFileInputProps) => React.JSX.Element | null;
+//# sourceMappingURL=FormControlFileInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlFileInput.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControlFileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,yBAAyB,GACjC,cAAc,CAAC,mBAAmB,GAClC,cAAc,CAAC,mBAAmB,EAAE,GACpC,IAAI,CAAC;AAET,MAAM,MAAM,yBAAyB,GAAG;IACtC,KAAK,EAAE,yBAAyB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,6BA6EpE,CAAC"}

package/dist/ui/FormControl/FormControlFileInput.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DocumentPicker from 'expo-document-picker';
+import React from 'react';
+import { Pressable } from 'react-native';
+import { Box, Typography } from '../../core';
+import { useStyles } from './FormControlFileInput.styles';
+export const FormControlFileInput = (props) => {
+    const { value, disabled, onChange, onPickStart, placeholder = 'Aucun fichier choisi.', type, forcePlaceholder, reopen = false, multiple = false, hideButton = false, } = props;
+    const styles = useStyles();
+    const displayValue = React.useMemo(() => {
+        if (value == null || forcePlaceholder)
+            return placeholder;
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                return placeholder;
+            if (value.length === 1)
+                return value[0].name ?? '1 fichier';
+            return `${value.length} fichiers`;
+        }
+        if (value.name)
+            return value.name;
+        return '1 fichier';
+    }, [placeholder, value, forcePlaceholder]);
+    const handlePickFile = React.useCallback(async () => {
+        onPickStart?.();
+        if (disabled)
+            return;
+        const result = await DocumentPicker.getDocumentAsync({
+            copyToCacheDirectory: true,
+            multiple: multiple ?? false,
+            type: type,
+        });
+        if (multiple) {
+            const newValue = result.assets && result.assets.length > 0 ? result.assets : null;
+            onChange?.(newValue);
+        }
+        else {
+            const newValue = result.assets?.[0] ?? null;
+            onChange?.(newValue);
+        }
+    }, [onPickStart, disabled, multiple, type, onChange]);
+    React.useEffect(() => {
+        if (reopen)
+            handlePickFile();
+    }, [reopen, handlePickFile]);
+    if (hideButton)
+        return null;
+    return (_jsx(Pressable, { onPress: handlePickFile, children: _jsxs(Box, { tag: "form-control-file-input-inner", style: {
+                ...styles.fileInputContainer,
+            }, children: [_jsx(Box, { tag: "file-input-button", hoverStyle: { ...(!disabled && styles.fileInputButtonHovered) }, style: {
+                        ...styles.fileInputButton,
+                        ...(disabled && styles.fileInputButtonDisabled),
+                    }, children: _jsx(Typography, { style: styles.inputFileText, children: "Choisir un fichier" }) }), _jsx(Box, { tag: "file-input-text", children: _jsx(Typography, { mt: 'auto', mb: 'auto', style: styles.placeholderText, children: displayValue }) })] }) }));
+};

package/dist/ui/FormControl/FormControlFileInput.styles.d.ts

@@ -0,0 +1,45 @@
+export declare const useStyles: () => {
+    fileInputContainer: {
+        display: "flex";
+        flexDirection: "row";
+        gap: import("@alveole/theme").Spacing;
+        alignItems: "center";
+    };
+    fileInputButton: {
+        borderWidth: number;
+        borderColor: "#DEE3EC";
+        backgroundColor: "#F6F7F8";
+        transition: "background-color 0.1s ease-in-out";
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        paddingLeft: import("@alveole/theme").Spacing;
+        paddingRight: import("@alveole/theme").Spacing;
+        paddingTop: import("@alveole/theme").Spacing;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+    fileInputButtonHovered: {
+        backgroundColor: "#E6EAF1";
+    };
+    fileInputButtonDisabled: {
+        cursor: "not-allowed";
+        backgroundColor: "#E6EAF1";
+    };
+    inputFileText: {
+        color: "#373A3F";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+    placeholderText: {
+        color: "#373A3F";
+        fontSize: 12;
+        lineHeight: 20;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+    };
+};
+//# sourceMappingURL=FormControlFileInput.styles.d.ts.map

package/dist/ui/FormControl/FormControlFileInput.styles.d.ts.map

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