@alveole/components 1.0.1 → 1.1.1

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

@@ -0,0 +1,36 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: true;
+    description: string;
+    component: 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 & {
+        type?: "date" | "datetime" | "month";
+        display?: "default" | "spinner";
+        value?: string;
+        minimumDate?: Date;
+        maximumDate?: Date;
+        onChange?: (date: string) => void;
+        is24Hour?: boolean;
+        minuteInterval?: 1 | 6 | 4 | 12 | 2 | 10 | 3 | 5 | 15 | 20 | 30;
+    } & React.RefAttributes<any>>;
+    styleFn: () => {
+        dateInput: {};
+    };
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const Types: () => React.JSX.Element;
+export * as Sources from './DateInput.stories.sources';
+//# sourceMappingURL=DateInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAOkB;AAElB,eAAO,MAAM,OAAO,yBAcnB,CAAC;AAEF,eAAO,MAAM,KAAK,yBAsBjB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC"}

package/dist/ui/DateInput/DateInput.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '../../core';
+import { Grid } from '../Grid';
+import { DateInput } from './DateInput';
+import { useStyles } from './DateInput.styles';
+export default {
+    title: 'DateInput',
+    tags: ['ui'],
+    experimental: true,
+    description: 'Champs de saisie de date.',
+    component: DateInput,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(Box, { width: '100%', children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(DateInput, { label: "Default", onChange: console.log }) }), _jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(DateInput, { label: "Error", onChange: console.log, error: "Une erreur" }) }), _jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(DateInput, { label: "Disabled", onChange: console.log, disabled: true }) })] }) }));
+export const Types = () => {
+    const [date, setDate] = React.useState();
+    const [datetime, setDatetime] = React.useState();
+    return (_jsx(Box, { width: '100%', children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(DateInput, { value: date, label: "Date (default)", onChange: e => setDate(e.toString()) }) }), _jsx(Grid.Column, { size: { desktop: 6, mobile: 12 }, children: _jsx(DateInput, { value: datetime, label: "Datetime", type: "datetime", is24Hour: true, onChange: e => setDatetime(e.toString()) }) })] }) }));
+};
+export * as Sources from './DateInput.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAojB,CAAC;AAEzkB,eAAO,MAAM,KAAK,cAAitB,CAAC;AAEpuB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/DateInput/DateInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box width={'100%'}>\n    <Grid gap={8}>\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <DateInput label=\"Default\" onChange={console.log} />\n      </Grid.Column>\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <DateInput label=\"Error\" onChange={console.log} error=\"Une erreur\" />\n      </Grid.Column>\n      <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n        <DateInput label=\"Disabled\" onChange={console.log} disabled />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const Types = () => "export const Types = () => {\n  const [date, setDate] = React.useState<string>();\n  const [datetime, setDatetime] = React.useState<string>();\n\n  return (\n    <Box width={'100%'}>\n      <Grid gap={8}>\n        <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n          <DateInput value={date} label=\"Date (default)\" onChange={e => setDate(e.toString())} />\n        </Grid.Column>\n        <Grid.Column size={{ desktop: 6, mobile: 12 }}>\n          <DateInput\n            value={datetime}\n            label=\"Datetime\"\n            type=\"datetime\"\n            is24Hour\n            onChange={e => setDatetime(e.toString())}\n          />\n        </Grid.Column>\n      </Grid>\n    </Box>\n  );\n};";
+export const storySources = {
+    Default,
+    Types,
+};

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

@@ -0,0 +1,4 @@
+export declare const useStyles: () => {
+    dateInput: {};
+};
+//# sourceMappingURL=DateInput.styles.d.ts.map

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

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

package/dist/ui/DateInput/DateInput.styles.js

@@ -0,0 +1,4 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(() => ({
+    dateInput: {},
+}));

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

@@ -0,0 +1,23 @@
+import React from 'react';
+export declare const DateInput: 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("@alveole/components").FormControlCaptionProps & import("@alveole/components").FormControlHintProps & {
+    type?: "date" | "datetime" | "month";
+    display?: "default" | "spinner";
+    value?: string;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    onChange?: (date: string) => void;
+    is24Hour?: boolean;
+    minuteInterval?: 1 | 6 | 4 | 12 | 2 | 10 | 3 | 5 | 15 | 20 | 30;
+} & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=DateInput.web.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.web.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/DateInput.web.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;0CAiBpB,CAAC"}

package/dist/ui/DateInput/DateInput.web.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlDateInput, FormControlHint, FormControlLabel, InputHeading, } from '@alveole/components';
+import React from 'react';
+import { useStyles } from './DateInput.styles';
+export const DateInput = React.forwardRef(function DateInput(props, ref) {
+    const { label, hint, disabled, error, success } = props;
+    const styles = useStyles();
+    return (_jsxs(FormControl, { style: styles.dateInput, children: [_jsxs(InputHeading, { children: [label && _jsx(FormControlLabel, { label: label, disabled: disabled, error: error, success: success }), hint && _jsx(FormControlHint, { hint: hint, disabled: disabled })] }), _jsx(FormControlDateInput, { ref: ref, ...props }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

package/dist/ui/DateInput/dateUtils.d.ts

@@ -0,0 +1,23 @@
+export declare const DateFormats: {
+    readonly DatetimeFull: "iiii d MMMM yyyy à HH:mm";
+    readonly Datetime: "d MMMM yyyy à HH:mm";
+    readonly DatetimeShort: "d MMMM à HH:mm";
+    readonly Date: "d MMMM yyyy";
+    readonly DaySlashShort: "eeee dd/MM/yy";
+    readonly DateSlash: "dd/MM/yyyy";
+    readonly DateString: "yyyy-MM-dd";
+    readonly DateFull: "iiii d MMMM yyyy";
+    readonly DateFullAlt: "iii d MMM yyyy";
+    readonly DateTimeString: "yyyy-MM-dd'T'HH:mm";
+    readonly Time: "HH:mm";
+    readonly MonthString: "yyyy-MM";
+    readonly MonthAndYear: "MMMM yyyy";
+};
+export type DateFormat = (typeof DateFormats)[keyof typeof DateFormats];
+export declare function displayDate(date: string | Date | undefined, options?: {
+    fallback?: string;
+    format?: DateFormat;
+    capitalize?: boolean;
+}): string;
+export declare function isValidDate(value: unknown): value is string | Date;
+//# sourceMappingURL=dateUtils.d.ts.map

package/dist/ui/DateInput/dateUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/ui/DateInput/dateUtils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;CAcd,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,OAAO,WAAW,CAAC,CAAC;AAExE,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC/B,OAAO,CAAC,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GACzE,MAAM,CAOR;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,GAAG,IAAI,CAclE"}

package/dist/ui/DateInput/dateUtils.js

@@ -0,0 +1,47 @@
+import { format, isValid, parseISO } from 'date-fns';
+import { fr } from 'date-fns/locale';
+export const DateFormats = {
+    DatetimeFull: 'iiii d MMMM yyyy à HH:mm',
+    Datetime: 'd MMMM yyyy à HH:mm',
+    DatetimeShort: 'd MMMM à HH:mm',
+    Date: 'd MMMM yyyy',
+    DaySlashShort: 'eeee dd/MM/yy',
+    DateSlash: 'dd/MM/yyyy',
+    DateString: 'yyyy-MM-dd',
+    DateFull: 'iiii d MMMM yyyy',
+    DateFullAlt: 'iii d MMM yyyy',
+    DateTimeString: "yyyy-MM-dd'T'HH:mm",
+    Time: 'HH:mm',
+    MonthString: 'yyyy-MM',
+    MonthAndYear: 'MMMM yyyy',
+};
+export function displayDate(date, options) {
+    const defaultFormat = DateFormats.Date;
+    const d = typeof date === 'string' ? parseISO(date) : date;
+    if (!d || !isValid(d))
+        return options?.fallback ?? '';
+    let response = format(d, options?.format ?? defaultFormat, { locale: fr });
+    if (options?.capitalize)
+        response = response.charAt(0).toUpperCase() + response.slice(1);
+    return response;
+}
+export function isValidDate(value) {
+    if (typeof value === 'string') {
+        const trimmedValue = value.trim();
+        if (!trimmedValue)
+            return false;
+        const isoFormat = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?([+-]\d{2}:\d{2}|Z)?)?$/;
+        const partialIsoFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/;
+        const standardDateFormat = /^\d{4}-\d{2}-\d{2}$/;
+        if (isoFormat.test(trimmedValue))
+            return isValid(parseISO(trimmedValue));
+        if (partialIsoFormat.test(trimmedValue))
+            return isValid(new Date(trimmedValue));
+        if (standardDateFormat.test(trimmedValue))
+            return isValid(new Date(trimmedValue));
+        return false;
+    }
+    if (value instanceof Date)
+        return isValid(value);
+    return false;
+}

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

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

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

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

package/dist/ui/DateInput/index.js

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

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

@@ -4,6 +4,7 @@ declare const _default: {
     experimental: false;
     figmaURL: string;
     description: string;
+    shortDescription: string;
     component: (props: import("./Divider").DividerProps) => import("react").JSX.Element;
     styleFn: () => {
         divider: {

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Divider/Divider.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAIA,wBAQkB;AAElB,eAAO,MAAM,OAAO,mCAAmC,CAAC;AAExD,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Divider/Divider.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAIA,wBASkB;AAElB,eAAO,MAAM,OAAO,mCAAmC,CAAC;AAExD,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Divider/Divider.stories.js

@@ -6,7 +6,8 @@ export default {
     tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-15729',
-    description: 'Sérateur. Composant de type Box - Equivalent <hr/>.',
+    description: 'Sérateur. Composant de type Box - Equivalent `<hr/>`.',
+    shortDescription: 'Séparateur horizontal. Équivalent à la balise <hr>.',
     component: Divider,
     styleFn: useStyles,
 };

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

@@ -7,7 +7,7 @@ declare const _default: {
     component: (props: import("@alveole/components").DocumentViewerProps) => import("react").JSX.Element;
     styleFn: () => {
         toolbar: {
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
             borderColor: string;
             borderWidth: number;
             borderStyle: "solid";
@@ -16,18 +16,18 @@ declare const _default: {
             backgroundColor: string;
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             justifyContent: "space-between";
         };
         toolbarAction: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             justifyContent: "flex-end";
         };
         toolbarTitle: {
             color: string;
-            paddingLeft: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
             marginTop: string;
             marginBottom: string;
             userSelect: "none";
@@ -40,7 +40,7 @@ declare const _default: {
         toolbarState: {
             color: string;
             userSelect: "none";
-            fontVariant: "tabular-nums"[];
+            fontVariant: "tabular-nums";
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -63,7 +63,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "column";
             flex: number;
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
             borderColor: string;
             borderWidth: number;
             borderStyle: "solid";

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

@@ -1,6 +1,6 @@
 export declare const useStyles: () => {
     toolbar: {
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
         borderColor: string;
         borderWidth: number;
         borderStyle: "solid";
@@ -9,18 +9,18 @@ export declare const useStyles: () => {
         backgroundColor: string;
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         justifyContent: "space-between";
     };
     toolbarAction: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
         justifyContent: "flex-end";
     };
     toolbarTitle: {
         color: string;
-        paddingLeft: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
         marginTop: string;
         marginBottom: string;
         userSelect: "none";
@@ -33,7 +33,7 @@ export declare const useStyles: () => {
     toolbarState: {
         color: string;
         userSelect: "none";
-        fontVariant: "tabular-nums"[];
+        fontVariant: "tabular-nums";
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -56,7 +56,7 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "column";
         flex: number;
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
         borderColor: string;
         borderWidth: number;
         borderStyle: "solid";

package/dist/ui/DocumentViewer/DocumentViewer.styles.js

@@ -31,7 +31,7 @@ export const useStyles = makeStyles(({ text, color, spacing, radius, isVariant }
         ...text['Corps de texte'].SM.Regular,
         color: color.light.text['mention-grey'],
         userSelect: 'none',
-        fontVariant: ['tabular-nums'],
+        fontVariant: 'tabular-nums',
     },
     toolbarDivider: {
         width: 1,

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

@@ -10,7 +10,7 @@ declare const _default: {
             borderWidth: number;
             borderStyle: "dashed";
             borderColor: string;
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
             borderRadius: number;
             backgroundColor: string;
             cursor: "pointer";
@@ -37,21 +37,21 @@ declare const _default: {
         icon: {
             color: string;
             backgroundColor: string;
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
             borderRadius: number;
             width: import("@alveole/theme").Spacing;
             height: import("@alveole/theme").Spacing;
-            marginBottom: import("@alveole/theme").Spacing;
+            marginBottom: string | number;
         };
         filesListContainer: {
-            marginTop: import("@alveole/theme").Spacing;
+            marginTop: string | number;
         };
         filesListHeader: {
             display: "flex";
             flexDirection: "row";
             justifyContent: "space-between";
             alignItems: "center";
-            marginBottom: import("@alveole/theme").Spacing;
+            marginBottom: string | number;
         };
         filesListTitle: {
             fontWeight: "bold";
@@ -60,16 +60,16 @@ declare const _default: {
             borderWidth: number;
             borderColor: string;
             borderRadius: number;
-            padding: import("@alveole/theme").Spacing;
+            padding: string | number;
             backgroundColor: string;
         };
         fileItemContainer: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
-            padding: import("@alveole/theme").Spacing;
-            marginBottom: import("@alveole/theme").Spacing;
+            gap: string | number;
+            padding: string | number;
+            marginBottom: string | number;
             backgroundColor: string;
             borderRadius: number;
         };
@@ -83,7 +83,7 @@ declare const _default: {
             flex: number;
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         fileName: {
             fontWeight: "bold";

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

@@ -3,7 +3,7 @@ export declare const useStyles: () => {
         borderWidth: number;
         borderStyle: "dashed";
         borderColor: string;
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
         borderRadius: number;
         backgroundColor: string;
         cursor: "pointer";
@@ -30,21 +30,21 @@ export declare const useStyles: () => {
     icon: {
         color: string;
         backgroundColor: string;
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
         borderRadius: number;
         width: import("@alveole/theme").Spacing;
         height: import("@alveole/theme").Spacing;
-        marginBottom: import("@alveole/theme").Spacing;
+        marginBottom: string | number;
     };
     filesListContainer: {
-        marginTop: import("@alveole/theme").Spacing;
+        marginTop: string | number;
     };
     filesListHeader: {
         display: "flex";
         flexDirection: "row";
         justifyContent: "space-between";
         alignItems: "center";
-        marginBottom: import("@alveole/theme").Spacing;
+        marginBottom: string | number;
     };
     filesListTitle: {
         fontWeight: "bold";
@@ -53,16 +53,16 @@ export declare const useStyles: () => {
         borderWidth: number;
         borderColor: string;
         borderRadius: number;
-        padding: import("@alveole/theme").Spacing;
+        padding: string | number;
         backgroundColor: string;
     };
     fileItemContainer: {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
-        padding: import("@alveole/theme").Spacing;
-        marginBottom: import("@alveole/theme").Spacing;
+        gap: string | number;
+        padding: string | number;
+        marginBottom: string | number;
         backgroundColor: string;
         borderRadius: number;
     };
@@ -76,7 +76,7 @@ export declare const useStyles: () => {
         flex: number;
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     fileName: {
         fontWeight: "bold";

package/dist/ui/DragAndDropFile/DragAndDropFile.styles.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ color, spacing }) => ({
+export const useStyles = makeStyles(({ color, spacing, spacingValue }) => ({
     container: {
         borderWidth: 1,
         borderStyle: 'dashed',
@@ -33,8 +33,8 @@ export const useStyles = makeStyles(({ color, spacing }) => ({
         backgroundColor: color.background['alt-grey'],
         padding: spacing('100'),
         borderRadius: 12,
-        width: spacing('200'),
-        height: spacing('200'),
+        width: spacingValue('200'),
+        height: spacingValue('200'),
         marginBottom: spacing('100'),
     },
     filesListContainer: {

package/dist/ui/DurationInput/DurationInput.d.ts

@@ -0,0 +1,19 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
+import React from 'react';
+export type DurationInputProps = FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+};
+export declare const DurationInput: React.ForwardRefExoticComponent<{
+    label: string;
+    labelRight?: React.ReactNode;
+    disabled?: boolean;
+} & FormControlCaptionProps & FormControlHintProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+} & React.RefAttributes<any>>;
+//# sourceMappingURL=DurationInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurationInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,GACpD,oBAAoB,GACpB,uBAAuB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;YANd,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACzB,MAAM,IAAI;eACR,OAAO;6BAkDpB,CAAC"}

package/dist/ui/DurationInput/DurationInput.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlCaption, FormControlHint, FormControlLabel, InputHeading, TextInput, } from '@alveole/components';
+import React from 'react';
+export const DurationInput = React.forwardRef(function DurationInput({ label, labelRight, hint, error, success, value, onChange, onBlur, disabled }, ref) {
+    const [localValue, setLocalValue] = React.useState(value ?? '');
+    React.useEffect(() => {
+        setLocalValue(value ?? '');
+    }, [value]);
+    const handleChangeText = (text) => {
+        const digits = text.replace(/\D/g, '').slice(0, 4);
+        const formatted = digits.length <= 2 ? digits : `${digits.slice(0, 2)}:${digits.slice(2)}`;
+        setLocalValue(formatted);
+        if (digits.length === 0 || digits.length === 4) {
+            onChange?.(formatted);
+        }
+    };
+    const handleBlur = () => {
+        onChange?.(localValue);
+        onBlur?.();
+    };
+    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(TextInput, { ref: ref, placeholder: "HH:MM", value: localValue, onChangeText: handleChangeText, onBlur: handleBlur, disabled: disabled, inputMode: "numeric", maxLength: 5 }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

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

@@ -0,0 +1,23 @@
+declare const _default: {
+    title: string;
+    tags: "ui"[];
+    experimental: false;
+    shortDescription: string;
+    description: string;
+    component: import("react").ForwardRefExoticComponent<{
+        label: string;
+        labelRight?: React.ReactNode;
+        disabled?: boolean;
+    } & import("..").FormControlCaptionProps & import("..").FormControlHintProps & {
+        value?: string;
+        onChange?: (value: string) => void;
+        onBlur?: () => void;
+        disabled?: boolean;
+    } & import("react").RefAttributes<any>>;
+    styleFn: () => {};
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const States: () => import("react").JSX.Element;
+export * as Sources from './DurationInput.stories.sources';
+//# sourceMappingURL=DurationInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurationInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAOA,wBAoBkB;AAElB,eAAO,MAAM,OAAO,mCAcnB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAclB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC"}

package/dist/ui/DurationInput/DurationInput.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Grid } from '../Grid';
+import { DurationInput } from './DurationInput';
+const useStyles = () => ({});
+export default {
+    title: 'DurationInput',
+    tags: ['ui'],
+    experimental: false,
+    shortDescription: "Saisie d'une durée au format HH:MM (ex. 06:15 pour 6 heures 15 minutes).",
+    description: `Saisie d'une **durée** au format HH:MM (ex. \`06:15\` pour 6 heures 15 minutes).
+
+À ne pas confondre avec **TimeInput**, qui représente une **heure d'horloge** (ex. \`09:30\` du matin).
+
+| | DurationInput |
+|---|---|---|
+| Sémantique | Durée écoulée |
+| Exemple | \`35:00\` (35h00 de travail) |
+| Heures valides | 00–99 |
+| HTML web | \`<input type="text">\` |
+
+> Il n'existe pas de \`<input type="duration">\` en HTML.
+> Voir [whatwg/html#5488](https://github.com/whatwg/html/issues/5488).`,
+    component: DurationInput,
+    styleFn: useStyles,
+};
+export const Default = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e", value: "06:15" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Dur\u00E9e", value: "01:30", hint: "Temps pass\u00E9 sur le terrain" }) })] }) }));
+export const States = () => (_jsx(Box, { width: "100%", p: 8, children: _jsxs(Grid, { gap: 8, children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Erreur", value: "25:70", error: "Heure invalide (minutes 00\u201359)" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "Succ\u00E8s", value: "06:15", success: "Enregistr\u00E9" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(DurationInput, { label: "D\u00E9sactiv\u00E9", value: "06:15", disabled: true }) })] }) }));
+export * as Sources from './DurationInput.stories.sources';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DurationInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DurationInput/DurationInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAkiB,CAAC;AAEvjB,eAAO,MAAM,MAAM,cAA4lB,CAAC;AAEhnB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}