@alveole/components 0.42.2 → 0.43.0

package/dist/core/Form/Form.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { BoxProps } from '../Box';
+export type FormProps = BoxProps & {
+    disabledKeyboardOverflow?: boolean;
+};
+export declare const Form: (props: FormProps) => React.JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

package/dist/core/Form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAO,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAGvC,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG;IACjC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAyCpC,CAAC"}

package/dist/core/Form/Form.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Keyboard, Platform, TouchableWithoutFeedback } from 'react-native';
+import { Box } from '../Box';
+import { useStyles } from './Form.styles';
+export const Form = (props) => {
+    const { style, disabledKeyboardOverflow, ...formProps } = props;
+    const styles = useStyles();
+    const [isKeyboardVisible, setKeyboardVisible] = React.useState(false);
+    React.useEffect(() => {
+        const showSubscription = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
+        const hideSubscription = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', () => setKeyboardVisible(false));
+        return () => {
+            showSubscription.remove();
+            hideSubscription.remove();
+        };
+    }, []);
+    const shouldHandleDismiss = isKeyboardVisible && !disabledKeyboardOverflow;
+    return (_jsx(TouchableWithoutFeedback, { onPress: shouldHandleDismiss ? Keyboard.dismiss : undefined, disabled: !shouldHandleDismiss, children: _jsx(Box, { tag: "form", style: [
+                {
+                    ...styles.form,
+                    ...(Platform.OS === 'ios' && isKeyboardVisible && !disabledKeyboardOverflow
+                        ? styles.iosPaddingKeyboard
+                        : Platform.OS === 'android' && isKeyboardVisible && !disabledKeyboardOverflow
+                            ? styles.androidPaddingKeyboard
+                            : {}),
+                },
+                style,
+            ], ...formProps }) }));
+};

package/dist/core/Form/Form.stories.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    title: string;
+    tags: "Core"[];
+    experimental: false;
+    description: string;
+    component: (props: import("./Form").FormProps) => import("react").JSX.Element;
+    styleFn: () => {
+        form: {};
+        iosPaddingKeyboard: {
+            paddingBottom: number;
+        };
+        androidPaddingKeyboard: {
+            paddingBottom: number;
+        };
+    };
+};
+export default _default;
+export declare const WithKeyboardAware: () => import("react").JSX.Element;
+export declare const DisabledOverflow: () => import("react").JSX.Element;
+export * as Sources from './Form.stories.sources';
+//# sourceMappingURL=Form.stories.d.ts.map

package/dist/core/Form/Form.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAOA,wBAQkB;AAIlB,eAAO,MAAM,iBAAiB,mCAQ7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAY5B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/core/Form/Form.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KeyboardAvoidingView, Platform, TextInput as RNTextInput } from 'react-native';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { Form } from './Form';
+import { useStyles } from './Form.styles';
+export default {
+    title: 'Form',
+    tags: ['Core'],
+    experimental: false,
+    description: "Empêche le clavier de cacher les TextInput sur iOS et permet de quitter le clavier au clique sur l'écran. Doit être utilisé pour contenir tous les fomulaires (pas de <form> en React Native).",
+    component: Form,
+    styleFn: useStyles,
+};
+const inputStyle = { borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: 8 };
+export const WithKeyboardAware = () => (_jsx(Form, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsx(Typography, { children: "Taper dans le champ \u2014 cliquer en dehors ferme le clavier." }), _jsx(RNTextInput, { placeholder: "Pr\u00E9nom", style: inputStyle }), _jsx(RNTextInput, { placeholder: "Email", keyboardType: "email-address", style: inputStyle })] }) }));
+export const DisabledOverflow = () => (_jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : 'height', children: _jsx(Form, { disabledKeyboardOverflow: true, children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 12, children: [_jsx(Typography, { children: "disabledKeyboardOverflow \u2014 clavier g\u00E9r\u00E9 par KeyboardAvoidingView. Form ne rajoute pas de padding et ne ferme pas le clavier au tap." }), _jsx(RNTextInput, { placeholder: "Champ texte", style: inputStyle })] }) }) }));
+export * as Sources from './Form.stories.sources';

package/dist/core/Form/Form.stories.sources.d.ts

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

package/dist/core/Form/Form.stories.sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,cAAgZ,CAAC;AAE/a,eAAO,MAAM,gBAAgB,cAAkjB,CAAC;AAEhlB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

package/dist/core/Form/Form.stories.sources.js

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/core/Form/Form.stories.tsx
+export const WithKeyboardAware = () => "export const WithKeyboardAware = () => (\n  <Form>\n    <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n      <Typography>Taper dans le champ — cliquer en dehors ferme le clavier.</Typography>\n      <RNTextInput placeholder=\"Prénom\" style={inputStyle} />\n      <RNTextInput placeholder=\"Email\" keyboardType=\"email-address\" style={inputStyle} />\n    </Box>\n  </Form>\n);";
+export const DisabledOverflow = () => "export const DisabledOverflow = () => (\n  <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>\n    <Form disabledKeyboardOverflow>\n      <Box display=\"flex\" flexDirection=\"column\" gap={12}>\n        <Typography>\n          disabledKeyboardOverflow — clavier géré par KeyboardAvoidingView. Form ne rajoute pas de padding et ne ferme\n          pas le clavier au tap.\n        </Typography>\n        <RNTextInput placeholder=\"Champ texte\" style={inputStyle} />\n      </Box>\n    </Form>\n  </KeyboardAvoidingView>\n);";
+export const storySources = {
+    WithKeyboardAware,
+    DisabledOverflow,
+};

package/dist/core/Form/Form.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const useStyles: () => {
+    form: {};
+    iosPaddingKeyboard: {
+        paddingBottom: number;
+    };
+    androidPaddingKeyboard: {
+        paddingBottom: number;
+    };
+};
+//# sourceMappingURL=Form.styles.d.ts.map

package/dist/core/Form/Form.styles.d.ts.map

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

package/dist/core/Form/Form.styles.js

@@ -0,0 +1,10 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    form: {},
+    iosPaddingKeyboard: {
+        paddingBottom: 200,
+    },
+    androidPaddingKeyboard: {
+        paddingBottom: 250,
+    },
+}));

package/dist/core/Form/Form.web.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FormProps } from './Form';
+export declare const Form: (props: FormProps) => React.JSX.Element;
+//# sourceMappingURL=Form.web.d.ts.map

package/dist/core/Form/Form.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.web.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAcpC,CAAC"}

package/dist/core/Form/Form.web.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Box } from '../Box';
+import { useStyles } from './Form.styles';
+export const Form = (props) => {
+    const { style, ...formProps } = props;
+    const styles = useStyles();
+    const formRef = useRef(null);
+    const webFormProps = {
+        onSubmit: (e) => {
+            e.preventDefault();
+            const button = formRef.current?.querySelector('button[role="button"][aria-selected="true"]');
+            if (button instanceof HTMLElement)
+                button.click();
+        },
+    };
+    return _jsx(Box, { ref: formRef, tag: "form", style: [styles.form, style], ...formProps, ...webFormProps });
+};

package/dist/core/Form/index.d.ts

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

package/dist/core/Form/index.d.ts.map

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

package/dist/core/Form/index.js

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

package/dist/core/index.d.ts

@@ -1,6 +1,7 @@
 export * from './A';
 export * from './AnchorHeading';
 export * from './Box';
+export * from './Form';
 export * from './Highlight';
 export * from './Image';
 export * from './Lottie';

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,KAAK,CAAC;AACpB,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,KAAK,CAAC;AACpB,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC"}

package/dist/core/index.js

@@ -1,6 +1,7 @@
 export * from './A';
 export * from './AnchorHeading';
 export * from './Box';
+export * from './Form';
 export * from './Highlight';
 export * from './Image';
 export * from './Lottie';

package/dist/generated/version.d.ts

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

package/dist/generated/version.js

@@ -1 +1 @@
-export const ALVEOLE_COMPONENTS_VERSION = "0.42.2";
+export const ALVEOLE_COMPONENTS_VERSION = "0.43.0";

package/dist/stories/index.d.ts

@@ -11,6 +11,7 @@ export * as PdfViewerStory from '../core/PdfViewer/PdfViewer.stories';
 export * as SectionStory from '../core/Section/Section.stories';
 export * as TypographyStory from '../core/Typography/Typography.stories';
 export * as VersionStory from '../core/Version/Version.stories';
+export * as FormStory from '../core/Form/Form.stories';
 export * as ActionMenuStory from '../ui/ActionMenu/ActionMenu.stories';
 export * as AvatarStory from '../ui/Avatar/Avatar.stories';
 export * as BadgeStory from '../ui/Badge/Badge.stories';
@@ -20,6 +21,7 @@ export * as CardStory from '../ui/Card/Card.stories';
 export * as DividerStory from '../ui/Divider/Divider.stories';
 export * as DocumentViewerStory from '../ui/DocumentViewer/DocumentViewer.stories';
 export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
+export * as FormControlStory from '../ui/FormControl/FormControl.stories';
 export * as HeaderStory from '../ui/Header/Header.stories';
 export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';

package/dist/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,kBAAkB,MAAM,6CAA6C,CAAC;AAClF,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,SAAS,MAAM,qCAAqC,CAAC;AACjE,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,mBAAmB,MAAM,6CAA6C,CAAC;AACnF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,kBAAkB,MAAM,6CAA6C,CAAC;AAClF,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,SAAS,MAAM,qCAAqC,CAAC;AACjE,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAC7D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,mBAAmB,MAAM,6CAA6C,CAAC;AACnF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,cAAc,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}

package/dist/stories/index.js

@@ -13,6 +13,7 @@ export * as SectionStory from '../core/Section/Section.stories';
 export * as TypographyStory from '../core/Typography/Typography.stories';
 export * as VersionStory from '../core/Version/Version.stories';
 // UI
+export * as FormStory from '../core/Form/Form.stories';
 export * as ActionMenuStory from '../ui/ActionMenu/ActionMenu.stories';
 export * as AvatarStory from '../ui/Avatar/Avatar.stories';
 export * as BadgeStory from '../ui/Badge/Badge.stories';
@@ -22,6 +23,7 @@ export * as CardStory from '../ui/Card/Card.stories';
 export * as DividerStory from '../ui/Divider/Divider.stories';
 export * as DocumentViewerStory from '../ui/DocumentViewer/DocumentViewer.stories';
 export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
+export * as FormControlStory from '../ui/FormControl/FormControl.stories';
 export * as HeaderStory from '../ui/Header/Header.stories';
 export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TextInput as ReactNativeTextInput } from 'react-native';
+import { BoxProps } from '../../core';
+export type FormControlProps = React.PropsWithChildren & {
+    style?: BoxProps['style'];
+};
+export declare const FormControl: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode | undefined;
+} & {
+    style?: BoxProps["style"];
+} & React.RefAttributes<ReactNativeTextInput>>;
+//# sourceMappingURL=FormControl.d.ts.map

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

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

package/dist/ui/FormControl/FormControl.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '../../core';
+import { useStyles } from './FormControl.styles';
+export const FormControl = React.forwardRef(function FormControl(props, _ref) {
+    const { children, style } = props;
+    const styles = useStyles();
+    return (_jsx(Box, { tag: "form-control", style: [styles.formControl, style], children: children }));
+});

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

@@ -0,0 +1,225 @@
+declare const _default: {
+    title: string;
+    tags: "Core"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<{
+        children?: import("react").ReactNode | undefined;
+    } & {
+        style?: import("../..").BoxProps["style"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {
+        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";
+        };
+    };
+};
+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

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,wBAOkB;AAElB,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAMrB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAMvB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAKrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mCAe9B,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,mCA+BvB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAoBrB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAkBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Typography } from '../../core';
+import { Button } from '../Button';
+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',
+    tags: ['Core'],
+    experimental: false,
+    description: 'Eléments de construction de champs de saisie (label, input, helper text).',
+    component: FormControl,
+    styleFn: useStyles,
+};
+export const WithTextInput = () => (_jsxs(FormControl, { children: [_jsx(FormControlLabel, { label: "Adresse email" }), _jsx(TextInput, { placeholder: "jean@exemple.fr", keyboardType: "email-address" }), _jsx(FormControlHint, { hint: "Votre email professionnel" })] }));
+export const WithError = () => (_jsxs(FormControl, { 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(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(FormControlLabel, { label: "Message" }), _jsx(TextInput, { placeholder: "Votre message...", multiline: true, numberOfLines: 4 })] }));
+export const MultilineWithModal = () => {
+    const [text, setText] = useState('');
+    return (_jsxs(FormControl, { 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: 8, 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 Caption = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsx(FormControlCaption, { error: "Champ requis" }), _jsx(FormControlCaption, { success: "Valeur correcte" })] }));
+export const Hint = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, 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(FormControlLabel, { label: "Montant" }), _jsx(FormControlNumberInput, { value: value, onChange: setValue, placeholder: "0" })] }), _jsxs(FormControl, { 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(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(FormControlLabel, { label: "Date" }), _jsx(FormControlDateInput, { type: "date", value: date, onChange: setDate })] }), _jsxs(FormControl, { children: [_jsx(FormControlLabel, { label: "Heure" }), _jsx(FormControlDateInput, { type: "time", value: time, onChange: setTime })] }), _jsxs(FormControl, { 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(FormControlLabel, { label: "Piece jointe" }), _jsx(FormControlFileInput, { value: file, onChange: setFile })] }), _jsxs(FormControl, { children: [_jsx(FormControlLabel, { label: "Plusieurs fichiers" }), _jsx(FormControlFileInput, { value: file, onChange: setFile, multiple: true })] }), _jsxs(FormControl, { 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(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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/FormControl.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,cAAsR,CAAC;AAEjT,eAAO,MAAM,SAAS,cAAuQ,CAAC;AAE9R,eAAO,MAAM,WAAW,cAAuQ,CAAC;AAEhS,eAAO,MAAM,SAAS,cAA8M,CAAC;AAErO,eAAO,MAAM,kBAAkB,cAA8a,CAAC;AAE9c,eAAO,MAAM,KAAK,cAAqc,CAAC;AAExd,eAAO,MAAM,OAAO,cAA6N,CAAC;AAElP,eAAO,MAAM,IAAI,cAAsO,CAAC;AAExP,eAAO,MAAM,KAAK,cAA2f,CAAC;AAE9gB,eAAO,MAAM,WAAW,cAAqjC,CAAC;AAE9kC,eAAO,MAAM,SAAS,cAAowB,CAAC;AAE3xB,eAAO,MAAM,SAAS,cAAstB,CAAC;AAE7uB,eAAO,MAAM,QAAQ,cAA0W,CAAC;AAEhY,eAAO,MAAM,YAAY;;;;;;;;;;;;;;CAcf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}