@alveole/components 1.10.0 → 2.0.0-alpha

package/dist/ui/FormControl/FileInput.stories.d.ts

@@ -0,0 +1,56 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: (props: import("./FileInput").FileInputProps) => import("react").JSX.Element | null;
+    styleFn: () => {
+        fileInputContainer: {
+            display: "flex";
+            flexDirection: "row";
+            gap: string | number;
+            alignItems: "center";
+        };
+        fileInputButton: {
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: string;
+            transition: "background-color 0.1s ease-in-out";
+            display: "flex";
+            alignItems: "center";
+            justifyContent: "center";
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+        };
+        fileInputButtonHovered: {
+            backgroundColor: string;
+        };
+        fileInputButtonDisabled: {
+            cursor: "not-allowed";
+            backgroundColor: string;
+        };
+        inputFileText: {
+            color: string;
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+        placeholderText: {
+            color: string;
+            fontSize: 12;
+            lineHeight: 20;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Multiple: () => import("react").JSX.Element;
+export * as Sources from './FileInput.stories.sources';
+//# sourceMappingURL=FileInput.stories.d.ts.map

package/dist/ui/FormControl/FileInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAkBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAOpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../../core/Box';
+import { FileInput } from './FileInput';
+import { useStyles } from './FileInput.styles';
+import { FormControl } from './FormControl';
+export default {
+    title: 'FileInput',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Sélection de fichier avec validation MIME, nue : on la place dans un FormControl pour son libellé, son aide et sa validation.',
+    component: FileInput,
+    styleFn: useStyles,
+};
+export const Default = () => {
+    const [file, setFile] = useState(null);
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Document", children: _jsx(FileInput, { value: file, onChange: setFile }) }), _jsx(FormControl, { label: "Image uniquement", children: _jsx(FileInput, { type: "image/*", value: file, onChange: setFile }) }), _jsx(FormControl, { label: "Avec erreur", error: "Ce champ est requis", children: _jsx(FileInput, { value: null, onChange: () => { } }) }), _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(FileInput, { value: null, onChange: () => { }, disabled: true }) })] }));
+};
+export const Multiple = () => {
+    const [files, setFiles] = useState(null);
+    return (_jsx(FormControl, { label: "Documents", children: _jsx(FileInput, { value: files, onChange: setFiles, multiple: true }) }));
+};
+export * as Sources from './FileInput.stories.sources';

package/dist/ui/{FileField/FileField.stories.sources.d.ts → FormControl/FileInput.stories.sources.d.ts}

@@ -5,4 +5,4 @@ export declare const storySources: {
     readonly Multiple: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
-//# sourceMappingURL=FileField.stories.sources.d.ts.map
+//# sourceMappingURL=FileInput.stories.sources.d.ts.map

package/dist/ui/FormControl/FileInput.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FileInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuuB,CAAC;AAE5vB,eAAO,MAAM,QAAQ,cAAwP,CAAC;AAE9Q,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/FormControl/FileInput.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [file, setFile] = useState<FileInputValue>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Document\">\n        <FileInput value={file} onChange={setFile} />\n      </FormControl>\n      <FormControl label=\"Image uniquement\">\n        <FileInput type=\"image/*\" value={file} onChange={setFile} />\n      </FormControl>\n      <FormControl label=\"Avec erreur\" error=\"Ce champ est requis\">\n        <FileInput value={null} onChange={() => {}} />\n      </FormControl>\n      <FormControl label=\"Désactivé\" disabled>\n        <FileInput value={null} onChange={() => {}} disabled />\n      </FormControl>\n    </Box>\n  );\n};";
+export const Multiple = () => "export const Multiple = () => {\n  const [files, setFiles] = useState<FileInputValue>(null);\n  return (\n    <FormControl label=\"Documents\">\n      <FileInput value={files} onChange={setFiles} multiple />\n    </FormControl>\n  );\n};";
+export const storySources = {
+    Default,
+    Multiple,
+};

package/dist/ui/FormControl/{FormControlFileInput.styles.d.ts → FileInput.styles.d.ts}

@@ -42,4 +42,4 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
 };
-//# sourceMappingURL=FormControlFileInput.styles.d.ts.map
+//# sourceMappingURL=FileInput.styles.d.ts.map

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

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

package/dist/ui/FormControl/{FormControlFileInput.styles.js → FileInput.styles.js}

@@ -3,7 +3,7 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     fileInputContainer: {
         display: 'flex',
         flexDirection: 'row',
-        gap: spacing('050'),
+        gap: spacing('1W'),
         alignItems: 'center',
     },
     fileInputButton: {
@@ -14,10 +14,10 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        paddingLeft: spacing('050'),
-        paddingRight: spacing('050'),
-        paddingTop: spacing('0375'),
-        paddingBottom: spacing('0375'),
+        paddingLeft: spacing('1W'),
+        paddingRight: spacing('1W'),
+        paddingTop: spacing('1,5V'),
+        paddingBottom: spacing('1,5V'),
     },
     fileInputButtonHovered: {
         backgroundColor: color.background['contrast-grey'],

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

@@ -1,12 +1,21 @@
 import React from 'react';
 import { TextInput as ReactNativeTextInput } from 'react-native';
-import { BoxProps } from '../../core';
-export type FormControlProps = React.PropsWithChildren & {
+import { BoxProps } from '../../core/Box';
+import { FormControlCaptionProps } from './FormControlCaption';
+import { FormControlHintProps } from './FormControlHint';
+import { FormControlLabelProps } from './FormControlLabel';
+export type FormControlProps = React.PropsWithChildren & Pick<FormControlHintProps, 'hint'> & FormControlCaptionProps & Pick<FormControlLabelProps, 'labelRight'> & {
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
     style?: BoxProps['style'];
 };
 export declare const FormControl: React.ForwardRefExoticComponent<{
     children?: React.ReactNode | undefined;
-} & {
+} & Pick<FormControlHintProps, "hint"> & FormControlCaptionProps & Pick<FormControlLabelProps, "labelRight"> & {
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
     style?: BoxProps["style"];
 } & React.RefAttributes<ReactNativeTextInput>>;
 //# sourceMappingURL=FormControl.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAO,QAAQ,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,GAAG;IAAE,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEvF,eAAO,MAAM,WAAW;;;YAF2C,QAAQ,CAAC,OAAO,CAAC;8CAYlF,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,OAAO,EAAsB,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,GACpD,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAClC,uBAAuB,GACvB,IAAI,CAAC,qBAAqB,EAAE,YAAY,CAAC,GAAG;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC;AAEJ,eAAO,MAAM,WAAW;;;YANZ,MAAM;eACH,OAAO;eACP,OAAO;YACV,QAAQ,CAAC,OAAO,CAAC;8CAsB3B,CAAC"}

package/dist/ui/FormControl/FormControl.js

@@ -1,9 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { InputHeading } from '../InputHeading';
+import { FieldIdProvider } from './FieldId';
 import { useStyles } from './FormControl.styles';
+import { FormControlCaption } from './FormControlCaption';
+import { FormControlHint } from './FormControlHint';
+import { FormControlLabel } from './FormControlLabel';
 export const FormControl = React.forwardRef(function FormControl(props, _ref) {
-    const { children, style } = props;
+    const { children, label, labelRight, hint, error, success, disabled, required, style } = props;
     const styles = useStyles();
-    return (_jsx(Box, { tag: "form-control", style: [styles.formControl, style], children: children }));
+    return (_jsx(FieldIdProvider, { label: label, disabled: disabled, required: required, children: _jsxs(Box, { tag: "form-control", style: [styles.formControl, style], children: [(!!label || !!hint) && (_jsxs(InputHeading, { children: [!!label && _jsx(FormControlLabel, { label: label, labelRight: labelRight }), !!hint && _jsx(FormControlHint, { hint: hint })] })), children, (!!error || !!success) && _jsx(FormControlCaption, { error: error, success: success })] }) }));
 });

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

@@ -5,47 +5,109 @@ declare const _default: {
     description: string;
     component: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;
-    } & {
+    } & Pick<import("./FormControlHint").FormControlHintProps, "hint"> & import("./FormControlCaption").FormControlCaptionProps & Pick<import("./FormControlLabel").FormControlLabelProps, "labelRight"> & {
+        label?: string;
+        disabled?: boolean;
+        required?: boolean;
         style?: import("../..").BoxProps["style"];
     } & import("react").RefAttributes<import("react-native").TextInput>>;
     styleFn: () => {
-        formControl: {
+        caption: {
             display: "flex";
-            flexDirection: "column";
+            flexDirection: "row";
             gap: string | number;
+            alignItems: "flex-start";
+            marginTop: string | number;
             width: "100%";
         };
-        labelContainer: {
-            display: "flex";
-            flexDirection: "row";
-            justifyContent: "space-between";
+        captionIcon: {
+            flexShrink: number;
+            marginTop: number;
         };
-        label: {
-            color: string;
-            fontSize: 14;
+        captionText: {
+            flex: number;
+            flexShrink: number;
+            minWidth: number;
+            fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        labelDisabled: {
+        errorText: {
             color: string;
         };
-        hintContainer: {
+        successText: {
+            color: string;
+        };
+        modalOverlay: {
+            flex: number;
+            backgroundColor: string;
+        };
+        modalSheet: {
+            width: "100%";
+            flex: number;
+        };
+        modalContent: {
+            flex: number;
+            backgroundColor: "#FFFFFF";
+            borderTopLeftRadius: import("@alveole/theme").Radius;
+            borderTopRightRadius: import("@alveole/theme").Radius;
+            padding: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+        };
+        modalHeader: {
             display: "flex";
             flexDirection: "row";
             justifyContent: "space-between";
+            alignItems: "center";
+            marginBottom: string | number;
         };
-        hint: {
+        modalHeaderLeft: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        modalHeaderRight: {
+            display: "flex";
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        modalFooter: {
+            marginTop: string | number;
+        };
+        modalInputContainer: {
+            borderRadius: import("@alveole/theme").Radius;
+            borderWidth: number;
+            borderColor: string;
+            backgroundColor: "#FFFFFF";
+            minHeight: number;
+        };
+        modalInput: {
             color: string;
-            fontSize: 12;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            minHeight: number;
+            flex: number;
+            fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        hintDisabled: {
-            color: string;
+        inputFocused: import("@alveole/theme").FocusBorderStyle;
+        inputError: {
+            borderColor: string;
+        };
+        inputSuccess: {
+            borderColor: string;
+        };
+        inputDisabled: {
+            backgroundColor: string;
+            borderColor: string;
         };
         inputContainer: {
             width: "100%";
@@ -55,7 +117,7 @@ declare const _default: {
             flexDirection: "row";
             gap: string | number;
             padding: number;
-            borderRadius: number;
+            borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
             borderColor: string;
             backgroundColor: "#FFFFFF";
@@ -72,30 +134,11 @@ declare const _default: {
             fontSize: 14;
             marginTop: string | number;
             marginBottom: string | number;
-            paddingLeft: string | number;
-            paddingRight: string | number;
+            paddingLeft: number;
+            paddingRight: number;
             minHeight: number | undefined;
             flex: number;
         };
-        inputError: {
-            borderColor: string;
-        };
-        inputSuccess: {
-            borderColor: string;
-        };
-        inputDisabled: {
-            borderColor: string;
-        };
-        inputFocused: {
-            outlineStyle: "solid";
-            outlineWidth: number;
-            outlineColor: string;
-            outlineOffset: number;
-            borderColor: string | undefined;
-        };
-        inputFile: {
-            margin: number;
-        };
         inputFileText: {
             fontSize: 14;
             lineHeight: 20;
@@ -104,108 +147,55 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
             color: string;
         };
-        inputFileClear: {
-            position: "absolute";
-            right: number;
-        };
-        inputFileIcon: {
-            marginTop: string;
-            marginBottom: string;
-        };
         inputWeb: {
             borderWidth: number;
             borderStyle: "none";
             outline: string;
             backgroundColor: "transparent";
             lineHeight: string;
+            height: 20;
+            paddingTop: number;
+            paddingBottom: number;
         };
-        modalOverlay: {
-            flex: number;
-            backgroundColor: string;
-        };
-        modalSheet: {
+        formControl: {
+            display: "flex";
+            flexDirection: "column";
+            gap: string | number;
             width: "100%";
-            flex: number;
         };
-        modalContent: {
-            flex: number;
-            backgroundColor: "#FFFFFF";
-            borderTopLeftRadius: number;
-            borderTopRightRadius: number;
-            padding: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-        };
-        modalHeader: {
+        labelContainer: {
             display: "flex";
             flexDirection: "row";
             justifyContent: "space-between";
-            alignItems: "center";
-            marginBottom: string | number;
-        };
-        modalHeaderLeft: {
-            display: "flex";
-            flexDirection: "row";
-            alignItems: "center";
-        };
-        modalHeaderRight: {
-            display: "flex";
-            flexDirection: "row";
-            alignItems: "center";
-        };
-        modalFooter: {
-            marginTop: string | number;
         };
-        modalInputContainer: {
-            borderRadius: number;
-            borderWidth: number;
-            borderColor: string;
-            backgroundColor: "#FFFFFF";
-            minHeight: number;
-        };
-        modalInput: {
+        label: {
             color: string;
-            paddingLeft: string | number;
-            paddingRight: string | number;
-            paddingTop: string | number;
-            paddingBottom: string | number;
-            minHeight: number;
-            flex: number;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        caption: {
+        labelDisabled: {
+            color: string;
+        };
+        hintContainer: {
             display: "flex";
             flexDirection: "row";
-            gap: string | number;
-            alignItems: "flex-start";
-            marginTop: string | number;
-            width: "100%";
-        };
-        captionIcon: {
-            flexShrink: number;
-            marginTop: number;
+            justifyContent: "space-between";
         };
-        captionText: {
-            flex: number;
-            flexShrink: number;
-            minWidth: number;
+        hint: {
+            color: string;
             fontSize: 12;
             lineHeight: 20;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
-        errorText: {
-            color: string;
-        };
-        successText: {
+        hintDisabled: {
             color: string;
         };
-        optionalText: {
+        requiredMarker: {
             color: string;
             marginLeft: string | number;
             fontSize: 14;
@@ -220,15 +210,10 @@ export default _default;
 export declare const WithTextInput: () => import("react").JSX.Element;
 export declare const WithError: () => import("react").JSX.Element;
 export declare const WithSuccess: () => import("react").JSX.Element;
-export declare const Multiline: () => import("react").JSX.Element;
-export declare const MultilineWithModal: () => import("react").JSX.Element;
 export declare const Label: () => import("react").JSX.Element;
 export declare const Caption: () => import("react").JSX.Element;
 export declare const Hint: () => import("react").JSX.Element;
 export declare const Modal: () => import("react").JSX.Element;
-export declare const NumberInput: () => import("react").JSX.Element;
 export declare const DateInput: () => import("react").JSX.Element;
-export declare const FileInput: () => import("react").JSX.Element;
-export declare const OtpInput: () => import("react").JSX.Element;
 export * as Sources from './FormControl.stories.sources';
 //# sourceMappingURL=FormControl.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,wBAOkB;AAElB,eAAO,MAAM,aAAa,mCAQzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAQrB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAQvB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAOrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAiB9B,CAAC;AAEF,eAAO,MAAM,KAAK,mCAQjB,CAAC;AAEF,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAejB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAqCvB,CAAC;AAEF,eAAO,MAAM,SAAS,mCA0BrB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAwBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAWpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"FormControl.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,wBAOkB;AAElB,eAAO,MAAM,aAAa,mCAQzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAQrB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAQvB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,mCAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,mCAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,mCAejB,CAAC;AAEF,eAAO,MAAM,SAAS,mCA0BrB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

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

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Button } from '../Button';
 import { InputHeading } from '../InputHeading';
 import { FormControl } from './FormControl';
 import { useStyles } from './FormControl.styles';
 import { FormControlCaption } from './FormControlCaption';
 import { FormControlDateInput } from './FormControlDateInput';
-import { FormControlFileInput } from './FormControlFileInput';
 import { FormControlHint } from './FormControlHint';
 import { FormControlLabel } from './FormControlLabel';
 import { FormControlModal } from './FormControlModal';
-import { FormControlNumberInput } from './FormControlNumberInput';
-import { FormControlOtpInput } from './FormControlOtpInput';
 import { TextInput } from './TextInput';
 export default {
     title: 'FormControl',
@@ -22,37 +20,20 @@ export default {
     component: FormControl,
     styleFn: useStyles,
 };
-export const WithTextInput = () => (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [_jsx(FormControlLabel, { label: "Adresse email" }), _jsx(FormControlHint, { hint: "Votre email professionnel" })] }), _jsx(TextInput, { placeholder: "jean@exemple.fr", keyboardType: "email-address" })] }));
-export const WithError = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email", error: "Format invalide" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { error: "Format invalide" })] }));
-export const WithSuccess = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email", success: "Email valide" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { success: "Email valide" })] }));
-export const Multiline = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Message" }) }), _jsx(TextInput, { placeholder: "Votre message...", multiline: true, numberOfLines: 4 })] }));
-export const MultilineWithModal = () => {
-    const [text, setText] = useState('');
-    return (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Description" }) }), _jsx(TextInput, { value: text, onChangeText: setText, placeholder: "Taper pour ouvrir la modale de saisie...", multiline: true, openModal: true, modalSubmitLabel: "Confirmer" })] }));
-};
-export const Label = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlLabel, { label: "Label par defaut" }), _jsx(FormControlLabel, { label: "Desactive", disabled: true }), _jsx(FormControlLabel, { label: "Erreur", error: "Message erreur" }), _jsx(FormControlLabel, { label: "Succes", success: "Message succes" }), _jsx(FormControlLabel, { label: "Avec badge", labelRight: _jsx(Typography, { children: "Optionnel" }) })] }));
+export const WithTextInput = () => (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [_jsx(FormControlLabel, { label: "Adresse email" }), _jsx(FormControlHint, { hint: "Votre email professionnel" })] }), _jsx(TextInput, { placeholder: "jean@exemple.fr" })] }));
+export const WithError = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { error: "Format invalide" })] }));
+export const WithSuccess = () => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Adresse email" }) }), _jsx(TextInput, { placeholder: "jean@exemple.fr" }), _jsx(FormControlCaption, { success: "Email valide" })] }));
+export const Label = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlLabel, { label: "Label par defaut" }), _jsx(FormControlLabel, { label: "Desactive", disabled: true }), _jsx(FormControlLabel, { label: "Avec badge", labelRight: _jsx(Typography, { children: "Optionnel" }) })] }));
 export const Caption = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlCaption, { error: "Champ requis" }), _jsx(FormControlCaption, { success: "Valeur correcte" })] }));
 export const Hint = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControlHint, { hint: "Texte descriptif du champ" }), _jsx(FormControlHint, { hint: "Texte desactive", disabled: true })] }));
 export const Modal = () => {
     const [open, setOpen] = useState(false);
     return (_jsxs(Box, { children: [_jsx(Button, { variant: "secondary", title: "Ouvrir la modale", onPress: () => setOpen(true) }), _jsx(FormControlModal, { open: open, onClose: () => setOpen(false), submitLabel: "Valider", onSubmit: () => setOpen(false), children: _jsx(TextInput, { placeholder: "Saisir un texte...", multiline: true, numberOfLines: 6 }) })] }));
 };
-export const NumberInput = () => {
-    const [value, setValue] = useState(null);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Montant" }) }), _jsx(FormControlNumberInput, { value: value, onChange: setValue, placeholder: "0" })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Avec unites" }) }), _jsx(FormControlNumberInput, { value: value, onChange: setValue, startAdornment: _jsx(Box, { style: { paddingLeft: 8, paddingRight: 4 }, children: _jsx(Typography, { children: "\u20AC" }) }), endAdornment: _jsx(Box, { style: { paddingLeft: 4, paddingRight: 8 }, children: _jsx(Typography, { children: "TTC" }) }) })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Desactive" }) }), _jsx(FormControlNumberInput, { value: 42, onChange: () => { }, disabled: true })] })] }));
-};
 export const DateInput = () => {
     const [date, setDate] = useState('');
     const [time, setTime] = useState('');
     const [month, setMonth] = useState('');
     return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Date" }) }), _jsx(FormControlDateInput, { type: "date", value: date, onChange: setDate })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Heure" }) }), _jsx(FormControlDateInput, { type: "time", value: time, onChange: setTime })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Mois" }) }), _jsx(FormControlDateInput, { type: "month", value: month, onChange: setMonth })] })] }));
 };
-export const FileInput = () => {
-    const [file, setFile] = useState(null);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Piece jointe" }) }), _jsx(FormControlFileInput, { value: file, onChange: setFile })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Plusieurs fichiers" }) }), _jsx(FormControlFileInput, { value: file, onChange: setFile, multiple: true })] }), _jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Desactive", disabled: true }) }), _jsx(FormControlFileInput, { value: null, onChange: () => { }, disabled: true })] })] }));
-};
-export const OtpInput = () => {
-    const [code, setCode] = useState('');
-    return (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: "Code de verification" }) }), _jsx(FormControlOtpInput, { numberOfDigits: 6, onTextChange: setCode }), code.length === 6 && _jsx(FormControlCaption, { success: `Code saisi : ${code}` })] }));
-};
 export * as Sources from './FormControl.stories.sources';

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

@@ -1,30 +1,20 @@
 export declare const WithTextInput: () => string;
 export declare const WithError: () => string;
 export declare const WithSuccess: () => string;
-export declare const Multiline: () => string;
-export declare const MultilineWithModal: () => string;
 export declare const Label: () => string;
 export declare const Caption: () => string;
 export declare const Hint: () => string;
 export declare const Modal: () => string;
-export declare const NumberInput: () => string;
 export declare const DateInput: () => string;
-export declare const FileInput: () => string;
-export declare const OtpInput: () => string;
 export declare const storySources: {
     readonly WithTextInput: () => string;
     readonly WithError: () => string;
     readonly WithSuccess: () => string;
-    readonly Multiline: () => string;
-    readonly MultilineWithModal: () => string;
     readonly Label: () => string;
     readonly Caption: () => string;
     readonly Hint: () => string;
     readonly Modal: () => string;
-    readonly NumberInput: () => string;
     readonly DateInput: () => string;
-    readonly FileInput: () => string;
-    readonly OtpInput: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=FormControl.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAmU,CAAC;AAE9V,eAAO,MAAM,SAAS,cAAkT,CAAC;AAEzU,eAAO,MAAM,WAAW,cAAkT,CAAC;AAE3U,eAAO,MAAM,SAAS,cAAyP,CAAC;AAEhR,eAAO,MAAM,kBAAkB,cAA6d,CAAC;AAE7f,eAAO,MAAM,KAAK,cAAsc,CAAC;AAEzd,eAAO,MAAM,OAAO,cAA8N,CAAC;AAEnP,eAAO,MAAM,IAAI,cAAuO,CAAC;AAEzP,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,WAAW,cAA8sC,CAAC;AAEvuC,eAAO,MAAM,SAAS,cAA65B,CAAC;AAEp7B,eAAO,MAAM,SAAS,cAA+2B,CAAC;AAEt4B,eAAO,MAAM,QAAQ,cAAyZ,CAAC;AAE/a,eAAO,MAAM,YAAY;;;;;;;;;;;;;;CAcf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAoS,CAAC;AAE/T,eAAO,MAAM,SAAS,cAAwR,CAAC;AAE/S,eAAO,MAAM,WAAW,cAAyR,CAAC;AAElT,eAAO,MAAM,KAAK,cAA4T,CAAC;AAE/U,eAAO,MAAM,OAAO,cAA8N,CAAC;AAEnP,eAAO,MAAM,IAAI,cAAuO,CAAC;AAEzP,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,SAAS,cAA65B,CAAC;AAEp7B,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}