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

package/dist/ui/Select/selectTriggerStyle.d.ts

@@ -12,7 +12,59 @@ export type SelectTriggerState = Omit<FieldBorderState, 'focus'> & {
  * L'etat de bordure vient en dernier : rien ne doit le recouvrir.
  */
 export declare const selectTriggerStyle: (styles: SelectStyles, { open, multiple, ...state }: SelectTriggerState) => {
+    borderWidth: number;
     borderColor: string;
+    outlineWidth?: number | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineColor?: string | undefined;
+    outlineOffset?: number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    borderColor: import("@alveole/theme").ThemeColor;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    borderColor: import("@alveole/theme").ThemeColor;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    display: "flex";
+    flexDirection: "row";
+    alignItems: "center";
+    gap: string | number;
+    paddingLeft: number;
+    paddingRight: number;
+    minHeight: number;
+    borderRadius: import("@alveole/theme").Radius;
+    borderWidth: number;
+    borderStyle: "solid";
+    backgroundColor: import("@alveole/theme").ThemeColor;
+    width: "100%";
+} | {
+    borderColor: import("@alveole/theme").ThemeColor;
     paddingTop?: string | number | undefined;
     paddingBottom?: string | number | undefined;
     display: "flex";
@@ -25,7 +77,7 @@ export declare const selectTriggerStyle: (styles: SelectStyles, { open, multiple
     borderRadius: import("@alveole/theme").Radius;
     borderWidth: number;
     borderStyle: "solid";
-    backgroundColor: string;
+    backgroundColor: import("@alveole/theme").ThemeColor;
     width: "100%";
 };
 export {};

package/dist/ui/Select/selectTriggerStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectTriggerStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectTriggerStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,8BAA8B,kBAAkB;;;;;;;;;;;;;;;;CAIvG,CAAC"}
+{"version":3,"file":"selectTriggerStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectTriggerStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzG;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,8BAA8B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIvG,CAAC"}

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

@@ -17,13 +17,13 @@ declare const _default: {
         sidebarItemSelectedIndicatorContent: {
             width: "100%";
             minHeight: string | number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
             margin: string;
             borderRadius: string | number;
         };
         sidebarItemTitleSelectedDesktop: {
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -31,8 +31,8 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleSelectedMobile: {
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -40,8 +40,8 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleDesktop: {
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
             fontSize: 14;
             lineHeight: 20;
             letterSpacing: 0;
@@ -49,8 +49,8 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleMobile: {
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -58,7 +58,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemTitleCurrentHoverMobile: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             fontSize: 16;
             lineHeight: 24;
             letterSpacing: 0;
@@ -66,11 +66,11 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         sidebarItemSelectedDesktop: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         sidebarItemSelectedMobile: {
             borderRadius: import("@alveole/theme").Radius;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         sidebarItemContainerDesktop: {
             paddingLeft: string | number;
@@ -105,8 +105,8 @@ declare const _default: {
             paddingLeft: string | number;
             paddingRight: string | number;
             width: "100%";
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
         };
         sidebarItemMobile: {
             display: "flex";
@@ -118,17 +118,17 @@ declare const _default: {
             paddingTop: string | number;
             paddingBottom: string | number;
             width: "100%";
-            color: string;
-            stroke: string;
+            color: import("@alveole/theme").ThemeColor;
+            stroke: import("@alveole/theme").ThemeColor;
         };
         sidebarItemHover: {
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
         groupDesktop: {
             marginTop: string | number;
         };
         groupTitleDesktop: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: number;
             paddingTop: string | number;
             paddingBottom: string | number;
@@ -139,7 +139,7 @@ declare const _default: {
             fontWeight?: import("react-native").TextStyle["fontWeight"];
         };
         groupTitleMobile: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             paddingLeft: string | number;
             paddingRight: string | number;
             paddingTop: string | number;
@@ -153,7 +153,7 @@ declare const _default: {
         sidebar: {
             backgroundColor: "#FFFFFF";
             borderRightWidth: number;
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             display: "flex";
             flexDirection: "column";
             alignItems: "flex-start";

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBAYkB;AAElB,eAAO,MAAM,YAAY,mCAsBxB,CAAC;AAaF,eAAO,MAAM,kBAAkB,mCA6D9B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"Sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBAYkB;AAElB,eAAO,MAAM,YAAY,mCAuBxB,CAAC;AAaF,eAAO,MAAM,kBAAkB,mCA6D9B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}

package/dist/ui/Sidebar/Sidebar.stories.js

@@ -23,7 +23,7 @@ export default {
 };
 export const ExampleUsage = () => {
     const controller = useSidebar();
-    return (_jsxs(Sidebar, { controller: controller, logo: _jsx(Typography, { fontSize: 16, style: { fontWeight: '700' }, children: "Mon Application" }), footer: _jsx(SidebarItem, { pressable: true, leading: "LogOut", title: "Se d\u00E9connecter", onPress: console.log }), children: [_jsx(SidebarItem, { pressable: true, title: "Item 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 2", counter: 3, onPress: console.log }), _jsxs(SidebarGroup, { title: "Groupe", children: [_jsx(SidebarItem, { pressable: true, title: "Item group 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item group 2", onPress: console.log })] })] }));
+    return (_jsxs(Sidebar, { controller: controller, logo: _jsx(Typography, { fontSize: 16, style: { fontWeight: '700' }, children: "Mon Application" }), footer: _jsx(SidebarItem, { pressable: true, leading: "LogOut", title: "Se d\u00E9connecter", onPress: console.log }), children: [_jsx(SidebarItem, { pressable: true, title: "Item 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 2", counter: 3, onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item 3", counter: 5, counterVariant: "primary", onPress: console.log }), _jsxs(SidebarGroup, { title: "Groupe", children: [_jsx(SidebarItem, { pressable: true, title: "Item group 1", onPress: console.log }), _jsx(SidebarItem, { pressable: true, title: "Item group 2", onPress: console.log })] })] }));
 };
 // Faute de logo publie pour Alveole, une forme generee tient lieu de logo.
 const organisations = [

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAiyB,CAAC;AAE3zB,eAAO,MAAM,kBAAkB,cAA2/D,CAAC;AAE3hE,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
+{"version":3,"file":"Sidebar.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/Sidebar.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,cAAg5B,CAAC;AAE16B,eAAO,MAAM,kBAAkB,cAA2/D,CAAC;AAE3hE,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}

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

@@ -1,6 +1,6 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Sidebar/Sidebar.stories.tsx
-export const ExampleUsage = () => "export const ExampleUsage = () => {\n  const controller = useSidebar();\n\n  return (\n    <Sidebar\n      controller={controller}\n      logo={\n        <Typography fontSize={16} style={{ fontWeight: '700' }}>\n          Mon Application\n        </Typography>\n      }\n      footer={<SidebarItem pressable leading=\"LogOut\" title=\"Se déconnecter\" onPress={console.log} />}\n    >\n      <SidebarItem pressable title=\"Item 1\" onPress={console.log} />\n      <SidebarItem pressable title=\"Item 2\" counter={3} onPress={console.log} />\n\n      <SidebarGroup title=\"Groupe\">\n        <SidebarItem pressable title=\"Item group 1\" onPress={console.log} />\n        <SidebarItem pressable title=\"Item group 2\" onPress={console.log} />\n      </SidebarGroup>\n    </Sidebar>\n  );\n};";
+export const ExampleUsage = () => "export const ExampleUsage = () => {\n  const controller = useSidebar();\n\n  return (\n    <Sidebar\n      controller={controller}\n      logo={\n        <Typography fontSize={16} style={{ fontWeight: '700' }}>\n          Mon Application\n        </Typography>\n      }\n      footer={<SidebarItem pressable leading=\"LogOut\" title=\"Se déconnecter\" onPress={console.log} />}\n    >\n      <SidebarItem pressable title=\"Item 1\" onPress={console.log} />\n      <SidebarItem pressable title=\"Item 2\" counter={3} onPress={console.log} />\n      <SidebarItem pressable title=\"Item 3\" counter={5} counterVariant=\"primary\" onPress={console.log} />\n\n      <SidebarGroup title=\"Groupe\">\n        <SidebarItem pressable title=\"Item group 1\" onPress={console.log} />\n        <SidebarItem pressable title=\"Item group 2\" onPress={console.log} />\n      </SidebarGroup>\n    </Sidebar>\n  );\n};";
 export const AvecHeaderEtFooter = () => "export const AvecHeaderEtFooter = () => {\n  const [orga, setOrga] = useState('Alveole');\n\n  const logo = (\n    <ActionMenu\n      placement=\"bottom-start\"\n      renderTrigger={() => (\n        <Button\n          variant=\"tertiary\"\n          size=\"md\"\n          contentAlign=\"start\"\n          title={orga}\n          leading={<LogoDOrganisation nom={orga} />}\n          trailing=\"ChevronDown\"\n        />\n      )}\n    >\n      {organisations.map(({ nom }) => (\n        <ActionMenu.Item\n          key={nom}\n          title={nom}\n          leading={<LogoDOrganisation nom={nom} />}\n          selected={nom === orga}\n          onPress={() => setOrga(nom)}\n        />\n      ))}\n    </ActionMenu>\n  );\n\n  const footer = (\n    <ActionMenu\n      placement=\"top-start\"\n      renderTrigger={() => (\n        <Button\n          variant=\"tertiary\"\n          size=\"lg\"\n          contentAlign=\"start\"\n          title=\"Clément Prod'homme\"\n          leading={<Avatar size=\"sm\" src=\"https://www.loremfaces.net/96/id/1.jpg\" fallbackText=\"Clément Prod'homme\" />}\n        />\n      )}\n    >\n      <ActionMenu.Item title=\"Mon profil\" leading=\"User\" />\n      <ActionMenu.Item title=\"Paramètres\" leading=\"Settings\" />\n      <ActionMenu.Item title=\"Aide\" leading=\"HelpCircle\" />\n      <ActionMenu.Item title=\"Se déconnecter\" leading=\"LogOut\" />\n    </ActionMenu>\n  );\n\n  return (\n    <Sidebar logo={logo} footer={footer}>\n      <SidebarItem pressable leading=\"LayoutDashboard\" title=\"Tableau de bord\" onPress={console.log} />\n      <SidebarItem pressable leading=\"Users\" title=\"Utilisateurs\" onPress={console.log} />\n      <SidebarItem pressable leading=\"FileText\" title=\"Rapports\" onPress={console.log} />\n\n      <SidebarDivider />\n\n      <SidebarItem pressable leading=\"Settings\" title=\"Configuration\" onPress={console.log} />\n      <SidebarItem pressable leading=\"Bell\" title=\"Notifications\" onPress={console.log} />\n    </Sidebar>\n  );\n};";
 export const storySources = {
     ExampleUsage,

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

@@ -8,13 +8,13 @@ export declare const useStyles: () => {
     sidebarItemSelectedIndicatorContent: {
         width: "100%";
         minHeight: string | number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
         margin: string;
         borderRadius: string | number;
     };
     sidebarItemTitleSelectedDesktop: {
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -22,8 +22,8 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleSelectedMobile: {
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -31,8 +31,8 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleDesktop: {
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
         fontSize: 14;
         lineHeight: 20;
         letterSpacing: 0;
@@ -40,8 +40,8 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleMobile: {
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -49,7 +49,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemTitleCurrentHoverMobile: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         fontSize: 16;
         lineHeight: 24;
         letterSpacing: 0;
@@ -57,11 +57,11 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     sidebarItemSelectedDesktop: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     sidebarItemSelectedMobile: {
         borderRadius: import("@alveole/theme").Radius;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     sidebarItemContainerDesktop: {
         paddingLeft: string | number;
@@ -96,8 +96,8 @@ export declare const useStyles: () => {
         paddingLeft: string | number;
         paddingRight: string | number;
         width: "100%";
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
     };
     sidebarItemMobile: {
         display: "flex";
@@ -109,17 +109,17 @@ export declare const useStyles: () => {
         paddingTop: string | number;
         paddingBottom: string | number;
         width: "100%";
-        color: string;
-        stroke: string;
+        color: import("@alveole/theme").ThemeColor;
+        stroke: import("@alveole/theme").ThemeColor;
     };
     sidebarItemHover: {
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
     groupDesktop: {
         marginTop: string | number;
     };
     groupTitleDesktop: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingLeft: number;
         paddingTop: string | number;
         paddingBottom: string | number;
@@ -130,7 +130,7 @@ export declare const useStyles: () => {
         fontWeight?: import("react-native").TextStyle["fontWeight"];
     };
     groupTitleMobile: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         paddingLeft: string | number;
         paddingRight: string | number;
         paddingTop: string | number;
@@ -144,7 +144,7 @@ export declare const useStyles: () => {
     sidebar: {
         backgroundColor: "#FFFFFF";
         borderRightWidth: number;
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         display: "flex";
         flexDirection: "column";
         alignItems: "flex-start";

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

@@ -3,7 +3,7 @@ import { makeStyles } from '@alveole/theme';
 // aligne au pixel. L'item y arrive par trois retraits emboîtés : la marge de son conteneur,
 // le padding de ce conteneur, puis celui de la pastille qui porte le texte. Le titre n'en a
 // qu'un seul, d'où cette somme explicite : sans elle les deux dérivent au premier réglage.
-const retraitDuContenu = (spacingValue) => spacingValue('075') + spacingValue('050') + spacingValue('050');
+const retraitDuContenu = (spacingValue) => spacingValue('3V') + spacingValue('1W') + spacingValue('1W');
 const coque = ({ color, spacing, spacingValue, isVariant }) => ({
     sidebar: {
         backgroundColor: '#FFFFFF',
@@ -18,7 +18,7 @@ const coque = ({ color, spacing, spacingValue, isVariant }) => ({
     headerContent: {
         display: 'flex',
         flexDirection: 'row',
-        padding: spacingValue('050'),
+        padding: spacingValue('1W'),
     },
     logo: {
         marginLeft: isVariant('mobile') || isVariant('tablet') ? spacing('3W') : 0,
@@ -166,7 +166,7 @@ const titreDeLItem = ({ text, color }) => ({
 const indicateur = ({ color, spacing, spacingValue }) => ({
     sidebarItemSelectedIndicator: {
         height: '100%',
-        width: spacingValue('025'),
+        width: spacingValue('1V'),
         position: 'absolute',
         left: 0,
     },

package/dist/ui/Sidebar/SidebarHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AA0CF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAKtD,CAAC"}
+{"version":3,"file":"SidebarHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AA+CF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAKtD,CAAC"}

package/dist/ui/Sidebar/SidebarHeader.js

@@ -20,7 +20,10 @@ const SidebarHeaderMobile = (props) => {
     const { controller } = props;
     const styles = useStyles();
     const { top } = useSafeAreaInsets();
-    return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsxs(Box, { style: styles.headerContent, pt: (Platform.OS === 'android' ? top : 0) + styles.headerContent.padding, children: [_jsx(Box, { flex: 1 }), _jsx(ButtonIcon, { icon: "X", variant: "tertiary", accessibilityLabel: "Fermer le menu", onPress: () => controller?.setOpen(false) })] }), _jsx(Divider, {})] }));
+    return (_jsxs(Box, { tag: "sidebar-header", style: styles.header, children: [_jsxs(Box, { style: [
+                    styles.headerContent,
+                    { paddingTop: (Platform.OS === 'android' ? top : 0) + styles.headerContent.padding },
+                ], children: [_jsx(Box, { flex: 1 }), _jsx(ButtonIcon, { icon: "X", variant: "tertiary", accessibilityLabel: "Fermer le menu", onPress: () => controller?.setOpen(false) })] }), _jsx(Divider, {})] }));
 };
 export const SidebarHeader = (props) => {
     const { isVariant } = useTheme();

package/dist/ui/Signature/Signature.js

@@ -53,7 +53,7 @@ export const Signature = (props) => {
     const styles = useStyles();
     const ref = React.useRef(null);
     const { handleOk, handleEnd, handleClear } = useLectureDifferee(ref, onChange);
-    const webviewHeightWithBorders = height + spacingValue('200') + spacingValue('100') + 3;
+    const webviewHeightWithBorders = height + spacingValue('4W') + spacingValue('2W') + 3;
     return (_jsxs(Box, { height: webviewHeightWithBorders, width: '100%', children: [_jsx(SignatureHeader, { date: date, dateLabel: dateLabel, clearButtonLabel: clearButtonLabel, onClear: () => ref.current?.clearSignature() }), _jsx(Box, { tag: "signature", height: '100%', onTouchEnd: onEnd, maxH: webviewHeightWithBorders, style: styles.container, children: _jsx(SignatureCanvas, { ref: ref, onOK: handleOk, onEnd: handleEnd, onClear: handleClear, penColor: styles.pen.color, backgroundColor: styles.pen.backgroundColor, dotSize: 3.5, minWidth: 3, maxWidth: 4, onBegin: onBegin, androidHardwareAccelerationDisabled: true, webviewProps: { cacheEnabled: false, androidLayerType: 'software' }, webStyle: feuilleDeStyleCanvas({
                         height,
                         rayon: spacing('3V'),

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

@@ -12,11 +12,11 @@ declare const _default: {
             flexDirection: "column";
         };
         pen: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
             backgroundColor: "#FFFFFF";
         };
         signatureWeb: {
-            borderColor: string;
+            borderColor: import("@alveole/theme").ThemeColor;
             borderWidth: number;
             borderRadius: import("@alveole/theme").Radius;
         };

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

@@ -5,11 +5,11 @@ export declare const useStyles: () => {
         flexDirection: "column";
     };
     pen: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         backgroundColor: "#FFFFFF";
     };
     signatureWeb: {
-        borderColor: string;
+        borderColor: import("@alveole/theme").ThemeColor;
         borderWidth: number;
         borderRadius: import("@alveole/theme").Radius;
     };

package/dist/ui/Skeleton/Skeleton.js

@@ -5,7 +5,7 @@ import { Box } from '../../core/Box';
 import { useStyles } from './Skeleton.styles';
 const PULSE_DURATION = 700;
 export const Skeleton = (props) => {
-    const { width = '100%', height = 16, borderRadius = 4, style, ...rest } = props;
+    const { width = '100%', height = 16, borderRadius = 'sm', style, ...rest } = props;
     const styles = useStyles();
     const [opacity] = React.useState(() => new Animated.Value(0.5));
     React.useEffect(() => {

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

@@ -16,7 +16,7 @@ declare const _default: {
             right: number;
             bottom: number;
             left: number;
-            backgroundColor: string;
+            backgroundColor: import("@alveole/theme").ThemeColor;
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,wBAakB;AAElB,eAAO,MAAM,KAAK,mCAAiC,CAAC;AAEpD,eAAO,MAAM,KAAK,mCAA4C,CAAC;AAE/D,eAAO,MAAM,IAAI,mCAA8D,CAAC;AAEhF,eAAO,MAAM,SAAS,mCAAmD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,mCAY1B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,wBAakB;AAElB,eAAO,MAAM,KAAK,mCAAiC,CAAC;AAEpD,eAAO,MAAM,KAAK,mCAA4C,CAAC;AAE/D,eAAO,MAAM,IAAI,mCAAgE,CAAC;AAElF,eAAO,MAAM,SAAS,mCAAoD,CAAC;AAE3E;;GAEG;AACH,eAAO,MAAM,UAAU,mCAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,mCAY1B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}

package/dist/ui/Skeleton/Skeleton.stories.js

@@ -18,8 +18,8 @@ La forme se règle avec \`width\` (\`100%\` par défaut), \`height\` (16 px par
 };
 export const Ligne = () => _jsx(Skeleton, { width: "60%" });
 export const Carre = () => _jsx(Skeleton, { width: 64, height: 64 });
-export const Rond = () => _jsx(Skeleton, { width: 48, height: 48, borderRadius: 24 });
-export const Rectangle = () => _jsx(Skeleton, { height: 160, borderRadius: 8 });
+export const Rond = () => _jsx(Skeleton, { width: 48, height: 48, borderRadius: "full" });
+export const Rectangle = () => _jsx(Skeleton, { height: 160, borderRadius: "md" });
 /**
  * Des lignes de largeurs décroissantes imitent un paragraphe de texte.
  */
@@ -27,5 +27,5 @@ export const Paragraphe = () => (_jsxs(Box, { display: "flex", flexDirection: "c
 /**
  * Les formes se composent pour préfigurer un élément de liste : un avatar rond, un titre et un sous-titre.
  */
-export const ElementDeListe = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", width: "100%", children: [0, 1, 2].map(i => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Skeleton, { width: 40, height: 40, borderRadius: 20 }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1V", flex: 1, children: [_jsx(Skeleton, { width: "40%", height: 18 }), _jsx(Skeleton, { width: "65%", height: 14 })] })] }, i))) }));
+export const ElementDeListe = () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2W", width: "100%", children: [0, 1, 2].map(i => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "1W", style: { alignItems: 'center' }, children: [_jsx(Skeleton, { width: 40, height: 40, borderRadius: "full" }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "1V", flex: 1, children: [_jsx(Skeleton, { width: "40%", height: 18 }), _jsx(Skeleton, { width: "65%", height: 14 })] })] }, i))) }));
 export * as Sources from './Skeleton.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAiE,CAAC;AAEpF,eAAO,MAAM,KAAK,cAA0E,CAAC;AAE7F,eAAO,MAAM,IAAI,cAA2F,CAAC;AAE7G,eAAO,MAAM,SAAS,cAAqF,CAAC;AAE5G,eAAO,MAAM,UAAU,cAAqQ,CAAC;AAE7R,eAAO,MAAM,cAAc,cAAqiB,CAAC;AAEjkB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}
+{"version":3,"file":"Skeleton.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Skeleton/Skeleton.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAiE,CAAC;AAEpF,eAAO,MAAM,KAAK,cAA0E,CAAC;AAE7F,eAAO,MAAM,IAAI,cAA+F,CAAC;AAEjH,eAAO,MAAM,SAAS,cAAwF,CAAC;AAE/G,eAAO,MAAM,UAAU,cAAqQ,CAAC;AAE7R,eAAO,MAAM,cAAc,cAAyiB,CAAC;AAErkB,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}

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

@@ -2,10 +2,10 @@
 // Source: src/ui/Skeleton/Skeleton.stories.tsx
 export const Ligne = () => "export const Ligne = () => <Skeleton width=\"60%\" />;";
 export const Carre = () => "export const Carre = () => <Skeleton width={64} height={64} />;";
-export const Rond = () => "export const Rond = () => <Skeleton width={48} height={48} borderRadius={24} />;";
-export const Rectangle = () => "export const Rectangle = () => <Skeleton height={160} borderRadius={8} />;";
+export const Rond = () => "export const Rond = () => <Skeleton width={48} height={48} borderRadius=\"full\" />;";
+export const Rectangle = () => "export const Rectangle = () => <Skeleton height={160} borderRadius=\"md\" />;";
 export const Paragraphe = () => "export const Paragraphe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" width=\"100%\">\n    <Skeleton width=\"40%\" height={20} />\n    <Skeleton />\n    <Skeleton width=\"90%\" />\n    <Skeleton width=\"65%\" />\n  </Box>\n);";
-export const ElementDeListe = () => "export const ElementDeListe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\" width=\"100%\">\n    {[0, 1, 2].map(i => (\n      <Box key={i} display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n        <Skeleton width={40} height={40} borderRadius={20} />\n        <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" flex={1}>\n          <Skeleton width=\"40%\" height={18} />\n          <Skeleton width=\"65%\" height={14} />\n        </Box>\n      </Box>\n    ))}\n  </Box>\n);";
+export const ElementDeListe = () => "export const ElementDeListe = () => (\n  <Box display=\"flex\" flexDirection=\"column\" gap=\"2W\" width=\"100%\">\n    {[0, 1, 2].map(i => (\n      <Box key={i} display=\"flex\" flexDirection=\"row\" gap=\"1W\" style={{ alignItems: 'center' }}>\n        <Skeleton width={40} height={40} borderRadius=\"full\" />\n        <Box display=\"flex\" flexDirection=\"column\" gap=\"1V\" flex={1}>\n          <Skeleton width=\"40%\" height={18} />\n          <Skeleton width=\"65%\" height={14} />\n        </Box>\n      </Box>\n    ))}\n  </Box>\n);";
 export const storySources = {
     Ligne,
     Carre,

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

@@ -9,7 +9,7 @@ export declare const useStyles: () => {
         right: number;
         bottom: number;
         left: number;
-        backgroundColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Skeleton.styles.d.ts.map

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

@@ -7,10 +7,10 @@ declare const _default: {
     component: ({ style, ...props }: import("./Spinner.shared").SpinnerProps) => import("react").JSX.Element | null;
     styleFn: () => {
         track: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         arc: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
 };

package/dist/ui/Spinner/Spinner.stories.js

@@ -20,7 +20,7 @@ La prop \`delay\` permet de retarder l'apparition du spinner pour éviter un fla
     component: Spinner,
     styleFn: useStyles,
 };
-export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 16, children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, { size: "md" }), _jsx(Spinner, { size: "lg" })] }));
+export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: "2W", children: [_jsx(Spinner, { size: "sm" }), _jsx(Spinner, { size: "md" }), _jsx(Spinner, { size: "lg" })] }));
 /**
  * `delay` retarde l'apparition du spinner pour éviter un flash sur les opérations rapides :
  * rien ne s'affiche avant que le délai ne soit écoulé. `'short'` attend 300 ms, `'long'`
@@ -28,5 +28,5 @@ export const Sizes = () => (_jsxs(Box, { display: "flex", flexDirection: "row",
  * millisecondes. C'est cette même prop que `Button` expose sous le nom `loadingDelay`, pour
  * régler le retard de son propre spinner pendant `isLoading`.
  */
-export const WithDelay = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: 16, children: [_jsx(Spinner, { size: "md", delay: "short" }, "short"), _jsx(Spinner, { size: "md", delay: "long" }, "long")] }));
+export const WithDelay = () => (_jsxs(Box, { display: "flex", flexDirection: "row", style: { alignItems: 'center' }, gap: "2W", children: [_jsx(Spinner, { size: "md", delay: "short" }, "short"), _jsx(Spinner, { size: "md", delay: "long" }, "long")] }));
 export * as Sources from './Spinner.stories.sources';

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAsO,CAAC;AAEzP,eAAO,MAAM,SAAS,cAAuQ,CAAC;AAE9R,eAAO,MAAM,YAAY;;;CAGf,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"}
+{"version":3,"file":"Spinner.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,cAAwO,CAAC;AAE3P,eAAO,MAAM,SAAS,cAAyQ,CAAC;AAEhS,eAAO,MAAM,YAAY;;;CAGf,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"}

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

@@ -1,7 +1,7 @@
 // This file is generated. Do not edit manually.
 // Source: src/ui/Spinner/Spinner.stories.tsx
-export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={16}>\n    <Spinner size=\"sm\" />\n    <Spinner size=\"md\" />\n    <Spinner size=\"lg\" />\n  </Box>\n);";
-export const WithDelay = () => "export const WithDelay = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap={16}>\n    <Spinner size=\"md\" delay=\"short\" key=\"short\" />\n    <Spinner size=\"md\" delay=\"long\" key=\"long\" />\n  </Box>\n);";
+export const Sizes = () => "export const Sizes = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap=\"2W\">\n    <Spinner size=\"sm\" />\n    <Spinner size=\"md\" />\n    <Spinner size=\"lg\" />\n  </Box>\n);";
+export const WithDelay = () => "export const WithDelay = () => (\n  <Box display=\"flex\" flexDirection=\"row\" style={{ alignItems: 'center' }} gap=\"2W\">\n    <Spinner size=\"md\" delay=\"short\" key=\"short\" />\n    <Spinner size=\"md\" delay=\"long\" key=\"long\" />\n  </Box>\n);";
 export const storySources = {
     Sizes,
     WithDelay,

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

@@ -1,9 +1,9 @@
 export declare const useStyles: () => {
     track: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
     arc: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
     };
 };
 //# sourceMappingURL=Spinner.styles.d.ts.map

package/dist/ui/Spinner/useRotation.d.ts

@@ -1,8 +1,10 @@
 import { Animated } from 'react-native';
+export interface Rotation extends Animated.AnimatedInterpolation<string> {
+}
 /**
  * L'angle d'un spinner qui tourne sans fin, un tour toutes les 800 ms.
  *
  * Seul le pilote differe : le natif tourne hors du fil JavaScript, le navigateur n'en a pas.
  */
-export declare const useRotation: (useNativeDriver: boolean) => Animated.AnimatedInterpolation<string | number>;
+export declare const useRotation: (useNativeDriver: boolean) => Rotation;
 //# sourceMappingURL=useRotation.d.ts.map

package/dist/ui/Spinner/useRotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRotation.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useRotation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,iBAAiB,OAAO,oDAYnD,CAAC"}
+{"version":3,"file":"useRotation.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/useRotation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAU,MAAM,cAAc,CAAC;AAIhD,MAAM,WAAW,QAAS,SAAQ,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC;CAAG;AAE3E;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,iBAAiB,OAAO,KAAG,QAYtD,CAAC"}

package/dist/ui/Spinner/useSpinner.d.ts

@@ -6,13 +6,13 @@ import { SpinnerProps } from './Spinner.shared';
 export declare const useSpinner: ({ size, delay }: SpinnerProps, useNativeDriver: boolean) => {
     styles: {
         track: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
         arc: {
-            color: string;
+            color: import("@alveole/theme").ThemeColor;
         };
     };
-    spin: import("react-native").Animated.AnimatedInterpolation<string | number>;
+    spin: import("./useRotation").Rotation;
     visible: boolean;
     px: number;
     strokeWidth: number;