@alveole/components 1.10.0 → 2.0.0-alpha.1

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;CAC7D,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAmBhD,CAAC"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;CAC7D,CAAC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAmBhD,CAAC"}

package/dist/ui/PageHeader/PageHeader.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '../../core';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
 import { Breadcrumbs } from '../Breadcrumbs';
 import { useStyles } from './PageHeader.styles';
 /**

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

@@ -2,6 +2,7 @@ declare const _default: {
     title: string;
     tags: "ui"[];
     experimental: false;
+    figmaURL: string;
     description: string;
     component: (props: import("./PageHeader").PageHeaderProps) => import("react").JSX.Element;
     styleFn: () => {
@@ -19,8 +20,8 @@ declare const _default: {
         };
         title: {
             color: string;
-            fontSize: 28 | 32;
-            lineHeight: 36 | 32;
+            fontSize: 24 | 22;
+            lineHeight: 28 | 32;
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAOkB;AAElB,eAAO,MAAM,OAAO,mCAInB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAWvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"PageHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAAgD,CAAC;AAErE,eAAO,MAAM,WAAW,mCAWvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

package/dist/ui/PageHeader/PageHeader.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
 import { Button } from '../Button';
 import { PageHeader } from './PageHeader';
 import { useStyles } from './PageHeader.styles';
@@ -7,10 +7,13 @@ export default {
     title: 'PageHeader',
     tags: ['ui'],
     experimental: false,
-    description: 'En-tête de page : fil d’Ariane, puis titre à gauche et actions à droite. Le titre est est H1.',
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=1860-3740',
+    description: 'En-tête d’un écran d’application : fil d’Ariane, puis titre à gauche et actions à droite. ' +
+        'Le titre est le h1 de la page, dans le registre applicatif : 24, comme Atlassian. Un site de ' +
+        'documentation ou une vitrine se titrent dans un autre registre et n’empruntent pas ce composant.',
     component: PageHeader,
     styleFn: useStyles,
 };
-export const Default = () => (_jsx(Box, { p: 4, children: _jsx(PageHeader, { title: "Titre de la page" }) }));
-export const WithActions = () => (_jsx(Box, { p: 4, children: _jsx(PageHeader, { title: "D\u00E9tail de la mission", actions: _jsx(_Fragment, { children: _jsx(Button, { variant: "primary", title: "Enregistrer", size: "sm", onPress: () => { } }) }) }) }));
+export const Default = () => _jsx(PageHeader, { title: "Titre de la page" });
+export const WithActions = () => (_jsx(Box, { width: "100%", children: _jsx(PageHeader, { title: "D\u00E9tail de la mission", actions: _jsx(_Fragment, { children: _jsx(Button, { variant: "primary", title: "Enregistrer", size: "sm", onPress: () => { } }) }) }) }));
 export * as Sources from './PageHeader.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAqH,CAAC;AAE1I,eAAO,MAAM,WAAW,cAA2R,CAAC;AAEpT,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"PageHeader.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/PageHeader/PageHeader.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAkF,CAAC;AAEvG,eAAO,MAAM,WAAW,cAAoS,CAAC;AAE7T,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/PageHeader/PageHeader.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box p={4}>\n    <PageHeader title=\"Titre de la page\" />\n  </Box>\n);";
-export const WithActions = () => "export const WithActions = () => (\n  <Box p={4}>\n    <PageHeader\n      title=\"Détail de la mission\"\n      actions={\n        <>\n          <Button variant=\"primary\" title=\"Enregistrer\" size=\"sm\" onPress={() => {}} />\n        </>\n      }\n    />\n  </Box>\n);";
+export const Default = () => "export const Default = () => <PageHeader title=\"Titre de la page\" />;";
+export const WithActions = () => "export const WithActions = () => (\n  <Box width=\"100%\">\n    <PageHeader\n      title=\"Détail de la mission\"\n      actions={\n        <>\n          <Button variant=\"primary\" title=\"Enregistrer\" size=\"sm\" onPress={() => {}} />\n        </>\n      }\n    />\n  </Box>\n);";
 export const storySources = {
     Default,
     WithActions,

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

@@ -13,8 +13,8 @@ export declare const useStyles: () => {
     };
     title: {
         color: string;
-        fontSize: 28 | 32;
-        lineHeight: 36 | 32;
+        fontSize: 24 | 22;
+        lineHeight: 28 | 32;
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];

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

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

package/dist/ui/PageHeader/PageHeader.styles.js

@@ -3,7 +3,7 @@ export const useStyles = makeStyles(({ color, text, spacing }) => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
-        gap: spacing('1W'),
+        gap: spacing('1V'),
     },
     row: {
         display: 'flex',
@@ -13,14 +13,16 @@ export const useStyles = makeStyles(({ color, text, spacing }) => ({
         gap: spacing('1V'),
     },
     title: {
-        ...text.Titres['H2 - LG'],
+        // Registre applicatif, pas celui d'un site de documentation : Atlassian titre ses pages a
+        // 24, Primer a 20. Le catalogue, lui, compose son titre a part.
+        ...text.Titres['H4 - SM'],
         color: color.light.text['title-grey'],
     },
     actions: {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        gap: spacing('050'),
+        gap: spacing('1W'),
         flexShrink: 0,
     },
 }));

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/ui/Popover/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyC,YAAY,IAAI,mBAAmB,EAAU,MAAM,SAAS,CAAC;AAG7G,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7D,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,KAAK,CAAC,iBAAiB,CAAC;IACtB,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC5C,aAAa,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,CAAC,CAAC;AAEL,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,sBA2D1C,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/ui/Popover/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyC,YAAY,IAAI,mBAAmB,EAAU,MAAM,SAAS,CAAC;AAI7G,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7D,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,KAAK,CAAC,iBAAiB,CAAC;IACtB,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC5C,aAAa,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,CAAC,CAAC;AAEL,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,sBAqD1C,CAAC"}

package/dist/ui/Popover/Popover.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from '@alveole/theme';
 import React from 'react';
 import { ScrollView, Popover as TamaguiPopover, YStack } from 'tamagui';
+import { margesDePopover } from './Popover.marges';
 import { useStyles } from './Popover.styles';
 export const Popover = (props) => {
     const { children, placement, renderTrigger, scrollable = true, open: controlledOpen, setOpen: controlledSetOpen, ...popoverStyles } = props;
@@ -16,13 +17,7 @@ export const Popover = (props) => {
     }, [controlledSetOpen, isControlled]);
     const styles = useStyles();
     const { spacing, spacingValue } = useTheme();
-    const spacings = {
-        p: 0,
-        mr: placement?.includes('left') ? spacing('025') : undefined,
-        mb: placement?.includes('top') ? spacing('025') : undefined,
-        ml: placement?.includes('right') ? spacing('025') : undefined,
-        mt: placement?.includes('bottom') ? spacing('025') : undefined,
-    };
+    const spacings = { p: 0, ...margesDePopover(placement, spacing('1V')) };
     const maxH = popoverStyles.maxH ?? 500;
     const maxW = popoverStyles.maxW ?? '100%';
     return (_jsxs(TamaguiPopover, { placement: placement, disableFocus: true, open: open, onOpenChange: setOpen, children: [_jsx(TamaguiPopover.Trigger, { asChild: true, children: renderTrigger({ open }) }), _jsx(TamaguiPopover.Content, { trapFocus: false, disableFocusScope: true, ...spacings, 

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

@@ -0,0 +1,4 @@
+export declare const margesDePopover: (placement: string | undefined, cran: string | number) => {
+    [k: string]: string | number;
+};
+//# sourceMappingURL=Popover.marges.d.ts.map

package/dist/ui/Popover/Popover.marges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.marges.d.ts","sourceRoot":"","sources":["../../../src/ui/Popover/Popover.marges.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,GAAG,SAAS,EAAE,MAAM,MAAM,GAAG,MAAM;;CAKjF,CAAC"}

package/dist/ui/Popover/Popover.marges.js

@@ -0,0 +1,7 @@
+// Un popover se decale d'un cran a l'oppose de son ancrage, pour ne pas coller au declencheur.
+// Ancre a gauche, il pousse sa marge a droite, et ainsi de suite. Ces quatre cas tenaient dans
+// quatre ternaires au milieu du composant, ou ils faisaient a eux seuls la moitie de sa complexite.
+const MARGE_PAR_ANCRAGE = { left: 'mr', top: 'mb', right: 'ml', bottom: 'mt' };
+export const margesDePopover = (placement, cran) => Object.fromEntries(Object.entries(MARGE_PAR_ANCRAGE)
+    .filter(([ancrage]) => placement?.includes(ancrage))
+    .map(([, marge]) => [marge, cran]));

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

@@ -4,7 +4,7 @@ declare const _default: {
     experimental: false;
     description: string;
     figmaURL: string;
-    component: (props: import("@alveole/components").PopoverProps) => import("react").JSX.Element;
+    component: (props: import("./Popover").PopoverProps) => import("react").JSX.Element;
     styleFn: () => {
         content: {
             display: "flex";
@@ -20,7 +20,7 @@ declare const _default: {
             borderColor: string;
             backgroundColor: string;
         } | {
-            shadowColor: import("@alveole/theme").Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Popover/Popover.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAuCnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Popover/Popover.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAuCnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Popover/Popover.stories.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Button, Typography } from '@alveole/components';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Button } from '../Button';
 import { Popover } from './Popover';
 import { useStyles } from './Popover.styles';
 export default {

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

@@ -13,7 +13,7 @@ export declare const useStyles: () => {
         borderColor: string;
         backgroundColor: string;
     } | {
-        shadowColor: import("@alveole/theme").Color;
+        shadowColor: string;
         shadowOffset: {
             width: number;
             height: number;

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

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

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

@@ -1 +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"}
+{"version":3,"file":"PriceInput.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGjE,OAAO,EAAE,gBAAgB,EAAoB,MAAM,gBAAgB,CAAC;AAIpE,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,UAAU;gBALT,OAAO;aACV,QAAG;eACD,gBAAgB,CAAC,UAAU,CAAC;8CAuCvC,CAAC"}

package/dist/ui/PriceInput/PriceInput.js

@@ -1,16 +1,19 @@
 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 { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { useFieldFocus } from '../FormControl/useFieldFocus';
 import { useStyles } from './PriceInput.styles';
 export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
     const { value, devise, onChange, ...inputProps } = props;
     const styles = useStyles();
+    const champ = useFieldFocus({ disabled: props.disabled, readOnly: props.readOnly });
     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: {
+    return (_jsx(Box, { tag: "price-input", style: { ...styles.container, ...(champ.focus ? styles.containerFocused : {}) }, 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 || '€' })] }) }));
+                    }, onFocus: champ.handleFocus, onBlur: champ.handleBlur, 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

@@ -4,17 +4,24 @@ declare const _default: {
     experimental: false;
     webOnly: true;
     description: string;
-    component: import("react").ForwardRefExoticComponent<import("..").FormControlNumberInputProps & {
+    component: import("react").ForwardRefExoticComponent<import("..").NumberInputProps & {
         autoFocus?: boolean;
         devise?: "\u20AC";
-        onChange?: import("..").FormControlNumberInputProps["onChange"];
+        onChange?: import("..").NumberInputProps["onChange"];
     } & import("react").RefAttributes<import("react-native").TextInput>>;
     styleFn: () => {
         container: {
+            display: "flex";
+            flexDirection: "column";
+            width: "100%";
             borderBottomWidth: number;
             borderBottomColor: string;
             paddingBottom: string | number;
         };
+        containerFocused: {
+            borderBottomWidth: number;
+            borderBottomColor: string;
+        };
         priceInputContainer: {
             display: "flex";
             flexDirection: "row";

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

@@ -1 +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"}
+{"version":3,"file":"PriceInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAYnB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,8BAA8B,CAAC"}

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box } from '../../core';
+import { Box } from '../../core/Box';
+import { FormControl } from '../FormControl';
 import { PriceInput } from './PriceInput';
 import { useStyles } from './PriceInput.styles';
 export default {
@@ -8,12 +9,12 @@ export default {
     tags: ['ui'],
     experimental: false,
     webOnly: true,
-    description: 'Input montant avec symbole de devise (€). Masque les flèches du champ numérique.',
+    description: 'Input montant avec symbole de devise (€). Masque les flèches du champ numérique. Se place dans un FormControl pour son libellé.',
     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: () => { } })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(FormControl, { label: "Montant", children: _jsx(PriceInput, { value: value, onChange: setValue }) }), _jsx(FormControl, { label: "Montant saisi", children: _jsx(PriceInput, { value: 1250, onChange: () => { } }) })] }));
 };
 export * as Sources from './PriceInput.stories.sources';

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

@@ -1 +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"}
+{"version":3,"file":"PriceInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwb,CAAC;AAE7c,eAAO,MAAM,YAAY;;CAEf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +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 Default = () => "export const Default = () => {\n  const [value, setValue] = useState<number | null>(null);\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n      <FormControl label=\"Montant\">\n        <PriceInput value={value} onChange={setValue} />\n      </FormControl>\n      <FormControl label=\"Montant saisi\">\n        <PriceInput value={1250} onChange={() => {}} />\n      </FormControl>\n    </Box>\n  );\n};";
 export const storySources = {
     Default,
 };

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

@@ -1,9 +1,16 @@
 export declare const useStyles: () => {
     container: {
+        display: "flex";
+        flexDirection: "column";
+        width: "100%";
         borderBottomWidth: number;
         borderBottomColor: string;
         paddingBottom: string | number;
     };
+    containerFocused: {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
     priceInputContainer: {
         display: "flex";
         flexDirection: "row";

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

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

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

@@ -1,9 +1,18 @@
-import { makeStyles } from '@alveole/theme';
+import { focusBorder, makeStyles } from '@alveole/theme';
 export const useStyles = makeStyles(({ text, color, spacing }) => ({
     container: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
         borderBottomWidth: 1,
         borderBottomColor: color.light.border['plain-grey'],
-        paddingBottom: spacing('050'),
+        paddingBottom: spacing('1W'),
+    },
+    // Le champ de prix n'a qu'un trait sous le montant en guise de cadre : c'est donc lui que
+    // le focus recolore, avec la meme definition que la bordure complete des autres champs.
+    containerFocused: {
+        borderBottomWidth: focusBorder().borderWidth,
+        borderBottomColor: focusBorder().borderColor,
     },
     priceInputContainer: {
         display: 'flex',

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

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

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

@@ -1 +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"}
+{"version":3,"file":"PriceInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/PriceInput.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,kBAAkB,CAAC;AAK1B,eAAO,MAAM,UAAU;;;;0CAuCrB,CAAC"}

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

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, FormControl, Typography } from '@alveole/components';
 import React from 'react';
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { useFieldId } from '../FormControl';
+import { useFieldFocus } from '../FormControl/useFieldFocus';
 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 { devise, autoFocus, value, disabled, readOnly, onChange } = props;
     const styles = useStyles();
+    const champ = useFieldFocus({ disabled, readOnly });
     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: {
+    return (_jsx(Box, { tag: "price-input", style: { ...styles.container, ...(champ.focus ? styles.containerFocused : {}) }, children: _jsxs(Box, { tag: "price-input-container", style: styles.priceInputContainer, children: [_jsx("input", { ref: ref, id: useFieldId(), autoFocus: autoFocus, className: "alveole-price-input", style: {
                         ...styles.input,
                         fontVariantNumeric: 'tabular-nums',
                         width: numberLength * 36,
@@ -17,5 +21,5 @@ export const PriceInput = React.forwardRef(function PriceInput(props, ref) {
                     }, 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 || '€' })] }) }));
+                    }, onFocus: champ.handleFocus, onBlur: champ.handleBlur, type: "number", max: MAX_VALUE }), _jsx(Typography, { style: styles.inputDevise, children: devise || '€' })] }) }));
 });

package/dist/ui/ProgressBar/ProgressBar.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from '../../core';
+import { BoxProps } from '../../core/Box';
 type ProgressBarMode = 'determinate' | 'indeterminate' | 'loop';
 export type ProgressBarProps = BoxProps & {
     value?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,KAAK,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,MAAM,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,uCAclD,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK1C,KAAK,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,MAAM,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,uCAclD,CAAC"}

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

@@ -4,18 +4,8 @@ declare const _default: {
     tags: "ui"[];
     experimental: false;
     description: string;
-    component: (props: import("@alveole/components").ProgressBarProps) => React.JSX.Element | null;
+    component: (props: import("./ProgressBar").ProgressBarProps) => React.JSX.Element | null;
     styleFn: () => {
-        determinate: {
-            width: "100%";
-            flexDirection: "row";
-            alignItems: "center";
-        };
-        progressTrack: {
-            width: "100%";
-            overflow: "hidden";
-            position: "relative";
-        };
         progressed: {
             height: "100%";
             borderRadius: import("@alveole/theme").Radius;
@@ -29,19 +19,6 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             backgroundColor: string;
         };
-        remaining: {
-            height: "100%";
-            borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
-        };
-        remainingAbsolute: {
-            position: "absolute";
-            top: number;
-            bottom: number;
-            right: number;
-            borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
-        };
         progress: {
             backgroundColor: string;
             width: "100%";
@@ -56,9 +33,6 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             backgroundColor: string;
         };
-        noRadius: {
-            borderRadius: number;
-        };
         indicator: {
             color: string;
             marginTop: string | number;
@@ -70,6 +44,32 @@ declare const _default: {
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
+        determinate: {
+            width: "100%";
+            flexDirection: "row";
+            alignItems: "center";
+        };
+        progressTrack: {
+            width: "100%";
+            overflow: "hidden";
+            position: "relative";
+        };
+        remaining: {
+            height: "100%";
+            borderRadius: import("@alveole/theme").Radius;
+            backgroundColor: string;
+        };
+        remainingAbsolute: {
+            position: "absolute";
+            top: number;
+            bottom: number;
+            right: number;
+            borderRadius: import("@alveole/theme").Radius;
+            backgroundColor: string;
+        };
+        noRadius: {
+            borderRadius: number;
+        };
     };
 };
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAK1B,wBAOkB;AAElB,eAAO,MAAM,WAAW,yBAAwD,CAAC;AAEjF,eAAO,MAAM,IAAI,yBAAoC,CAAC;AAEtD,eAAO,MAAM,aAAa,yBAA6C,CAAC;AAExE,eAAO,MAAM,aAAa,yBAAkE,CAAC;AAE7F,eAAO,MAAM,QAAQ,yBAAiE,CAAC;AAEvF,eAAO,MAAM,KAAK,yBAmBjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"ProgressBar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressBar/ProgressBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAOkB;AAElB,eAAO,MAAM,WAAW,yBAAwD,CAAC;AAEjF,eAAO,MAAM,IAAI,yBAAoC,CAAC;AAEtD,eAAO,MAAM,aAAa,yBAA6C,CAAC;AAExE,eAAO,MAAM,aAAa,yBAAkE,CAAC;AAE7F,eAAO,MAAM,QAAQ,yBAAiE,CAAC;AAEvF,eAAO,MAAM,KAAK,yBAmBjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC"}

package/dist/ui/ProgressBar/ProgressBar.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button } from '@alveole/components';
 import React from 'react';
+import { Box } from '../../core/Box';
+import { Button } from '../Button';
 import { ProgressBar } from './ProgressBar';
 import { useStyles } from './ProgressBar.styles';
 export default {