@alveole/components 1.0.1 → 1.1.1

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

@@ -15,7 +15,7 @@ export declare const useStyles: () => {
         padding: import("@alveole/theme").Spacing;
     };
     logo: {
-        marginLeft: import("@alveole/theme").Spacing;
+        marginLeft: string | number;
     };
     sidebarContent: {
         flex: number;
@@ -24,14 +24,14 @@ export declare const useStyles: () => {
     };
     scrollView: {
         flex: number;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingTop: string | number;
+        paddingBottom: string | number;
         zIndex: number;
         backgroundColor: "#FFFFFF";
     };
     groupTitleDesktop: {
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingTop: string | number;
         fontSize: 12;
         lineHeight: 20;
         letterSpacing: 0;
@@ -40,10 +40,10 @@ export declare const useStyles: () => {
     };
     groupTitleMobile: {
         color: string;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -51,12 +51,12 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemDesktop: {
-        borderRadius: import("@alveole/theme").Spacing;
+        borderRadius: string | number;
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
-        padding: import("@alveole/theme").Spacing;
+        gap: string | number;
+        padding: string | number;
         width: "100%";
         color: string;
         stroke: string;
@@ -65,11 +65,11 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        gap: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
         width: "100%";
         color: string;
         stroke: string;
@@ -88,26 +88,26 @@ export declare const useStyles: () => {
         backgroundColor: "#EFF1F6";
     };
     sidebarItemContainerDesktop: {
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         display: "flex";
         flexDirection: "row";
         cursor: "pointer";
-        marginLeft: import("@alveole/theme").Spacing;
-        marginRight: import("@alveole/theme").Spacing;
+        marginLeft: string | number;
+        marginRight: string | number;
     };
     sidebarItemContainerMobile: {
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
-        gap: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        gap: string | number;
         display: "flex";
         flexDirection: "row";
         cursor: "pointer";
         borderRadius: import("@alveole/theme").Radius;
-        marginLeft: import("@alveole/theme").Spacing;
-        marginRight: import("@alveole/theme").Spacing;
+        marginLeft: string | number;
+        marginRight: string | number;
     };
     sidebarItemTitleSelectedDesktop: {
         color: string;
@@ -168,10 +168,10 @@ export declare const useStyles: () => {
     };
     sidebarItemSelectedIndicatorContent: {
         width: "100%";
-        minHeight: import("@alveole/theme").Spacing;
+        minHeight: string | number;
         backgroundColor: string;
         margin: string;
-        borderRadius: import("@alveole/theme").Spacing;
+        borderRadius: string | number;
     };
 };
 //# sourceMappingURL=Sidebar.styles.d.ts.map

package/dist/ui/Sidebar/Sidebar.styles.js

@@ -1,5 +1,5 @@
 import { Colors, makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing, isVariant, radius }) => ({
+export const useStyles = makeStyles(({ text, color, spacing, spacingValue, isVariant, radius }) => ({
     sidebar: {
         backgroundColor: '#FFFFFF',
         borderRightWidth: 1,
@@ -13,7 +13,7 @@ export const useStyles = makeStyles(({ text, color, spacing, isVariant, radius }
     headerContent: {
         display: 'flex',
         flexDirection: 'row',
-        padding: spacing('050'),
+        padding: spacingValue('050'),
     },
     logo: {
         marginLeft: isVariant('mobile') || isVariant('tablet') ? spacing('150') : 0,
@@ -131,7 +131,7 @@ export const useStyles = makeStyles(({ text, color, spacing, isVariant, radius }
     },
     sidebarItemSelectedIndicator: {
         height: '100%',
-        width: spacing('025'),
+        width: spacingValue('025'),
         position: 'absolute',
         left: 0,
     },

package/dist/ui/Signature/Signature.js

@@ -9,7 +9,7 @@ import { Button } from '../Button';
 import { useStyles } from './Signature.styles';
 export const Signature = (props) => {
     const { height, date = new Date(), dateLabel = 'Le', clearButtonLabel = 'Effacer', onChange, onBegin, onEnd } = props;
-    const { color, spacing } = useTheme();
+    const { color, spacing, spacingValue } = useTheme();
     const styles = useStyles();
     const ref = React.useRef(null);
     const readTimeoutRef = React.useRef(null);
@@ -38,7 +38,7 @@ export const Signature = (props) => {
         };
     }, []);
     const dateFormat = isValidDate(date) ? displayDate(date, { format: DateFormats.DateSlash }) : String(date);
-    const webviewHeightWithBorders = height + spacing('200') + spacing('100') + 3;
+    const webviewHeightWithBorders = height + spacingValue('200') + spacingValue('100') + 3;
     const webviewStyle = `
     .m-signature-pad {
       box-shadow: none;

package/dist/ui/Switch/Switch.js

@@ -10,7 +10,7 @@ export const Switch = React.forwardRef(function Switch(props, ref) {
     const isControlled = checked !== undefined;
     const [model, setModel] = React.useState(Boolean(checked));
     const value = isControlled ? checked : model;
-    const { spacing } = useTheme();
+    const { spacingValue } = useTheme();
     const styles = useStyles();
     const uniqId = useId();
     id = id || `switch--${uniqId}`;
@@ -38,5 +38,5 @@ export const Switch = React.forwardRef(function Switch(props, ref) {
     };
     const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, checked: value, onCheckedChange: onChange, style: switchButtonStyles, disabled: disabled, ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { animation: "quicker", style: switchThumbStyles }) }));
     const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(Label, { unstyled: true, htmlFor: id, width: '100%', children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, label && (_jsx(Typography, { htmlFor: id, style: switchLabelStyles, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
-    return (_jsx(Box, { tag: "switch", gap: error || success ? spacing('050') : 0, style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
+    return (_jsx(Box, { tag: "switch", gap: error || success ? spacingValue('050') : 0, style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
 });

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

@@ -16,15 +16,15 @@ declare const _default: {
         switch: {
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            gap: string | number;
+            paddingRight: string | number;
         };
         switchButton: {
             borderColor: string;
             backgroundColor: string;
             cursor: "pointer";
             padding: number;
-            minHeight: import("@alveole/theme").Spacing;
+            minHeight: string | number;
             marginTop: string;
             marginBottom: string;
         };

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

@@ -3,15 +3,15 @@ export declare const useStyles: () => {
     switch: {
         display: "flex";
         flexDirection: "row";
-        gap: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        gap: string | number;
+        paddingRight: string | number;
     };
     switchButton: {
         borderColor: string;
         backgroundColor: string;
         cursor: "pointer";
         padding: number;
-        minHeight: import("@alveole/theme").Spacing;
+        minHeight: string | number;
         marginTop: string;
         marginBottom: string;
     };

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

@@ -12,7 +12,7 @@ declare const _default: {
             minHeight: number;
             display: "flex";
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         tabs: {
             flex: number;
@@ -20,9 +20,9 @@ declare const _default: {
             flexDirection: "column";
         };
         tabsList: {
-            borderBottomLeftRadius: import("@alveole/theme").Spacing;
-            borderBottomRightRadius: import("@alveole/theme").Spacing;
-            gap: import("@alveole/theme").Spacing;
+            borderBottomLeftRadius: string | number;
+            borderBottomRightRadius: string | number;
+            gap: string | number;
             boxSizing: "border-box";
             borderColor: string;
             borderBottomWidth: number;
@@ -33,8 +33,8 @@ declare const _default: {
             appearance: "none";
             backgroundColor: "transparent";
             cursor: "pointer";
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingTop: string | number;
+            paddingBottom: string | number;
             paddingLeft: number;
             paddingRight: number;
             boxSizing: "border-box";
@@ -43,7 +43,7 @@ declare const _default: {
             borderBottomColor: "transparent";
             display: "flex";
             alignItems: "center";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
         };
         tabsTabActive: {
             borderBottomColor: string;
@@ -62,11 +62,11 @@ declare const _default: {
             transitionProperty: "all";
             transitionDuration: "0.1s";
             transitionTimingFunction: "ease-in-out";
-            gap: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            gap: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
+            paddingLeft: string | number;
+            paddingRight: string | number;
             borderRadius: import("@alveole/theme").Radius;
         };
         tabIcon: {

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

@@ -4,7 +4,7 @@ export declare const useStyles: () => {
         minHeight: number;
         display: "flex";
         flexDirection: "column";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     tabs: {
         flex: number;
@@ -12,9 +12,9 @@ export declare const useStyles: () => {
         flexDirection: "column";
     };
     tabsList: {
-        borderBottomLeftRadius: import("@alveole/theme").Spacing;
-        borderBottomRightRadius: import("@alveole/theme").Spacing;
-        gap: import("@alveole/theme").Spacing;
+        borderBottomLeftRadius: string | number;
+        borderBottomRightRadius: string | number;
+        gap: string | number;
         boxSizing: "border-box";
         borderColor: string;
         borderBottomWidth: number;
@@ -25,8 +25,8 @@ export declare const useStyles: () => {
         appearance: "none";
         backgroundColor: "transparent";
         cursor: "pointer";
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingTop: string | number;
+        paddingBottom: string | number;
         paddingLeft: number;
         paddingRight: number;
         boxSizing: "border-box";
@@ -35,7 +35,7 @@ export declare const useStyles: () => {
         borderBottomColor: "transparent";
         display: "flex";
         alignItems: "center";
-        gap: import("@alveole/theme").Spacing;
+        gap: string | number;
     };
     tabsTabActive: {
         borderBottomColor: string;
@@ -54,11 +54,11 @@ export declare const useStyles: () => {
         transitionProperty: "all";
         transitionDuration: "0.1s";
         transitionTimingFunction: "ease-in-out";
-        gap: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        gap: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         borderRadius: import("@alveole/theme").Radius;
     };
     tabIcon: {

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK7C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,sBAsBlC,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,OAAO,QAAQ,sBAsBlC,CAAC"}

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

@@ -26,8 +26,8 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
             paddingTop: number;
             paddingBottom: number;
         };
@@ -37,10 +37,10 @@ declare const _default: {
             letterSpacing: 0;
             fontFamily: string;
             fontWeight?: import("react-native").TextStyle["fontWeight"];
-            paddingLeft: import("@alveole/theme").Spacing;
-            paddingRight: import("@alveole/theme").Spacing;
-            paddingTop: import("@alveole/theme").Spacing;
-            paddingBottom: import("@alveole/theme").Spacing;
+            paddingLeft: string | number;
+            paddingRight: string | number;
+            paddingTop: string | number;
+            paddingBottom: string | number;
         };
     };
 };

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

@@ -19,8 +19,8 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
         paddingTop: number;
         paddingBottom: number;
     };
@@ -30,10 +30,10 @@ export declare const useStyles: () => {
         letterSpacing: 0;
         fontFamily: string;
         fontWeight?: import("react-native").TextStyle["fontWeight"];
-        paddingLeft: import("@alveole/theme").Spacing;
-        paddingRight: import("@alveole/theme").Spacing;
-        paddingTop: import("@alveole/theme").Spacing;
-        paddingBottom: import("@alveole/theme").Spacing;
+        paddingLeft: string | number;
+        paddingRight: string | number;
+        paddingTop: string | number;
+        paddingBottom: string | number;
     };
 };
 //# sourceMappingURL=Tag.styles.d.ts.map

package/dist/ui/TimeInput/TimeInput.d.ts

@@ -0,0 +1,19 @@
+import { FormControlCaptionProps, FormControlHintProps, FormControlLabelProps } from '@alveole/components';
+import React from 'react';
+export type TimeInputProps = FormControlLabelProps & FormControlHintProps & FormControlCaptionProps & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+};
+export declare const TimeInput: 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=TimeInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,uBAAuB,EAEvB,oBAAoB,EAEpB,qBAAqB,EAGtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAChD,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,SAAS;;;;;YANV,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;aACzB,MAAM,IAAI;eACR,OAAO;6BA4DpB,CAAC"}

package/dist/ui/TimeInput/TimeInput.js

@@ -0,0 +1,32 @@
+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 TimeInput = React.forwardRef(function TimeInput({ 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);
+        let formatted;
+        if (digits.length === 1 && parseInt(digits) >= 3) {
+            // Premier chiffre ≥ 3 : les heures ne peuvent pas dépasser 23, donc on préfixe '0'
+            formatted = `0${digits}:`;
+        }
+        else if (digits.length <= 2) {
+            formatted = digits;
+        }
+        else {
+            formatted = `${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, keyboardType: "number-pad", maxLength: 5 }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

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

@@ -0,0 +1,25 @@
+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: () => {
+        timeInput: {};
+    };
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;
+export declare const States: () => import("react").JSX.Element;
+export * as Sources from './TimeInput.stories.sources';
+//# sourceMappingURL=TimeInput.stories.d.ts.map

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

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

package/dist/ui/TimeInput/TimeInput.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Grid } from '../Grid';
+import { TimeInput } from './TimeInput';
+import { useStyles } from './TimeInput.styles';
+export default {
+    title: 'TimeInput',
+    tags: ['ui'],
+    experimental: false,
+    shortDescription: "Saisie d'une heure d'horloge au format HH:MM (ex. 09:30 pour 9h30 du matin).",
+    description: `Saisie d'une **heure d'horloge** au format HH:MM (ex. \`09:30\` pour 9h30 du matin).
+
+À ne pas confondre avec **DurationInput**, qui représente une **durée écoulée** (ex. \`06:15\` pour 6 heures 15 minutes).
+
+| | TimeInput |
+|---|---|
+| Sémantique | Heure du jour |
+| Exemple | \`09:30\` (9h30 le matin) |
+| Heures valides | 00–23 |
+| HTML web | \`<input type="time">\` |`,
+    component: TimeInput,
+    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(TimeInput, { label: "Heure" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "Heure", value: "09:30" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "Heure", value: "14:00", hint: "Heure de d\u00E9but de mission" }) })] }) }));
+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(TimeInput, { label: "Erreur", value: "25:70", error: "Heure invalide (00:00\u201323:59)" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "Succ\u00E8s", value: "09:30", success: "Enregistr\u00E9" }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(TimeInput, { label: "D\u00E9sactiv\u00E9", value: "09:30", disabled: true }) })] }) }));
+export * as Sources from './TimeInput.stories.sources';

package/dist/ui/TimeInput/TimeInput.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=TimeInput.stories.sources.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAqhB,CAAC;AAE1iB,eAAO,MAAM,MAAM,cAA8kB,CAAC;AAElmB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -0,0 +1,8 @@
+// This file is generated. Do not edit manually.
+// Source: src/ui/TimeInput/TimeInput.stories.tsx
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Heure\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Heure\" value=\"09:30\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Heure\" value=\"14:00\" hint=\"Heure de début de mission\" />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box width=\"100%\" p={8}>\n    <Grid gap={8}>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Erreur\" value=\"25:70\" error=\"Heure invalide (00:00–23:59)\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Succès\" value=\"09:30\" success=\"Enregistré\" />\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <TimeInput label=\"Désactivé\" value=\"09:30\" disabled />\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const storySources = {
+    Default,
+    States,
+};

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

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

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

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

package/dist/ui/TimeInput/TimeInput.styles.js

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

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

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

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

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

package/dist/ui/TimeInput/TimeInput.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 './TimeInput.styles';
+export const TimeInput = React.forwardRef(function TimeInput(props, ref) {
+    const { label, labelRight, hint, disabled, error, success } = props;
+    const styles = useStyles();
+    return (_jsxs(FormControl, { style: styles.timeInput, 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(FormControlDateInput, { ref: ref, ...props, type: "time" }), (error || success) && _jsx(FormControlCaption, { error: error, success: success })] }));
+});

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

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

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

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

package/dist/ui/TimeInput/index.js

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