npm - @alveole/components - Versions diffs - 2.0.0-alpha.15 → 2.0.0-alpha.17 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (392) hide show

package/dist/ui/Select/selectControlStyle.d.ts CHANGED Viewed

@@ -21,7 +21,71 @@ export declare const selectControlStyle: (styles: SelectStyles, state: SelectCon
     ':hover': {
         borderColor: string;
     };
+    borderWidth: number;
     borderColor: string;
+    outlineWidth?: number | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineColor?: string | undefined;
+    outlineOffset?: number | undefined;
+    cursor: "pointer";
+    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%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
+    cursor: "pointer";
+    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%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
+    cursor: "pointer";
+    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%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
     cursor: "pointer";
     display: "flex";
     flexDirection: "row";
@@ -33,7 +97,7 @@ export declare const selectControlStyle: (styles: SelectStyles, state: SelectCon
     borderRadius: import("@alveole/theme").Radius;
     borderWidth: number;
     borderStyle: "solid";
-    backgroundColor: string;
+    backgroundColor: import("@alveole/theme").ThemeColor;
     width: "100%";
 } | {
     boxShadow: string;
@@ -41,7 +105,71 @@ export declare const selectControlStyle: (styles: SelectStyles, state: SelectCon
     ':hover': {
         borderColor: string;
     };
+    borderWidth: number;
     borderColor: string;
+    outlineWidth?: number | undefined;
+    outlineStyle?: "solid" | undefined;
+    outlineColor?: string | undefined;
+    outlineOffset?: number | undefined;
+    cursor: "not-allowed";
+    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%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
+    cursor: "not-allowed";
+    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%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
+    cursor: "not-allowed";
+    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%";
+} | {
+    boxShadow: string;
+    outline: string;
+    ':hover': {
+        borderColor: string;
+    };
+    borderColor: import("@alveole/theme").ThemeColor;
     cursor: "not-allowed";
     display: "flex";
     flexDirection: "row";
@@ -53,7 +181,7 @@ export declare const selectControlStyle: (styles: SelectStyles, state: SelectCon
     borderRadius: import("@alveole/theme").Radius;
     borderWidth: number;
     borderStyle: "solid";
-    backgroundColor: string;
+    backgroundColor: import("@alveole/theme").ThemeColor;
     width: "100%";
 };
 export {};

package/dist/ui/Select/selectControlStyle.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selectControlStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectControlStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,OAAO,kBAAkB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAkBjF,CAAC"}
1	+ {"version":3,"file":"selectControlStyle.d.ts","sourceRoot":"","sources":["../../../src/ui/Select/selectControlStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,EAAE,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBjF,CAAC"}

package/dist/ui/Select/selectItemStyle.d.ts CHANGED Viewed

@@ -37,11 +37,11 @@ export declare const selectItemStyle: (styles: SelectListStyles, couleurs: {
         borderRadius: import("@alveole/theme").Radius;
     };
     fondDeBande: {
-        default: string | undefined;
-        hover: string | undefined;
+        default: import("@alveole/theme").ThemeColor | undefined;
+        hover: import("@alveole/theme").ThemeColor | undefined;
     };
     label: {
-        color: string;
+        color: import("@alveole/theme").ThemeColor;
         flex: number;
         fontSize: 14;
         lineHeight: 20;
@@ -51,8 +51,8 @@ export declare const selectItemStyle: (styles: SelectListStyles, couleurs: {
     };
     icone: string;
     caseACocher: {
-        backgroundColor: string;
-        borderColor: string;
+        backgroundColor: import("@alveole/theme").ThemeColor | "transparent";
+        borderColor: import("@alveole/theme").ThemeColor;
         display: "flex";
         alignItems: "center";
         justifyContent: "center";

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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", 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 CHANGED Viewed

	@@ -1 +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,~~cAAqxB~~,CAAC;~~AAE/yB~~,eAAO,MAAM,kBAAkB,cAA2/D,CAAC;AAE3hE,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
1	+ {"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 CHANGED Viewed

@@ -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\" 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;AA+CF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAKtD,CAAC"}

package/dist/ui/Sidebar/SidebarHeader.js CHANGED Viewed

@@ -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/Sidebar/SidebarItem.d.ts CHANGED Viewed

@@ -1,7 +1,12 @@
 import React from 'react';
 import { AProps } from '../../core/A';
+import { CounterProps } from '../Counter';
 import { Leading } from '../Leading';
-export type SidebarItemNavigable = {
+type SidebarItemCompteur = {
+    counter?: number;
+    counterVariant?: CounterProps['variant'];
+};
+export type SidebarItemNavigable = SidebarItemCompteur & {
     pressable?: undefined;
     title: string;
     leading?: Leading;
@@ -9,7 +14,7 @@ export type SidebarItemNavigable = {
     direction?: AProps['direction'];
     routeName?: string;
 };
-export type SidebarItemPressable = {
+export type SidebarItemPressable = SidebarItemCompteur & {
     pressable: true;
     title: string;
     leading?: Leading;
@@ -17,4 +22,5 @@ export type SidebarItemPressable = {
 };
 export type SidebarItemProps = SidebarItemNavigable | SidebarItemPressable;
 export declare const SidebarItem: (props: SidebarItemProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=SidebarItem.d.ts.map

package/dist/ui/Sidebar/SidebarItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAGlD,MAAM,MAAM,oBAAoB,GAAG;~~IACjC~~,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;~~IACjC~~,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;~~AA+G3E~~,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}
1	+ {"version":3,"file":"SidebarItem.d.ts","sourceRoot":"","sources":["../../../src/ui/Sidebar/SidebarItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,OAAO,EAAe,MAAM,YAAY,CAAC;AAGlD,KAAK,mBAAmB,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAoI3E,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,sBAIlD,CAAC"}