@alveole/components 1.0.1 → 1.1.0

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';

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

@@ -5,6 +5,7 @@ declare const _default: {
     experimental: false;
     figmaURL: string;
     description: string;
+    shortDescription: string;
     component: typeof Toast;
     styleFn: () => {
         container: {
@@ -13,7 +14,7 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             overflow: "hidden";
             padding: number;
         } | {
@@ -30,7 +31,7 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             overflow: "hidden";
             padding: number;
         } | {
@@ -40,7 +41,7 @@ declare const _default: {
             borderRadius: import("@alveole/theme").Radius;
             display: "flex";
             flexDirection: "row";
-            gap: import("@alveole/theme").Spacing;
+            gap: string | number;
             overflow: "hidden";
             padding: number;
         };
@@ -48,8 +49,8 @@ declare const _default: {
             display: "flex";
             flex: number;
             flexDirection: "column";
-            gap: import("@alveole/theme").Spacing;
-            padding: import("@alveole/theme").Spacing;
+            gap: string | number;
+            padding: string | number;
         };
         titleContainer: {
             display: "flex";
@@ -70,10 +71,10 @@ declare const _default: {
             alignSelf: "stretch";
             justifyContent: "flex-start";
             alignItems: "center";
-            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;
         };
         iconBlockDefault: {
             backgroundColor: string;
@@ -101,6 +102,29 @@ declare const _default: {
     };
 };
 export default _default;
+/**
+ * Le fichier `_layout.tsx` doit inclure la balise `<Toasts>` pour fonctionner.
+ *
+ * ```tsx
+ * import { Toasts } from '@alveole/components';
+ * import { ThemeProvider } from '@alveole/theme';
+ * import { Stack } from 'expo-router';
+ * import { TamaguiProvider } from 'tamagui';
+ * import { tamaguiConfig } from '../tamagui.config';
+ *
+ * export default function RootLayout() {
+ *   return (
+ *     <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+ *       <ThemeProvider loader={false}>
+ *         <Toasts>
+ *           <Stack screenOptions={{ headerShown: false }} />
+ *         </Toasts>
+ *       </ThemeProvider>
+ *     </TamaguiProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const All: () => import("react").JSX.Element;
 export declare const PreviewInfo: () => import("react").JSX.Element;
 export declare const PreviewSuccess: () => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3C,wBAQkB;AAElB,eAAO,MAAM,GAAG,mCAwDf,CAAC;AAEF,eAAO,MAAM,WAAW,mCAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAA2E,CAAC;AAEnH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM3C,wBASkB;AAElB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,GAAG,mCA+Bf,CAAC;AAEF,eAAO,MAAM,WAAW,mCAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,YAAY,mCAExB,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,cAAc,mCAE1B,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAA2E,CAAC;AAEnH,eAAO,MAAM,6BAA6B,mCAEzC,CAAC;AAEF,eAAO,MAAM,WAAW,mCAOvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,yBAAyB,CAAC"}

package/dist/ui/Toast/Toast.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@alveole/components';
-import { Box, Highlight, Typography } from '../../core';
+import { Box } from '../../core';
 import { Toast, ToastView } from './Toast';
 import { useStyles } from './Toast.styles';
 import { defaultDuration } from './ToastBridge';
@@ -11,10 +11,34 @@ export default {
     tags: ['ui'],
     experimental: false,
     figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=2084-1372',
-    description: `Toaster Tamagui. Contient le provider global et le hook useToast. Par défaut un toast reste affiché pendant ${defaultDuration / 1000} secondes`,
+    description: `Toaster Tamagui. Contient le provider global et le hook \`useToast\`. Par défaut un toast reste affiché pendant ${defaultDuration / 1000} secondes`,
+    shortDescription: 'Toaster Tamagui. Fournit le provider global et le hook useToast.',
     component: Toast,
     styleFn: useStyles,
 };
+/**
+ * Le fichier `_layout.tsx` doit inclure la balise `<Toasts>` pour fonctionner.
+ *
+ * ```tsx
+ * import { Toasts } from '@alveole/components';
+ * import { ThemeProvider } from '@alveole/theme';
+ * import { Stack } from 'expo-router';
+ * import { TamaguiProvider } from 'tamagui';
+ * import { tamaguiConfig } from '../tamagui.config';
+ *
+ * export default function RootLayout() {
+ *   return (
+ *     <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
+ *       <ThemeProvider loader={false}>
+ *         <Toasts>
+ *           <Stack screenOptions={{ headerShown: false }} />
+ *         </Toasts>
+ *       </ThemeProvider>
+ *     </TamaguiProvider>
+ *   );
+ * }
+ * ```
+ */
 export const All = () => {
     const toast = useToast();
     const defaultToast = () => toast.present('Default', 'Message');
@@ -28,26 +52,7 @@ export const All = () => {
     const withoutMessageToast = () => toast.present('Sans message');
     const withoutMessageToastError = () => toast.present('Sans message', undefined, { variant: 'error' });
     const withCustomIcon = () => toast.present('Avec icon custom', undefined, { icon: 'Worm' });
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 8, children: [_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Button, { title: "Default toast", variant: "secondary", onPress: defaultToast }), _jsx(Button, { title: "Success toast", variant: "secondary", onPress: successToast }), _jsx(Button, { title: "Error toast", variant: "secondary", onPress: errorToast }), _jsx(Button, { title: "Info toast", variant: "secondary", onPress: infoToast }), _jsx(Button, { title: "Warning toast", variant: "secondary", onPress: warningToast }), _jsx(Button, { title: "Message long", variant: "secondary", onPress: infoToastMultiLine }), _jsx(Button, { title: "Without message toast", variant: "secondary", onPress: withoutMessageToast }), _jsx(Button, { title: "Without message toast error", variant: "secondary", onPress: withoutMessageToastError }), _jsx(Button, { title: "WithCustomIcon", variant: "secondary", onPress: withCustomIcon })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsx(Typography, { children: `Le fichier _layout.tsx doit inclure la balise <Toasts> pour fonctionner` }), _jsx(Highlight, { language: "tsx", children: `
-            import { Toasts } from '@alveole/components';
-            import { ThemeProvider } from '@alveole/theme';
-            import { Stack } from 'expo-router';
-            import React from 'react';
-            import { TamaguiProvider } from 'tamagui';
-            import { tamaguiConfig } from '../tamagui.config';
-
-            export default function RootLayout() {
-              return (
-                <TamaguiProvider config={tamaguiConfig} defaultTheme="light">
-                  <ThemeProvider loader={false}>
-                    <Toasts>
-                      <Stack screenOptions={{ headerShown: false }} />
-                    </Toasts>
-                  </ThemeProvider>
-                </TamaguiProvider>
-              );
-            }
-          ` })] })] }));
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 8, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, flexWrap: "wrap", children: [_jsx(Button, { title: "Default toast", variant: "secondary", onPress: defaultToast }), _jsx(Button, { title: "Success toast", variant: "secondary", onPress: successToast }), _jsx(Button, { title: "Error toast", variant: "secondary", onPress: errorToast }), _jsx(Button, { title: "Info toast", variant: "secondary", onPress: infoToast }), _jsx(Button, { title: "Warning toast", variant: "secondary", onPress: warningToast }), _jsx(Button, { title: "Message long", variant: "secondary", onPress: infoToastMultiLine }), _jsx(Button, { title: "Without message toast", variant: "secondary", onPress: withoutMessageToast }), _jsx(Button, { title: "Without message toast error", variant: "secondary", onPress: withoutMessageToastError }), _jsx(Button, { title: "WithCustomIcon", variant: "secondary", onPress: withCustomIcon })] }) }));
 };
 export const PreviewInfo = () => (_jsx(ToastView, { variant: "info", title: "Information", message: "Description additionnelle du toast." }));
 export const PreviewSuccess = () => (_jsx(ToastView, { variant: "success", title: "Succ\u00E8s", message: "Description additionnelle du toast." }));

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

@@ -19,4 +19,5 @@ export declare const storySources: {
     readonly ToastsTypes: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
+export declare const storyDescriptions: Partial<Record<StorySourceName, string>>;
 //# sourceMappingURL=Toast.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAA+9F,CAAC;AAEh/F,eAAO,MAAM,WAAW,cAAyJ,CAAC;AAElL,eAAO,MAAM,cAAc,cAA0J,CAAC;AAEtL,eAAO,MAAM,YAAY,cAAsJ,CAAC;AAEhL,eAAO,MAAM,cAAc,cAA2J,CAAC;AAEvL,eAAO,MAAM,cAAc,cAA6J,CAAC;AAEzL,eAAO,MAAM,0BAA0B,cAAkI,CAAC;AAE1K,eAAO,MAAM,6BAA6B,cAAgJ,CAAC;AAE3L,eAAO,MAAM,WAAW,cAA0Q,CAAC;AAEnS,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Toast.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,GAAG,cAAm8D,CAAC;AAEp9D,eAAO,MAAM,WAAW,cAAyJ,CAAC;AAElL,eAAO,MAAM,cAAc,cAA0J,CAAC;AAEtL,eAAO,MAAM,YAAY,cAAsJ,CAAC;AAEhL,eAAO,MAAM,cAAc,cAA2J,CAAC;AAEvL,eAAO,MAAM,cAAc,cAA6J,CAAC;AAEzL,eAAO,MAAM,0BAA0B,cAAkI,CAAC;AAE1K,eAAO,MAAM,6BAA6B,cAAgJ,CAAC;AAE3L,eAAO,MAAM,WAAW,cAA0Q,CAAC;AAEnS,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}