@alveole/components 0.43.2 → 1.0.0

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

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

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/PasswordField/PasswordField.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <PasswordField label=\"Mot de passe\" placeholder=\"••••••••\" />\n    <PasswordField label=\"Avec erreur\" placeholder=\"••••••••\" error=\"Mot de passe incorrect\" />\n    <PasswordField label=\"Désactivé\" value=\"monMotDePasse\" disabled />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

@@ -0,0 +1,10 @@
+export declare const useStyles: () => {
+    passwordInput: {};
+    visibilityButton: {
+        height: "100%";
+        borderRadius: number;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};
+//# sourceMappingURL=PasswordField.styles.d.ts.map

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

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

package/dist/ui/PasswordField/PasswordField.styles.js

@@ -0,0 +1,10 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    passwordInput: {},
+    visibilityButton: {
+        height: '100%',
+        borderRadius: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+}));

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

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

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

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

package/dist/ui/PasswordField/index.js

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

package/dist/ui/PhoneField/PhoneField.d.ts

@@ -0,0 +1,20 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps, TextInputProps } from '@alveole/components';
+import React from 'react';
+export type PhoneFieldProps = TextInputProps & FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+    onChange?: TextInputProps['onChangeText'];
+};
+export declare const PhoneField: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    disabled?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & FormControlCaptionProps & FormControlHintProps & {
+    onChange?: TextInputProps["onChangeText"];
+} & React.RefAttributes<import("react-native").TextInput>>;
+//# sourceMappingURL=PhoneField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../src/ui/PhoneField/PhoneField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGrB,cAAc,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,eAAe,GAAG,cAAc,GAC1C,qBAAqB,GACrB,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C,CAAC;AAEJ,eAAO,MAAM,UAAU;;;;;;;;;;;;eAHR,cAAc,CAAC,cAAc,CAAC;0DAoB3C,CAAC"}

package/dist/ui/PhoneField/PhoneField.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import React from 'react';
+import { PhoneInput } from '../PhoneInput';
+export const PhoneField = React.forwardRef(function PhoneField(props, ref) {
+    const { label, labelRight, hint, error, success, disabled, onChange } = props;
+    return (_jsxs(FormControl, { children: [_jsxs(InputHeading, { children: [label && (_jsx(FormControlLabel, { labelRight: labelRight, label: label, disabled: disabled, error: error, success: success })), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(PhoneInput, { ref: ref, onChangeText: onChange, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

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

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+        disabled?: boolean;
+        startAdornment?: React.ReactNode;
+        endAdornment?: React.ReactNode;
+        openModal?: boolean;
+        modalSubmitLabel?: string;
+        onModalSubmit?: () => void;
+    } & {
+        label: string;
+        labelRight?: React.ReactNode;
+        disabled?: boolean;
+    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
+        onChange?: import("..").TextInputProps["onChangeText"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './PhoneField.stories.sources';
+//# sourceMappingURL=PhoneField.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneField.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PhoneField/PhoneField.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/PhoneField/PhoneField.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { PhoneField } from './PhoneField';
+export default {
+    title: 'PhoneField',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Champ téléphone avec label.',
+    component: PhoneField,
+    styleFn: () => ({}),
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(PhoneField, { label: "T\u00E9l\u00E9phone", placeholder: "06 12 34 56 78" }), _jsx(PhoneField, { label: "Avec erreur", placeholder: "06 12 34 56 78", error: "Num\u00E9ro invalide" }), _jsx(PhoneField, { label: "D\u00E9sactiv\u00E9", value: "06 12 34 56 78", disabled: true })] }));
+export * as Sources from './PhoneField.stories.sources';

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

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

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

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

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/PhoneField/PhoneField.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <PhoneField label=\"Téléphone\" placeholder=\"06 12 34 56 78\" />\n    <PhoneField label=\"Avec erreur\" placeholder=\"06 12 34 56 78\" error=\"Numéro invalide\" />\n    <PhoneField label=\"Désactivé\" value=\"06 12 34 56 78\" disabled />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

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

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

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

package/dist/ui/PhoneField/index.js

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

package/dist/ui/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,16 @@
+import { TextInputProps } from '@alveole/components';
+import React from 'react';
+export type PhoneInputProps = TextInputProps & {
+    onChange?: TextInputProps['onChangeText'];
+};
+export declare const PhoneInput: React.ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+    disabled?: boolean;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    openModal?: boolean;
+    modalSubmitLabel?: string;
+    onModalSubmit?: () => void;
+} & {
+    onChange?: TextInputProps["onChangeText"];
+} & React.RefAttributes<import("react-native").TextInput>>;
+//# sourceMappingURL=PhoneInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/ui/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG;IAC7C,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;eAHV,cAAc,CAAC,cAAc,CAAC;0DAmBzC,CAAC"}

package/dist/ui/PhoneInput/PhoneInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextInput } from '@alveole/components';
+import React from 'react';
+export const PhoneInput = React.forwardRef(function PhoneInput(props, ref) {
+    const { onChange } = props;
+    return (_jsx(TextInput, { ref: ref, onChangeText: onChange, keyboardType: "phone-pad", textContentType: "telephoneNumber", autoCapitalize: "none", autoComplete: "tel", inputMode: "tel", ...props, autoCorrect: false }));
+});

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

@@ -0,0 +1,21 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "style"> & {
+        disabled?: boolean;
+        startAdornment?: React.ReactNode;
+        endAdornment?: React.ReactNode;
+        openModal?: boolean;
+        modalSubmitLabel?: string;
+        onModalSubmit?: () => void;
+    } & {
+        onChange?: import("..").TextInputProps["onChangeText"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './PhoneInput.stories.sources';
+//# sourceMappingURL=PhoneInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PhoneInput/PhoneInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAIA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/PhoneInput/PhoneInput.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { PhoneInput } from './PhoneInput';
+export default {
+    title: 'PhoneInput',
+    tags: ['ui'],
+    experimental: false,
+    description: 'Input téléphone brut (sans label). Clavier numérique téléphone.',
+    component: PhoneInput,
+    styleFn: () => ({}),
+};
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(PhoneInput, { placeholder: "06 12 34 56 78" }), _jsx(PhoneInput, { placeholder: "06 12 34 56 78", value: "06 12 34 56 78" }), _jsx(PhoneInput, { placeholder: "06 12 34 56 78", editable: false })] }));
+export * as Sources from './PhoneInput.stories.sources';

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

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

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

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

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/PhoneInput/PhoneInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <PhoneInput placeholder=\"06 12 34 56 78\" />\n    <PhoneInput placeholder=\"06 12 34 56 78\" value=\"06 12 34 56 78\" />\n    <PhoneInput placeholder=\"06 12 34 56 78\" editable={false} />\n  </Box>\n);";
+export const storySources = {
+    Default,
+};

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

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

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

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

package/dist/ui/PhoneInput/index.js

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

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

@@ -17,8 +17,8 @@ declare const _default: {
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             borderWidth: number;
             borderStyle: "solid";
-            borderColor: "#DEE3EC";
-            backgroundColor: "#FFFFFF";
+            borderColor: string;
+            backgroundColor: string;
         } | {
             shadowColor: import("@alveole/theme").Color;
             shadowOffset: {
@@ -38,8 +38,8 @@ declare const _default: {
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             borderWidth: number;
             borderStyle: "solid";
-            borderColor: "#DEE3EC";
-            backgroundColor: "#FFFFFF";
+            borderColor: string;
+            backgroundColor: string;
         } | {
             boxShadow: string;
             display: "flex";
@@ -52,8 +52,8 @@ declare const _default: {
             borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
             borderWidth: number;
             borderStyle: "solid";
-            borderColor: "#DEE3EC";
-            backgroundColor: "#FFFFFF";
+            borderColor: string;
+            backgroundColor: string;
         };
     };
 };

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

@@ -10,8 +10,8 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: "#DEE3EC";
-        backgroundColor: "#FFFFFF";
+        borderColor: string;
+        backgroundColor: string;
     } | {
         shadowColor: import("@alveole/theme").Color;
         shadowOffset: {
@@ -31,8 +31,8 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: "#DEE3EC";
-        backgroundColor: "#FFFFFF";
+        borderColor: string;
+        backgroundColor: string;
     } | {
         boxShadow: string;
         display: "flex";
@@ -45,8 +45,8 @@ export declare const useStyles: () => {
         borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
         borderWidth: number;
         borderStyle: "solid";
-        borderColor: "#DEE3EC";
-        backgroundColor: "#FFFFFF";
+        borderColor: string;
+        backgroundColor: string;
     };
 };
 //# sourceMappingURL=Popover.styles.d.ts.map

package/dist/ui/PriceInput/PriceInput.css

@@ -0,0 +1,9 @@
+.alveole-price-input::-webkit-inner-spin-button,
+.alveole-price-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.alveole-price-input {
+  -moz-appearance: textfield;
+}

package/dist/ui/PriceInput/PriceInput.d.ts

@@ -0,0 +1,14 @@
+import { FormControlNumberInputProps } from '@alveole/components';
+import React from 'react';
+import { TextInput as ReactNativeTextInput } from 'react-native';
+export type PriceInputProps = FormControlNumberInputProps & {
+    autoFocus?: boolean;
+    devise?: '€';
+    onChange?: FormControlNumberInputProps['onChange'];
+};
+export declare const PriceInput: React.ForwardRefExoticComponent<FormControlNumberInputProps & {
+    autoFocus?: boolean;
+    devise?: "\u20AC";
+    onChange?: FormControlNumberInputProps["onChange"];
+} & React.RefAttributes<ReactNativeTextInput>>;
+//# sourceMappingURL=PriceInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceInput.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,2BAA2B,EAAgC,MAAM,qBAAqB,CAAC;AAClH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGjE,MAAM,MAAM,eAAe,GAAG,2BAA2B,GAAG;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,2BAA2B,CAAC,UAAU,CAAC,CAAC;CACpD,CAAC;AAEF,eAAO,MAAM,UAAU;gBALT,OAAO;aACV,QAAG;eACD,2BAA2B,CAAC,UAAU,CAAC;8CAoClD,CAAC"}

package/dist/ui/PriceInput/PriceInput.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, Typography } from '@alveole/components';
+import React from 'react';
+import { TextInput as ReactNativeTextInput } from 'react-native';
+import { useStyles } from './PriceInput.styles';
+export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
+    const { value, devise, onChange, ...inputProps } = props;
+    const styles = useStyles();
+    const numberLength = value ? String(value).length : 1;
+    return (_jsx(FormControl, { style: styles.container, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx(ReactNativeTextInput, { ref: ref, style: {
+                        ...styles.input,
+                        minWidth: numberLength * 36,
+                    }, ...inputProps, value: Number.isNaN(value) || value == null ? '' : String(value), onChangeText: e => {
+                        onChange?.(e === '' ? null : Number(e));
+                    }, placeholder: "0", placeholderTextColor: styles.inputPlaceholder.color, keyboardType: 'number-pad', inputMode: 'numeric', returnKeyType: "done", maxLength: 8 }), _jsx(Typography, { style: styles.inputDevise, children: devise || '€' })] }) }));
+});

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

@@ -0,0 +1,51 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    webOnly: true;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<import("..").FormControlNumberInputProps & {
+        autoFocus?: boolean;
+        devise?: "\u20AC";
+        onChange?: import("..").FormControlNumberInputProps["onChange"];
+    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    styleFn: () => {
+        container: {
+            borderBottomWidth: number;
+            borderBottomColor: string;
+            paddingBottom: import("@alveole/theme").Spacing;
+        };
+        priceInputContainer: {
+            display: "flex";
+            flexDirection: "row";
+            justifyContent: "center";
+        };
+        input: {
+            outline: string;
+            borderWidth: number;
+            textAlign: "center";
+            color: string;
+            fontFamily: string;
+            fontSize: 64;
+        };
+        inputPlaceholder: {
+            color: string;
+        };
+        inputDevise: {
+            position: "relative";
+            top: number;
+            fontSize: 64;
+            lineHeight: 72;
+            letterSpacing: 0;
+            fontFamily: string;
+            fontWeight?: import("react-native").TextStyle["fontWeight"];
+            color: string;
+            marginTop: string;
+            marginBottom: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export * as Sources from './PriceInput.stories.sources';
+//# sourceMappingURL=PriceInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/PriceInput/PriceInput.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../../core';
+import { PriceInput } from './PriceInput';
+import { useStyles } from './PriceInput.styles';
+export default {
+    title: 'PriceInput',
+    tags: ['ui'],
+    experimental: false,
+    webOnly: true,
+    description: 'Input montant avec symbole de devise (€). Masque les flèches du champ numérique.',
+    component: PriceInput,
+    styleFn: useStyles,
+};
+export const Default = () => {
+    const [value, setValue] = useState(null);
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(PriceInput, { value: value, onChange: setValue }), _jsx(PriceInput, { value: 1250, onChange: () => { } })] }));
+};
+export * as Sources from './PriceInput.stories.sources';

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

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

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

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

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

@@ -0,0 +1,6 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/PriceInput/PriceInput.stories.tsx
+export const Default = () => "export const Default = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <PriceInput value={value} onChange={setValue} />\n      <PriceInput value={1250} onChange={() => {}} />\n    </Box>\n  );\n};";
+export const storySources = {
+    Default,
+};

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

@@ -0,0 +1,36 @@
+export declare const useStyles: () => {
+    container: {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+        paddingBottom: import("@alveole/theme").Spacing;
+    };
+    priceInputContainer: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "center";
+    };
+    input: {
+        outline: string;
+        borderWidth: number;
+        textAlign: "center";
+        color: string;
+        fontFamily: string;
+        fontSize: 64;
+    };
+    inputPlaceholder: {
+        color: string;
+    };
+    inputDevise: {
+        position: "relative";
+        top: number;
+        fontSize: 64;
+        lineHeight: 72;
+        letterSpacing: 0;
+        fontFamily: string;
+        fontWeight?: import("react-native").TextStyle["fontWeight"];
+        color: string;
+        marginTop: string;
+        marginBottom: string;
+    };
+};
+//# sourceMappingURL=PriceInput.styles.d.ts.map

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

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

package/dist/ui/PriceInput/PriceInput.styles.js

@@ -0,0 +1,32 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ text, color, spacing }) => ({
+    container: {
+        borderBottomWidth: 1,
+        borderBottomColor: color.light.border['plain-grey'],
+        paddingBottom: spacing('050'),
+    },
+    priceInputContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    input: {
+        outline: 'none',
+        borderWidth: 0,
+        textAlign: 'center',
+        color: color.light.text['title-grey'],
+        fontFamily: text['Titres alternatifs'].MD.fontFamily,
+        fontSize: text['Titres alternatifs'].MD.fontSize,
+    },
+    inputPlaceholder: {
+        color: color.light.text['mention-grey'],
+    },
+    inputDevise: {
+        color: color.light.text['title-grey'],
+        marginTop: 'auto',
+        marginBottom: 'auto',
+        ...text['Titres alternatifs'].MD,
+        position: 'relative',
+        top: 2,
+    },
+}));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './PriceInput.css';
+export declare const PriceInput: React.ForwardRefExoticComponent<import("@alveole/components").FormControlNumberInputProps & {
+    autoFocus?: boolean;
+    devise?: "\u20AC";
+    onChange?: import("@alveole/components").FormControlNumberInputProps["onChange"];
+} & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=PriceInput.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAK1B,eAAO,MAAM,UAAU;;;;0CAqCtB,CAAC"}

package/dist/ui/PriceInput/PriceInput.web.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, Typography } from '@alveole/components';
+import React from 'react';
+import './PriceInput.css';
+import { useStyles } from './PriceInput.styles';
+const MAX_VALUE = 99999999;
+export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
+    const { devise, autoFocus, value, onChange } = props;
+    const styles = useStyles();
+    const numberLength = value ? String(value).length : 1;
+    return (_jsx(FormControl, { style: styles.container, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx("input", { ref: ref, autoFocus: autoFocus, className: "alveole-price-input", style: {
+                        ...styles.input,
+                        fontVariantNumeric: 'tabular-nums',
+                        width: numberLength * 36,
+                        lineHeight: 'inherit',
+                        maxWidth: '100%',
+                    }, value: value ?? '', placeholder: "0", onChange: e => {
+                        const newValue = e.target.value;
+                        onChange?.(newValue === '' ? null : Number(newValue));
+                    }, type: "number", max: MAX_VALUE }), _jsx(Typography, { style: styles.inputDevise, children: devise || '€' })] }) }));
+});

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

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

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

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

package/dist/ui/PriceInput/index.js

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