@alveole/components 2.0.0-alpha.16 → 2.0.0-alpha.17

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,cAAc,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AASrG,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA4BF,eAAO,MAAM,MAAM;SAlCZ,MAAM;YACH,MAAM;YACN,aAAa;YACb,MAAM;cACJ,MAAM;gBACJ,OAAO;wCA8FnB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAS,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,cAAc,EAA2B,WAAW,IAAI,kBAAkB,EAAE,MAAM,SAAS,CAAC;AASrG,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA4BF,eAAO,MAAM,MAAM;SAlCZ,MAAM;YACH,MAAM;YACN,aAAa;YACb,MAAM;cACJ,MAAM;gBACJ,OAAO;wCA6FnB,CAAC"}

package/dist/ui/Switch/Switch.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { focusRingProps, useTheme } from '@alveole/theme';
+import { focusRingProps } from '@alveole/theme';
 import React, { useId } from 'react';
 import { Platform, Pressable } from 'react-native';
 import { Switch as TamaguiSwitch } from 'tamagui';
@@ -23,7 +23,6 @@ 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 { spacingValue } = useTheme();
     const styles = useStyles();
     const uniqId = useId();
     id = id || `switch--${uniqId}`;
@@ -35,5 +34,5 @@ export const Switch = React.forwardRef(function Switch(props, ref) {
     const { bouton, pouce, libelle } = apparenceDuSwitch(styles, { value, disabled, noPadding, style });
     const Toggle = (_jsx(TamaguiSwitch, { id: id, ref: ref, borderWidth: 1, ...DIMENSIONS_DE_LA_PISTE, checked: value, onCheckedChange: onChange, style: bouton, disabled: disabled, accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: Boolean(value), disabled: Boolean(disabled) }, ...focusRingProps(), ...switchProps, children: _jsx(TamaguiSwitch.Thumb, { ...animer('quicker'), width: POUCE, height: POUCE, style: pouce }) }));
     const ToggleWithLabel = (_jsxs(_Fragment, { children: [_jsx(SwitchLabel, { id: id, checked: value, disabled: disabled, onChange: onChange, children: _jsxs(Box, { tag: "switch", style: styles.switch, children: [Toggle, !!label && (_jsx(Typography, { htmlFor: id, style: libelle, children: label }))] }) }), (error ?? success) && _jsx(FormControlCaption, { error: error, success: success })] }));
-    return (_jsx(Box, { tag: "switch", gap: error || success ? spacingValue('050') : 0, style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
+    return (_jsx(Box, { tag: "switch", gap: error || success ? '1W' : '0V', style: styles.switchContainer, children: !label ? Toggle : ToggleWithLabel }));
 });

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

@@ -20,8 +20,8 @@ declare const _default: {
             paddingRight: string | number;
         };
         switchButton: {
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "pointer";
             padding: number;
             minHeight: string | number;
@@ -29,29 +29,29 @@ declare const _default: {
             marginBottom: string;
         };
         switchButtonChecked: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         switchButtonDisabled: {
             opacity: 1;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "not-allowed";
         };
         switchThumb: {
             borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             boxShadow: "none";
         };
         switchThumbChecked: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         switchThumbDisabled: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             cursor: "not-allowed";
             borderColor: "#FFFFFF";
         };
         switchLabel: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;

package/dist/ui/Switch/Switch.stories.js

@@ -11,7 +11,7 @@ export default {
     component: Switch,
     styleFn: useStyles,
 };
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Switch, { label: "Non activ\u00E9" }), _jsx(Switch, { label: "Activ\u00E9", checked: true }), _jsx(Switch, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Switch, { label: "Activ\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(Switch, { label: "Non activ\u00E9" }), _jsx(Switch, { label: "Activ\u00E9", checked: true }), _jsx(Switch, { label: "D\u00E9sactiv\u00E9", disabled: true }), _jsx(Switch, { label: "Activ\u00E9 d\u00E9sactiv\u00E9", checked: true, disabled: true })] }));
 export const Controlled = () => {
     const [value, setValue] = useState(false);
     return _jsx(Switch, { label: value ? 'Activé' : 'Désactivé', checked: value, onCheckedChange: v => setValue(!!v) });

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA0S,CAAC;AAE/T,eAAO,MAAM,UAAU,cAAgN,CAAC;AAExO,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Switch.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/Switch.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA4S,CAAC;AAEjU,eAAO,MAAM,UAAU,cAAgN,CAAC;AAExO,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Switch/Switch.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Switch label=\"Non activé\" />\n    <Switch label=\"Activé\" checked />\n    <Switch label=\"Désactivé\" disabled />\n    <Switch label=\"Activé désactivé\" checked disabled />\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <Switch label=\"Non activé\" />\n    <Switch label=\"Activé\" checked />\n    <Switch label=\"Désactivé\" disabled />\n    <Switch label=\"Activé désactivé\" checked disabled />\n  </Box>\n);";
 export const Controlled = () => "export const Controlled = () => {\n  const [value, setValue] = useState(false);\n  return <Switch label={value ? 'Activé' : 'Désactivé'} checked={value} onCheckedChange={v => setValue(!!v)} />;\n};";
 export const storySources = {
     Default,

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

@@ -7,8 +7,8 @@ export declare const useStyles: () => {
         paddingRight: string | number;
     };
     switchButton: {
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "pointer";
         padding: number;
         minHeight: string | number;
@@ -16,29 +16,29 @@ export declare const useStyles: () => {
         marginBottom: string;
     };
     switchButtonChecked: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     switchButtonDisabled: {
         opacity: 1;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "not-allowed";
     };
     switchThumb: {
         borderWidth: number;
-        borderColor: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         boxShadow: "none";
     };
     switchThumbChecked: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     switchThumbDisabled: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         cursor: "not-allowed";
         borderColor: "#FFFFFF";
     };
     switchLabel: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;

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

@@ -8,10 +8,10 @@ declare const _default: {
     component: (props: import("./Tabs").TabsProps) => React.JSX.Element;
     styleFn: () => {
         tabIcon: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tabIconHover: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tabsLabel: {
             fontSize: 14;
@@ -47,7 +47,7 @@ declare const _default: {
             cursor: "pointer";
         };
         tabsTabActive: {
-            borderBottomColor: string;
+            borderBottomColor: import("@alveole/theme").ThemeColor;
             borderBottomWidth: number;
         };
         wrapper: {
@@ -68,7 +68,7 @@ declare const _default: {
             display: "flex";
             flexDirection: "row";
             alignItems: "center";
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         container: {
             flex: number;
@@ -97,7 +97,7 @@ declare const _default: {
             borderBottomRightRadius: string | number;
             gap: string | number;
             boxSizing: "border-box";
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderBottomWidth: number;
             backgroundColor: "transparent";
             overflowX: "scroll";
@@ -122,5 +122,6 @@ declare const _default: {
 export default _default;
 export declare const Example: () => React.JSX.Element;
 export declare const Controle: () => React.JSX.Element;
+export declare const OngletUnique: () => React.JSX.Element;
 export * as Sources from './Tabs.stories.sources';
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAIF,eAAO,MAAM,QAAQ,yBAiBpB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBAuBnB,CAAC;AAIF,eAAO,MAAM,QAAQ,yBAiBpB,CAAC;AAGF,eAAO,MAAM,YAAY,yBAKxB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAC"}

package/dist/ui/Tabs/Tabs.stories.js

@@ -37,6 +37,8 @@ export const Controle = () => {
         { label: 'Onglet 3', value: 'onglet-3', content: _jsx(Typography, { children: "Contenu de onglet 3" }) },
     ];
     const [ongletActif, setOngletActif] = React.useState('onglet-1');
-    return (_jsxs(Box, { width: '100%', gap: 16, children: [_jsxs(Box, { flexDirection: "row", gap: 8, children: [_jsx(Button, { title: "Aller \u00E0 l\u2019onglet 1", variant: "secondary", onPress: () => setOngletActif('onglet-1') }), _jsx(Button, { title: "Aller \u00E0 l\u2019onglet 3", variant: "secondary", onPress: () => setOngletActif('onglet-3') })] }), _jsx(Tabs, { value: ongletActif, onChange: index => setOngletActif(onglets[index].value), tabs: onglets })] }));
+    return (_jsxs(Box, { width: '100%', gap: "2W", children: [_jsxs(Box, { flexDirection: "row", gap: "1W", children: [_jsx(Button, { title: "Aller \u00E0 l\u2019onglet 1", variant: "secondary", onPress: () => setOngletActif('onglet-1') }), _jsx(Button, { title: "Aller \u00E0 l\u2019onglet 3", variant: "secondary", onPress: () => setOngletActif('onglet-3') })] }), _jsx(Tabs, { value: ongletActif, onChange: index => setOngletActif(onglets[index].value), tabs: onglets })] }));
 };
+// Un onglet seul est desactive : il garde pourtant sa pleine opacite.
+export const OngletUnique = () => (_jsx(Tabs, { defaultValue: "seul", tabs: [{ label: 'Onglet seul', value: 'seul', content: _jsx(Typography, { children: "Contenu de l onglet seul" }) }] }));
 export * as Sources from './Tabs.stories.sources';

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

@@ -1,8 +1,10 @@
 export declare const Example: () => string;
 export declare const Controle: () => string;
+export declare const OngletUnique: () => string;
 export declare const storySources: {
     readonly Example: () => string;
     readonly Controle: () => string;
+    readonly OngletUnique: () => string;
 };
 export type StorySourceName = keyof typeof storySources;
 //# sourceMappingURL=Tabs.stories.sources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,QAAQ,cAA44B,CAAC;AAEl6B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tabs.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tabs/Tabs.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAk1B,CAAC;AAEv2B,eAAO,MAAM,QAAQ,cAAi5B,CAAC;AAEv6B,eAAO,MAAM,YAAY,cAA8M,CAAC;AAExO,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,8 +1,10 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tabs/Tabs.stories.tsx
 export const Example = () => "export const Example = () => {\n  const [_activeTab, setActiveTab] = React.useState(0);\n\n  return (\n    <Box width={'100%'}>\n      <Tabs\n        defaultValue={'onglet-1'}\n        onChange={setActiveTab}\n        urlAnchorPrefix=\"tabs-story\"\n        tabs={[\n          { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n          { label: 'Onglet 2', counter: 12, value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n          { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n          {\n            label: 'Onglet 4',\n            leading: 'Settings',\n            value: 'onglet-4',\n            content: <Typography>Contenu de onglet 4</Typography>,\n          },\n        ]}\n      />\n    </Box>\n  );\n};";
-export const Controle = () => "export const Controle = () => {\n  const onglets = [\n    { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n    { label: 'Onglet 2', value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n    { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n  ];\n  const [ongletActif, setOngletActif] = React.useState('onglet-1');\n\n  return (\n    <Box width={'100%'} gap={16}>\n      <Box flexDirection=\"row\" gap={8}>\n        <Button title=\"Aller à l’onglet 1\" variant=\"secondary\" onPress={() => setOngletActif('onglet-1')} />\n        <Button title=\"Aller à l’onglet 3\" variant=\"secondary\" onPress={() => setOngletActif('onglet-3')} />\n      </Box>\n      <Tabs value={ongletActif} onChange={index => setOngletActif(onglets[index].value)} tabs={onglets} />\n    </Box>\n  );\n};";
+export const Controle = () => "export const Controle = () => {\n  const onglets = [\n    { label: 'Onglet 1', value: 'onglet-1', content: <Typography>Contenu de onglet 1</Typography> },\n    { label: 'Onglet 2', value: 'onglet-2', content: <Typography>Contenu de onglet 2</Typography> },\n    { label: 'Onglet 3', value: 'onglet-3', content: <Typography>Contenu de onglet 3</Typography> },\n  ];\n  const [ongletActif, setOngletActif] = React.useState('onglet-1');\n\n  return (\n    <Box width={'100%'} gap=\"2W\">\n      <Box flexDirection=\"row\" gap=\"1W\">\n        <Button title=\"Aller à l’onglet 1\" variant=\"secondary\" onPress={() => setOngletActif('onglet-1')} />\n        <Button title=\"Aller à l’onglet 3\" variant=\"secondary\" onPress={() => setOngletActif('onglet-3')} />\n      </Box>\n      <Tabs value={ongletActif} onChange={index => setOngletActif(onglets[index].value)} tabs={onglets} />\n    </Box>\n  );\n};";
+export const OngletUnique = () => "export const OngletUnique = () => (\n  <Tabs\n    defaultValue=\"seul\"\n    tabs={[{ label: 'Onglet seul', value: 'seul', content: <Typography>Contenu de l onglet seul</Typography> }]}\n  />\n);";
 export const storySources = {
     Example,
     Controle,
+    OngletUnique,
 };

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

@@ -1,9 +1,9 @@
 export declare const useStyles: () => {
     tabIcon: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tabIconHover: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tabsLabel: {
         fontSize: 14;
@@ -39,7 +39,7 @@ export declare const useStyles: () => {
         cursor: "pointer";
     };
     tabsTabActive: {
-        borderBottomColor: string;
+        borderBottomColor: import("@alveole/theme").ThemeColor;
         borderBottomWidth: number;
     };
     wrapper: {
@@ -60,7 +60,7 @@ export declare const useStyles: () => {
         display: "flex";
         flexDirection: "row";
         alignItems: "center";
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     container: {
         flex: number;
@@ -89,7 +89,7 @@ export declare const useStyles: () => {
         borderBottomRightRadius: string | number;
         gap: string | number;
         boxSizing: "border-box";
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderBottomWidth: number;
         backgroundColor: "transparent";
         overflowX: "scroll";

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

@@ -22,20 +22,20 @@ declare const _default: {
             alignItems: "center";
             borderRadius: import("@alveole/theme").Radius;
             borderWidth: number;
-            borderColor: string;
-            color: string;
-            backgroundColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            color: import("@alveole/theme").ThemeColor;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             whiteSpace: "nowrap";
             overflow: "hidden";
             textOverflow: "ellipsis";
             maxWidth: string;
         };
         tagSurvole: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         tagSelected: {
-            borderColor: string;
-            color: string;
+            borderColor: import("@alveole/theme").ThemeColor;
+            color: import("@alveole/theme").ThemeColor;
         };
         tagSm: {
             fontSize: 12;
@@ -64,7 +64,7 @@ declare const _default: {
             marginRight: number;
         };
         croixSurvolee: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         croixSm: {
             marginLeft: number;

package/dist/ui/Tag/Tag.stories.js

@@ -11,9 +11,9 @@ export default {
     component: Tag,
     styleFn: useStyles,
 };
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", children: "Tag sm" }), _jsx(Tag, { size: "md", children: "Tag md" })] }));
-export const Selection = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: 16, children: ['sm', 'md'].map(size => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: size, children: "Descriptive, inerte" }), _jsx(Tag, { size: size, interactive: true, children: "Au repos, dans un groupe" }), _jsx(Tag, { size: size, interactive: true, selected: true, children: "S\u00E9lectionn\u00E9" }), _jsx(Tag, { size: size, selected: true, closable: true, onClose: () => { }, children: "S\u00E9lectionn\u00E9 et fermable" })] }, size))) }));
-export const Fermable = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", closable: true, onClose: () => { }, children: "Fermable sm" }), _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Fermable md" }), _jsx(Tag, { size: "md", closable: true, selected: true, onClose: () => { }, children: "Fermable et s\u00E9lectionn\u00E9" })] }));
-export const AvecIcone = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 24, flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", leading: "Check", children: "Valid\u00E9" }), _jsx(Tag, { size: "md", leading: "Clock", children: "En attente" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, onClose: () => { }, children: "Ic\u00F4ne et croix" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, selected: true, onClose: () => { }, children: "Tout \u00E0 la fois" })] }));
-export const LibelleLong = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 24, style: { maxWidth: 260 }, children: _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Un libell\u00E9 beaucoup trop long pour la place disponible" }) }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", children: "Tag sm" }), _jsx(Tag, { size: "md", children: "Tag md" })] }));
+export const Selection = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", children: ['sm', 'md'].map(size => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: size, children: "Descriptive, inerte" }), _jsx(Tag, { size: size, interactive: true, children: "Au repos, dans un groupe" }), _jsx(Tag, { size: size, interactive: true, selected: true, children: "S\u00E9lectionn\u00E9" }), _jsx(Tag, { size: size, selected: true, closable: true, onClose: () => { }, children: "S\u00E9lectionn\u00E9 et fermable" })] }, size))) }));
+export const Fermable = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", closable: true, onClose: () => { }, children: "Fermable sm" }), _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Fermable md" }), _jsx(Tag, { size: "md", closable: true, selected: true, onClose: () => { }, children: "Fermable et s\u00E9lectionn\u00E9" })] }));
+export const AvecIcone = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "3W", flexWrap: "wrap", children: [_jsx(Tag, { size: "sm", leading: "Check", children: "Valid\u00E9" }), _jsx(Tag, { size: "md", leading: "Clock", children: "En attente" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, onClose: () => { }, children: "Ic\u00F4ne et croix" }), _jsx(Tag, { size: "md", leading: "Tag", closable: true, selected: true, onClose: () => { }, children: "Tout \u00E0 la fois" })] }));
+export const LibelleLong = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: "3W", style: { maxWidth: 260 }, children: _jsx(Tag, { size: "md", closable: true, onClose: () => { }, children: "Un libell\u00E9 beaucoup trop long pour la place disponible" }) }));
 export * as Sources from './Tag.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAsM,CAAC;AAEzN,eAAO,MAAM,SAAS,cAA2mB,CAAC;AAEloB,eAAO,MAAM,QAAQ,cAA8Y,CAAC;AAEpa,eAAO,MAAM,SAAS,cAAie,CAAC;AAExf,eAAO,MAAM,WAAW,cAA2Q,CAAC;AAEpS,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Tag.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Tag/Tag.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAwM,CAAC;AAE3N,eAAO,MAAM,SAAS,cAA+mB,CAAC;AAEtoB,eAAO,MAAM,QAAQ,cAAgZ,CAAC;AAEta,eAAO,MAAM,SAAS,cAAme,CAAC;AAE1f,eAAO,MAAM,WAAW,cAA6Q,CAAC;AAEtS,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,10 +1,10 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Tag/Tag.stories.tsx
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Tag size=\"sm\">Tag sm</Tag>\n    <Tag size=\"md\">Tag md</Tag>\n  </Box>\n);";
-export const Selection = () => "export const Selection = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={16}>\n    {(['sm', 'md'] as const).map(size => (\n      <Box key={size} display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n        <Tag size={size}>Descriptive, inerte</Tag>\n        <Tag size={size} interactive>\n          Au repos, dans un groupe\n        </Tag>\n        <Tag size={size} interactive selected>\n          Sélectionné\n        </Tag>\n        <Tag size={size} selected closable onClose={() => {}}>\n          Sélectionné et fermable\n        </Tag>\n      </Box>\n    ))}\n  </Box>\n);";
-export const Fermable = () => "export const Fermable = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Tag size=\"sm\" closable onClose={() => {}}>\n      Fermable sm\n    </Tag>\n    <Tag size=\"md\" closable onClose={() => {}}>\n      Fermable md\n    </Tag>\n    <Tag size=\"md\" closable selected onClose={() => {}}>\n      Fermable et sélectionné\n    </Tag>\n  </Box>\n);";
-export const AvecIcone = () => "export const AvecIcone = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} flexWrap=\"wrap\">\n    <Tag size=\"sm\" leading=\"Check\">\n      Validé\n    </Tag>\n    <Tag size=\"md\" leading=\"Clock\">\n      En attente\n    </Tag>\n    <Tag size=\"md\" leading=\"Tag\" closable onClose={() => {}}>\n      Icône et croix\n    </Tag>\n    <Tag size=\"md\" leading=\"Tag\" closable selected onClose={() => {}}>\n      Tout à la fois\n    </Tag>\n  </Box>\n);";
-export const LibelleLong = () => "export const LibelleLong = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap={24} style={{ maxWidth: 260 }}>\n    <Tag size=\"md\" closable onClose={() => {}}>\n      Un libellé beaucoup trop long pour la place disponible\n    </Tag>\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n    <Tag size=\"sm\">Tag sm</Tag>\n    <Tag size=\"md\">Tag md</Tag>\n  </Box>\n);";
+export const Selection = () => "export const Selection = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\">\n    {(['sm', 'md'] as const).map(size => (\n      <Box key={size} display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n        <Tag size={size}>Descriptive, inerte</Tag>\n        <Tag size={size} interactive>\n          Au repos, dans un groupe\n        </Tag>\n        <Tag size={size} interactive selected>\n          Sélectionné\n        </Tag>\n        <Tag size={size} selected closable onClose={() => {}}>\n          Sélectionné et fermable\n        </Tag>\n      </Box>\n    ))}\n  </Box>\n);";
+export const Fermable = () => "export const Fermable = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n    <Tag size=\"sm\" closable onClose={() => {}}>\n      Fermable sm\n    </Tag>\n    <Tag size=\"md\" closable onClose={() => {}}>\n      Fermable md\n    </Tag>\n    <Tag size=\"md\" closable selected onClose={() => {}}>\n      Fermable et sélectionné\n    </Tag>\n  </Box>\n);";
+export const AvecIcone = () => "export const AvecIcone = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" flexWrap=\"wrap\">\n    <Tag size=\"sm\" leading=\"Check\">\n      Validé\n    </Tag>\n    <Tag size=\"md\" leading=\"Clock\">\n      En attente\n    </Tag>\n    <Tag size=\"md\" leading=\"Tag\" closable onClose={() => {}}>\n      Icône et croix\n    </Tag>\n    <Tag size=\"md\" leading=\"Tag\" closable selected onClose={() => {}}>\n      Tout à la fois\n    </Tag>\n  </Box>\n);";
+export const LibelleLong = () => "export const LibelleLong = () => (\n  <Box display=\"flex\" flexDirection=\"row\" gap=\"3W\" style={{ maxWidth: 260 }}>\n    <Tag size=\"md\" closable onClose={() => {}}>\n      Un libellé beaucoup trop long pour la place disponible\n    </Tag>\n  </Box>\n);";
 export const storySources = {
     Sizes,
     Selection,

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

@@ -16,20 +16,20 @@ export declare const useStyles: () => {
         alignItems: "center";
         borderRadius: Radius;
         borderWidth: number;
-        borderColor: string;
-        color: string;
-        backgroundColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        color: import("@alveole/theme").ThemeColor;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         whiteSpace: "nowrap";
         overflow: "hidden";
         textOverflow: "ellipsis";
         maxWidth: string;
     };
     tagSurvole: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     tagSelected: {
-        borderColor: string;
-        color: string;
+        borderColor: import("@alveole/theme").ThemeColor;
+        color: import("@alveole/theme").ThemeColor;
     };
     tagSm: {
         fontSize: 12;
@@ -58,7 +58,7 @@ export declare const useStyles: () => {
         marginRight: number;
     };
     croixSurvolee: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     croixSm: {
         marginLeft: number;

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

@@ -39,7 +39,7 @@ export declare const reponseAuPointeur: ({ manipulable, pastilleSurvolee, croixS
 };
 /** Le cercle de la croix : son gabarit suit le cran, seul son fond change au survol. */
 export declare const apparenceDeLaCroix: (styles: Styles, size: TailleDEtiquette, survolee: boolean) => {
-    backgroundColor?: string | undefined;
+    backgroundColor?: import("@alveole/theme").ThemeColor | undefined;
     marginLeft: number;
     alignItems: "center";
     justifyContent: "center";
@@ -52,7 +52,7 @@ export declare const apparenceDeLaCroix: (styles: Styles, size: TailleDEtiquette
 /** L'icone de la croix grossit avec la pastille et prend la teinte du libelle. */
 export declare const apparenceDeLIconeDeCroix: (styles: Styles, size: TailleDEtiquette, fonce: boolean) => {
     size: "sm" | "xs";
-    color: string;
+    color: import("@alveole/theme").ThemeColor;
 };
 export {};
 //# sourceMappingURL=tagStyling.d.ts.map

package/dist/ui/TextInputArray/TextInputArray.js

@@ -13,5 +13,5 @@ export const TextInputArray = (props) => {
         removeEmpty,
         dedupe,
     });
-    return (_jsxs(Box, { tag: "text-input-array", gap: "1V", children: [items.map((item, index) => (_jsx(TextInput, { placeholder: placeholder, autoCapitalize: "words", value: item.value, onChangeText: (txt) => updateItem(item.id, txt), endAdornment: item._original != null && disabledDeleteForOriginals.includes(item._original) ? undefined : (_jsx(InputButtonAdornment, { icon: "X", position: "end", accessibilityLabel: `Retirer la ligne ${index + 1}`, onPress: () => removeItem(item.id) })), onBlur: notifier }, item.id))), _jsx(Box, { display: "flex", flexDirection: "row", pt: '100', justify: 'flex-start', children: _jsx(Button, { variant: "tertiary", leading: "Plus", title: addTitle, onPress: () => addItem() }) })] }));
+    return (_jsxs(Box, { tag: "text-input-array", gap: "1V", children: [items.map((item, index) => (_jsx(TextInput, { placeholder: placeholder, autoCapitalize: "words", value: item.value, onChangeText: (txt) => updateItem(item.id, txt), endAdornment: item._original != null && disabledDeleteForOriginals.includes(item._original) ? undefined : (_jsx(InputButtonAdornment, { icon: "X", position: "end", accessibilityLabel: `Retirer la ligne ${index + 1}`, onPress: () => removeItem(item.id) })), onBlur: notifier }, item.id))), _jsx(Box, { display: "flex", flexDirection: "row", pt: "2W", justify: 'flex-start', children: _jsx(Button, { variant: "tertiary", leading: "Plus", title: addTitle, onPress: () => addItem() }) })] }));
 };

package/dist/ui/TextareaInput/TextareaInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextInputProps } from '../FormControl';
+import { TextInputElement, TextInputProps } from '../FormControl';
 export type TextareaInputProps = TextInputProps & {
     numberOfLines?: number;
     onModalSubmit?: () => void;
@@ -17,5 +17,5 @@ export declare const TextareaInput: React.ForwardRefExoticComponent<Omit<import(
 } & {
     numberOfLines?: number;
     onModalSubmit?: () => void;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TextareaInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAK7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;oBAJR,MAAM;oBACN,MAAM,IAAI;0DAkB1B,CAAC"}
+{"version":3,"file":"TextareaInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TextareaInput/TextareaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAK7E,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;oBAJR,MAAM;oBACN,MAAM,IAAI;0CAkB1B,CAAC"}

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

@@ -16,7 +16,7 @@ declare const _default: {
     } & {
         numberOfLines?: number;
         onModalSubmit?: () => void;
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("..").TextInputElement>>;
     styleFn: () => {};
 };
 export default _default;

package/dist/ui/TextareaInput/TextareaInput.stories.js

@@ -13,5 +13,5 @@ export default {
 };
 // TextareaInput est le champ nu : c'est FormControl qui porte le libellé et le relie au champ.
 const Champ = ({ label, children }) => (_jsxs(FormControl, { children: [_jsx(InputHeading, { children: _jsx(FormControlLabel, { label: label }) }), children] }));
-export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 24, children: [_jsx(Champ, { label: "Message", children: _jsx(TextareaInput, { placeholder: "Votre message...", numberOfLines: 4 }) }), _jsx(Champ, { label: "Avec valeur", children: _jsx(TextareaInput, { value: "Contenu du message", numberOfLines: 4 }) }), _jsx(Champ, { label: "D\u00E9sactiv\u00E9", children: _jsx(TextareaInput, { placeholder: "D\u00E9sactiv\u00E9", disabled: true, numberOfLines: 4 }) })] }));
+export const Default = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "3W", children: [_jsx(Champ, { label: "Message", children: _jsx(TextareaInput, { placeholder: "Votre message...", numberOfLines: 4 }) }), _jsx(Champ, { label: "Avec valeur", children: _jsx(TextareaInput, { value: "Contenu du message", numberOfLines: 4 }) }), _jsx(Champ, { label: "D\u00E9sactiv\u00E9", children: _jsx(TextareaInput, { placeholder: "D\u00E9sactiv\u00E9", disabled: true, numberOfLines: 4 }) })] }));
 export * as Sources from './TextareaInput.stories.sources';

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

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

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/TextareaInput/TextareaInput.stories.tsx
-export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap={24}>\n    <Champ label=\"Message\">\n      <TextareaInput placeholder=\"Votre message...\" numberOfLines={4} />\n    </Champ>\n    <Champ label=\"Avec valeur\">\n      <TextareaInput value=\"Contenu du message\" numberOfLines={4} />\n    </Champ>\n    <Champ label=\"Désactivé\">\n      <TextareaInput placeholder=\"Désactivé\" disabled numberOfLines={4} />\n    </Champ>\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"3W\">\n    <Champ label=\"Message\">\n      <TextareaInput placeholder=\"Votre message...\" numberOfLines={4} />\n    </Champ>\n    <Champ label=\"Avec valeur\">\n      <TextareaInput value=\"Contenu du message\" numberOfLines={4} />\n    </Champ>\n    <Champ label=\"Désactivé\">\n      <TextareaInput placeholder=\"Désactivé\" disabled numberOfLines={4} />\n    </Champ>\n  </Box>\n);";
 export const storySources = {
     Default,
 };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextInputElement } from '../FormControl';
 import { ChampHHMMProps } from '../FormControl/ChampHHMM';
 export type TimeInputProps = ChampHHMMProps;
 export declare const TimeInput: React.ForwardRefExoticComponent<import("..").FormControlCaptionProps & {
@@ -6,5 +7,5 @@ export declare const TimeInput: React.ForwardRefExoticComponent<import("..").For
     onChange?: (value: string) => void;
     onBlur?: () => void;
     disabled?: boolean;
-} & React.RefAttributes<import("react-native").TextInput>>;
+} & React.RefAttributes<TextInputElement>>;
 //# sourceMappingURL=TimeInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAa,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAQ5C,eAAO,MAAM,SAAS;;;;;0DAEpB,CAAC"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAa,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAQ5C,eAAO,MAAM,SAAS;;;;;0CAEpB,CAAC"}

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

@@ -9,7 +9,7 @@ declare const _default: {
         onChange?: (value: string) => void;
         onBlur?: () => void;
         disabled?: boolean;
-    } & import("react").RefAttributes<import("react-native").TextInput>>;
+    } & import("react").RefAttributes<import("..").TextInputElement>>;
     styleFn: () => string;
 };
 export default _default;

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

@@ -23,6 +23,6 @@ Le champ est nu : on le place dans un FormControl pour son libellé, son aide et
     component: TimeInput,
     styleFn: () => 'Aucun style appliqué',
 };
-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(FormControl, { label: "Heure", children: _jsx(TimeInput, {}) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", children: _jsx(TimeInput, { value: "09:30" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", hint: "Heure de d\u00E9but de mission", children: _jsx(TimeInput, { value: "14:00" }) }) })] }) }));
-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(FormControl, { label: "Erreur", error: "Heure invalide (00:00\u201323:59)", children: _jsx(TimeInput, { value: "25:70", error: "Heure invalide (00:00\u201323:59)" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(TimeInput, { value: "09:30", success: "Enregistr\u00E9" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(TimeInput, { value: "09:30", disabled: true }) }) })] }) }));
+export const Default = () => (_jsx(Box, { width: "100%", p: "1W", children: _jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", children: _jsx(TimeInput, {}) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", children: _jsx(TimeInput, { value: "09:30" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Heure", hint: "Heure de d\u00E9but de mission", children: _jsx(TimeInput, { value: "14:00" }) }) })] }) }));
+export const States = () => (_jsx(Box, { width: "100%", p: "1W", children: _jsxs(Grid, { gap: "1W", children: [_jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Erreur", error: "Heure invalide (00:00\u201323:59)", children: _jsx(TimeInput, { value: "25:70", error: "Heure invalide (00:00\u201323:59)" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "Succ\u00E8s", success: "Enregistr\u00E9", children: _jsx(TimeInput, { value: "09:30", success: "Enregistr\u00E9" }) }) }), _jsx(Grid.Column, { size: { mobile: 12, desktop: 4 }, children: _jsx(FormControl, { label: "D\u00E9sactiv\u00E9", disabled: true, children: _jsx(TimeInput, { value: "09:30", disabled: true }) }) })] }) }));
 export * as Sources from './TimeInput.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAwqB,CAAC;AAE7rB,eAAO,MAAM,MAAM,cAAwyB,CAAC;AAE5zB,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"TimeInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/TimeInput/TimeInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA8qB,CAAC;AAEnsB,eAAO,MAAM,MAAM,cAA8yB,CAAC;AAEl0B,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,7 +1,7 @@
 // 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        <FormControl label=\"Heure\">\n          <TimeInput />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\">\n          <TimeInput value=\"09:30\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\" hint=\"Heure de début de mission\">\n          <TimeInput value=\"14:00\" />\n        </FormControl>\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        <FormControl label=\"Erreur\" error=\"Heure invalide (00:00–23:59)\">\n          <TimeInput value=\"25:70\" error=\"Heure invalide (00:00–23:59)\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Succès\" success=\"Enregistré\">\n          <TimeInput value=\"09:30\" success=\"Enregistré\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Désactivé\" disabled>\n          <TimeInput value=\"09:30\" disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const Default = () => "export const Default = () => (\n  <Box width=\"100%\" p=\"1W\">\n    <Grid gap=\"1W\">\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\">\n          <TimeInput />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\">\n          <TimeInput value=\"09:30\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Heure\" hint=\"Heure de début de mission\">\n          <TimeInput value=\"14:00\" />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
+export const States = () => "export const States = () => (\n  <Box width=\"100%\" p=\"1W\">\n    <Grid gap=\"1W\">\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Erreur\" error=\"Heure invalide (00:00–23:59)\">\n          <TimeInput value=\"25:70\" error=\"Heure invalide (00:00–23:59)\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Succès\" success=\"Enregistré\">\n          <TimeInput value=\"09:30\" success=\"Enregistré\" />\n        </FormControl>\n      </Grid.Column>\n      <Grid.Column size={{ mobile: 12, desktop: 4 }}>\n        <FormControl label=\"Désactivé\" disabled>\n          <TimeInput value=\"09:30\" disabled />\n        </FormControl>\n      </Grid.Column>\n    </Grid>\n  </Box>\n);";
 export const storySources = {
     Default,
     States,