@alveole/components 0.29.3 → 0.30.0

package/dist/stories/index.d.ts

@@ -8,6 +8,7 @@ export * as PdfViewerStory from '../core/PdfViewer/PdfViewer.stories';
 export * as SectionStory from '../core/Section/Section.stories';
 export * as TypographyStory from '../core/Typography/Typography.stories';
 export * as VersionStory from '../core/Version/Version.stories';
+export * as ActionMenuStory from '../ui/ActionMenu/ActionMenu.stories';
 export * as AvatarStory from '../ui/Avatar/Avatar.stories';
 export * as BadgeStory from '../ui/Badge/Badge.stories';
 export * as BreadcrumbsStory from '../ui/Breadcrumbs/Breadcrumbs.stories';
@@ -18,6 +19,7 @@ export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
 export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
 export * as PageHeaderStory from '../ui/PageHeader/PageHeader.stories';
+export * as PopoverStory from '../ui/Popover/Popover.stories';
 export * as ResourceListStory from '../ui/ResourceList/ResourceList.stories';
 export * as SidebarStory from '../ui/Sidebar/Sidebar.stories';
 export * as TabsStory from '../ui/Tabs/Tabs.stories';

package/dist/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,UAAU,MAAM,6BAA6B,CAAC;AAC1D,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,mCAAmC,CAAC;AACnE,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,KAAK,cAAc,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAChE,OAAO,KAAK,eAAe,MAAM,uCAAuC,CAAC;AACzE,OAAO,KAAK,YAAY,MAAM,iCAAiC,CAAC;AAGhE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,gBAAgB,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,WAAW,MAAM,6BAA6B,CAAC;AAC3D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,aAAa,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC;AACvE,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,iBAAiB,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,YAAY,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,SAAS,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,QAAQ,MAAM,uBAAuB,CAAC;AAClD,OAAO,KAAK,qBAAqB,MAAM,iDAAiD,CAAC;AACzF,OAAO,KAAK,eAAe,MAAM,qCAAqC,CAAC"}

package/dist/stories/index.js

@@ -10,6 +10,7 @@ export * as SectionStory from '../core/Section/Section.stories';
 export * as TypographyStory from '../core/Typography/Typography.stories';
 export * as VersionStory from '../core/Version/Version.stories';
 // UI
+export * as ActionMenuStory from '../ui/ActionMenu/ActionMenu.stories';
 export * as AvatarStory from '../ui/Avatar/Avatar.stories';
 export * as BadgeStory from '../ui/Badge/Badge.stories';
 export * as BreadcrumbsStory from '../ui/Breadcrumbs/Breadcrumbs.stories';
@@ -20,6 +21,7 @@ export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
 export * as ListItemStory from '../ui/ListItem/ListItem.stories';
 export * as LucideIconStory from '../ui/LucideIcon/LucideIcon.stories';
 export * as PageHeaderStory from '../ui/PageHeader/PageHeader.stories';
+export * as PopoverStory from '../ui/Popover/Popover.stories';
 export * as ResourceListStory from '../ui/ResourceList/ResourceList.stories';
 export * as SidebarStory from '../ui/Sidebar/Sidebar.stories';
 export * as TabsStory from '../ui/Tabs/Tabs.stories';

package/dist/ui/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,10 @@
+import { BoxProps, PopoverProps } from '@alveole/components';
+import { ActionMenuItem } from './ActionMenuItem';
+export type { ActionMenuItemProps } from './ActionMenuItem';
+export type ActionMenuProps = BoxProps & PopoverProps;
+declare const ActionMenuBase: (props: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
+type ActionMenuCompoundComponent = typeof ActionMenuBase & {
+    Item: typeof ActionMenuItem;
+};
+export declare const ActionMenu: ActionMenuCompoundComponent;
+//# sourceMappingURL=ActionMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAW,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEtD,QAAA,MAAM,cAAc,GAAI,OAAO,eAAe,4CAU7C,CAAC;AAEF,KAAK,2BAA2B,GAAG,OAAO,cAAc,GAAG;IACzD,IAAI,EAAE,OAAO,cAAc,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,2BAEvB,CAAC"}

package/dist/ui/ActionMenu/ActionMenu.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from '@alveole/components';
+import { Box } from '../../core';
+import { ActionMenuItem } from './ActionMenuItem';
+const ActionMenuBase = (props) => {
+    const { children, placement = 'bottom', renderTrigger, ...boxProps } = props;
+    return (_jsx(Popover, { placement: placement, renderTrigger: renderTrigger, children: _jsx(Box, { tag: "action-menu-content", ...boxProps, children: children }) }));
+};
+export const ActionMenu = Object.assign(ActionMenuBase, {
+    Item: ActionMenuItem,
+});

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

@@ -0,0 +1,14 @@
+declare const _default: {
+    title: string;
+    tags: "Components"[];
+    experimental: false;
+    figmaURL: string;
+    description: string;
+    component: ((props: import("./ActionMenu").ActionMenuProps) => import("react/jsx-runtime").JSX.Element) & {
+        Item: typeof import("./ActionMenuItem").ActionMenuItem;
+    };
+    styleFn: () => string;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActionMenu.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenu.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAKA,wBAQkB;AAElB,eAAO,MAAM,OAAO,+CAuCnB,CAAC"}

package/dist/ui/ActionMenu/ActionMenu.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core';
+import { Button } from '../Button';
+import { ActionMenu } from './ActionMenu';
+export default {
+    title: 'ActionMenu',
+    tags: ['Components'],
+    experimental: false,
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Composants?node-id=1002-547',
+    description: 'Composant de type Box.',
+    component: ActionMenu,
+    styleFn: () => '',
+};
+export const Default = () => {
+    const alignments = [
+        'top',
+        'right',
+        'bottom',
+        'left',
+        'top-start',
+        'top-end',
+        'right-start',
+        'right-end',
+        'bottom-start',
+        'bottom-end',
+        'left-start',
+        'left-end',
+    ];
+    return (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: "1W", flexDirection: "row", "justify-content": "center", "align-items": "center", width: "100%", children: alignments.map(alignment => (_jsxs(ActionMenu, { placement: alignment, renderTrigger: () => _jsx(Button, { variant: "secondary", title: alignment }), children: [_jsx(ActionMenu.Item, { title: "Contenu de l'action menu", icon: "Settings", selected: true }), _jsx(ActionMenu.Item, { title: "Contenu de l'action menu", icon: "Copy" }), _jsx(ActionMenu.Item, { title: "Contenu de l'action menu", icon: "Trash" })] }, alignment))) }));
+};

package/dist/ui/ActionMenu/ActionMenuItem.d.ts

@@ -0,0 +1,10 @@
+import { BoxProps } from '../../core';
+import { LucideIconProps } from '../LucideIcon';
+export type ActionMenuItemProps = Omit<BoxProps, 'children'> & {
+    title: string;
+    icon?: LucideIconProps['name'];
+    onPress?: () => void;
+    selected?: boolean;
+};
+export declare const ActionMenuItem: (props: ActionMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ActionMenuItem.d.ts.map

package/dist/ui/ActionMenu/ActionMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionMenuItem.d.ts","sourceRoot":"","sources":["../../../src/ui/ActionMenu/ActionMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CAmCxD,CAAC"}

package/dist/ui/ActionMenu/ActionMenuItem.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
+import { LucideIcon } from '../LucideIcon';
+import { useStyles } from '../Sidebar/Sidebar.styles';
+import { useStyles as useActionMenuItemStyles } from './ActionMenuItem.styles';
+export const ActionMenuItem = (props) => {
+    const { title, icon, onPress, selected = false, style, ...boxProps } = props;
+    const styles = useStyles();
+    const actionMenuItemStyles = useActionMenuItemStyles();
+    const itemStyleSelected = selected ? styles.sidebarItemSelectedDesktop : {};
+    const titleStyleSelected = selected ? styles.sidebarItemTitleSelectedDesktop : {};
+    const sidebarItemHover = selected ? styles.sidebarItemCurrentHover : styles.sidebarItemHover;
+    const sidebarItemTitleDesktop = selected ? styles.sidebarItemTitleCurrentHoverDesktop : {};
+    return (_jsx(Box, { tag: "action-menu-item", onPress: onPress, style: style, ...boxProps, children: _jsxs(Box, { style: { ...styles.sidebarItemContainerDesktop, ...actionMenuItemStyles.actionMenuItemContainerDesktop }, children: [selected && (_jsx(Box, { tag: "sidebar-item-indicator", style: styles.sidebarItemSelectedIndicator, children: _jsx(Box, { style: styles.sidebarItemSelectedIndicatorContent }) })), _jsxs(Box, { tag: "sidebar-item", style: { ...styles.sidebarItemDesktop, ...itemStyleSelected }, hoverStyle: { ...sidebarItemHover }, children: [icon && _jsx(LucideIcon, { size: "md", name: icon }), _jsx(Typography, { style: { ...styles.sidebarItemTitleDesktop, ...titleStyleSelected }, hoverStyle: { ...sidebarItemTitleDesktop }, children: title })] })] }) }));
+};

package/dist/ui/ActionMenu/ActionMenuItem.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: () => {
+    actionMenuItemContainerDesktop: {
+        margin: number;
+    };
+};
+//# sourceMappingURL=ActionMenuItem.styles.d.ts.map

package/dist/ui/ActionMenu/ActionMenuItem.styles.d.ts.map

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

package/dist/ui/ActionMenu/ActionMenuItem.styles.js

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

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

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

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

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

package/dist/ui/ActionMenu/index.js

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

package/dist/ui/Button/Button.d.ts

@@ -8,6 +8,7 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
     variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link';
     startIcon?: IconProps['name'];
     endIcon?: IconProps['name'];
+    selected?: boolean;
     ContainerProps?: BoxProps;
     fullWidth?: boolean;
     noPadding?: boolean;
@@ -22,6 +23,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<PressableProps
     variant: "primary" | "secondary" | "tertiary" | "danger" | "link";
     startIcon?: IconProps["name"];
     endIcon?: IconProps["name"];
+    selected?: boolean;
     ContainerProps?: BoxProps;
     fullWidth?: boolean;
     noPadding?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0C,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AACxH,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClE,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAdV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM;gBACrD,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;qBACV,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;8BAkMnB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAA0C,cAAc,EAA8B,IAAI,EAAE,MAAM,cAAc,CAAC;AACxH,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,SAAS,EAAc,MAAM,eAAe,CAAC;AAOtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClE,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,MAAM;WAfV,MAAM;WACN,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;aACvB,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM;gBACrD,SAAS,CAAC,MAAM,CAAC;cACnB,SAAS,CAAC,MAAM,CAAC;eAChB,OAAO;qBACD,QAAQ;gBACb,OAAO;gBACP,OAAO;iBACN,OAAO;gBACR,OAAO;WACZ,QAAQ,GAAG,QAAQ;gBACd,OAAO;8BA0MnB,CAAC"}

package/dist/ui/Button/Button.js

@@ -5,7 +5,7 @@ import { Box, Typography } from '../../core';
 import { LucideIcon } from '../LucideIcon';
 import { useStyles } from './Button.styles';
 export const Button = React.forwardRef(function Button(props, ref) {
-    const { title, type, size, variant, disabled, startIcon, endIcon, noPadding, borderNone, leftAlign, isLoading, fullWidth = false, ContainerProps = {}, ...buttonProps } = props;
+    const { title, type, size, variant, disabled, startIcon, endIcon, noPadding, borderNone, leftAlign, isLoading, selected, fullWidth = false, ContainerProps = {}, ...buttonProps } = props;
     const { style, hoverStyle, ...containerProps } = ContainerProps;
     const styles = useStyles();
     const containerSize = size === 'sm'
@@ -35,7 +35,10 @@ export const Button = React.forwardRef(function Button(props, ref) {
                         : styles.mdContainerEndIcon
                 : {}),
         };
-        if (variant === 'primary') {
+        if (selected) {
+            applicableStyles = { ...applicableStyles, ...styles.selectedContainer };
+        }
+        else if (variant === 'primary') {
             applicableStyles = { ...applicableStyles, ...styles.primaryContainer };
             if (disabled)
                 applicableStyles = { ...applicableStyles, ...styles.primaryContainerDisabled };
@@ -82,7 +85,9 @@ export const Button = React.forwardRef(function Button(props, ref) {
     const buttonContainerHoverStyle = () => {
         if (disabled)
             return {};
-        if (variant === 'primary')
+        if (selected)
+            return styles.selectedContainerHover;
+        else if (variant === 'primary')
             return styles.primaryContainerHover;
         else if (variant === 'secondary')
             return styles.secondaryContainerHover;
@@ -95,7 +100,10 @@ export const Button = React.forwardRef(function Button(props, ref) {
     };
     const textStyle = (state) => {
         let applicableStyles = styles.title;
-        if (variant === 'primary') {
+        if (selected) {
+            applicableStyles = { ...applicableStyles, ...styles.selectedTitle };
+        }
+        else if (variant === 'primary') {
             applicableStyles = { ...applicableStyles, ...styles.primaryTitle };
             if (disabled)
                 applicableStyles = { ...applicableStyles, ...styles.primaryTitleDisabled };
@@ -136,7 +144,10 @@ export const Button = React.forwardRef(function Button(props, ref) {
     };
     const iconStyle = (state) => {
         const iconSize = size === 'lg' ? 'md' : 'sm';
-        if (variant === 'primary') {
+        if (selected) {
+            return { size: iconSize, color: styles.selectedIcon.color };
+        }
+        else if (variant === 'primary') {
             if (disabled)
                 return { size: iconSize, color: styles.primaryIconDisabled.color };
             else if (state.hovered)

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

@@ -10,6 +10,7 @@ declare const _default: {
         variant: "primary" | "secondary" | "tertiary" | "danger" | "link";
         startIcon?: import("..").IconProps["name"];
         endIcon?: import("..").IconProps["name"];
+        selected?: boolean;
         ContainerProps?: import("../..").BoxProps;
         fullWidth?: boolean;
         noPadding?: boolean;
@@ -129,6 +130,18 @@ declare const _default: {
         linkContainerPressed: {
             backgroundColor: "transparent";
         };
+        selectedContainer: {
+            backgroundColor: "#F2F9FF";
+            borderColor: "#0264C7";
+            borderWidth: number;
+        };
+        selectedContainerHover: {};
+        selectedTitle: {
+            color: "#012B53";
+        };
+        selectedIcon: {
+            color: "#012B53";
+        };
         xsContainer: {
             paddingLeft: import("@alveole/theme").Spacing;
             paddingRight: import("@alveole/theme").Spacing;
@@ -294,4 +307,5 @@ export declare const Danger: () => import("react/jsx-runtime").JSX.Element;
 export declare const Link: () => import("react/jsx-runtime").JSX.Element;
 export declare const Icons: () => import("react/jsx-runtime").JSX.Element;
 export declare const FullWidth: () => import("react/jsx-runtime").JSX.Element;
+export declare const Selected: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,MAAM,+CAKlB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAKhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAIrB,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/Button.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAQkB;AAElB,eAAO,MAAM,KAAK,+CAMjB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAKnB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAKpB,CAAC;AAEF,eAAO,MAAM,MAAM,+CAKlB,CAAC;AAEF,eAAO,MAAM,IAAI,+CAQhB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAQjB,CAAC;AAEF,eAAO,MAAM,SAAS,+CAAkE,CAAC;AAEzF,eAAO,MAAM,QAAQ,+CAIpB,CAAC"}

package/dist/ui/Button/Button.stories.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '../../core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Typography } from '../../core';
 import { Button } from './Button';
 import { useStyles } from './Button.styles';
 import { ButtonIcon } from './ButtonIcon';
@@ -17,6 +17,7 @@ export const Primary = () => (_jsxs(Box, { display: "flex", flexDirection: "row"
 export const Secondary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "secondary", title: "Bouton secondary" }), _jsx(Button, { variant: "secondary", title: "Disabled", disabled: true })] }));
 export const Tertiary = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "tertiary", title: "Bouton tertiary" }), _jsx(Button, { variant: "tertiary", title: "Disabled", disabled: true })] }));
 export const Danger = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "danger", title: "Bouton danger" }), _jsx(Button, { variant: "danger", title: "Disabled", disabled: true })] }));
-export const Link = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "link", title: "Bouton link" }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true })] }));
+export const Link = () => (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "Deprecated" }), _jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "link", title: "Bouton link" }), _jsx(Button, { variant: "link", title: "Disabled", disabled: true })] })] }));
 export const Icons = () => (_jsxs(Box, { display: "flex", flexDirection: "row", gap: 4, children: [_jsx(Button, { variant: "primary", title: "Start Icon", startIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(Button, { variant: "primary", title: "End Icon", endIcon: "Plus" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" }), _jsx(ButtonIcon, { variant: "primary", icon: "CircleUser" })] }));
-export const FullWidth = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 6, children: _jsx(Button, { variant: "primary", title: "Full Width", fullWidth: true }) }));
+export const FullWidth = () => _jsx(Button, { variant: "primary", title: "Full Width", fullWidth: true });
+export const Selected = () => (_jsx(Box, { display: "flex", flexDirection: "row", gap: 4, children: _jsx(Button, { variant: "secondary", title: "Selected", selected: true }) }));

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

@@ -109,6 +109,18 @@ export declare const useStyles: () => {
     linkContainerPressed: {
         backgroundColor: "transparent";
     };
+    selectedContainer: {
+        backgroundColor: "#F2F9FF";
+        borderColor: "#0264C7";
+        borderWidth: number;
+    };
+    selectedContainerHover: {};
+    selectedTitle: {
+        color: "#012B53";
+    };
+    selectedIcon: {
+        color: "#012B53";
+    };
     xsContainer: {
         paddingLeft: import("@alveole/theme").Spacing;
         paddingRight: import("@alveole/theme").Spacing;

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

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

package/dist/ui/Button/Button.styles.js

@@ -111,6 +111,18 @@ export const useStyles = makeStyles(({ text, color, spacing, radius }) => ({
     linkContainerPressed: {
         backgroundColor: color.background.button.tertiary.default,
     },
+    selectedContainer: {
+        backgroundColor: color.light.background['alt-primary'],
+        borderColor: color.light.border['default-primary'],
+        borderWidth: 1,
+    },
+    selectedContainerHover: {},
+    selectedTitle: {
+        color: color.light.text['action-high-primary'],
+    },
+    selectedIcon: {
+        color: color.light.text['action-high-primary'],
+    },
     // Sizes
     xsContainer: {
         paddingLeft: spacing('075'),

package/dist/ui/Card/CardHeader.js

@@ -5,5 +5,5 @@ export const CardHeader = (props) => {
     const { variant = 'default', titre, sousTitre, image, badge, style, children, ...boxProps } = props;
     const styles = useStyles();
     const disabledTextStyle = variant === 'disabled' ? styles.disabledText : {};
-    return (_jsxs(Box, { tag: "card-header", style: [styles.cardHeader, disabledTextStyle, style], ...boxProps, children: [image, _jsxs(Box, { tag: "card-header-texte", style: styles.texte, children: [_jsx(Typography, { style: [styles.titre, disabledTextStyle], children: titre }), _jsx(Typography, { style: [styles.sousTitre, disabledTextStyle], children: sousTitre })] }), badge] }));
+    return (_jsxs(Box, { tag: "card-header", style: [styles.cardHeader, disabledTextStyle, style], ...boxProps, children: [image, _jsxs(Box, { tag: "card-header-texte", style: styles.texte, children: [_jsx(Typography, { style: [styles.titre, disabledTextStyle], children: titre }), sousTitre && _jsx(Typography, { style: [styles.sousTitre, disabledTextStyle], children: sousTitre })] }), badge] }));
 };

package/dist/ui/LucideIcon/LucideIcon.props.d.ts

@@ -8,10 +8,10 @@ export type IconName = LucideIconName | LabIconName;
 export declare const isLucideIconName: (name: string) => name is LucideIconName;
 declare const PublicPropsSchema: z.ZodObject<{
     size: z.ZodEnum<{
+        xs: "xs";
         sm: "sm";
         md: "md";
         lg: "lg";
-        xs: "xs";
         xl: "xl";
     }>;
     name: z.ZodEnum<{
@@ -20,7 +20,6 @@ declare const PublicPropsSchema: z.ZodObject<{
         olive: "olive";
         Menu: "Menu";
         toolbox: "toolbox";
-        Image: "Image";
         AArrowDown: "AArrowDown";
         AArrowUp: "AArrowUp";
         ALargeSmall: "ALargeSmall";
@@ -835,6 +834,7 @@ declare const PublicPropsSchema: z.ZodObject<{
         IceCreamCone: "IceCreamCone";
         IdCard: "IdCard";
         IdCardLanyard: "IdCardLanyard";
+        Image: "Image";
         ImageDown: "ImageDown";
         ImageMinus: "ImageMinus";
         ImageOff: "ImageOff";
@@ -2106,10 +2106,10 @@ type PrivateProps = {
 export type LucideIconProps = z.infer<typeof PublicPropsSchema> & PrivateProps;
 export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.ZodObject<{
     size: z.ZodEnum<{
+        xs: "xs";
         sm: "sm";
         md: "md";
         lg: "lg";
-        xs: "xs";
         xl: "xl";
     }>;
     name: z.ZodEnum<{
@@ -2118,7 +2118,6 @@ export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.
         olive: "olive";
         Menu: "Menu";
         toolbox: "toolbox";
-        Image: "Image";
         AArrowDown: "AArrowDown";
         AArrowUp: "AArrowUp";
         ALargeSmall: "ALargeSmall";
@@ -2933,6 +2932,7 @@ export declare const LucideIconPropsJSON: z.core.ZodStandardJSONSchemaPayload<z.
         IceCreamCone: "IceCreamCone";
         IdCard: "IdCard";
         IdCardLanyard: "IdCardLanyard";
+        Image: "Image";
         ImageDown: "ImageDown";
         ImageMinus: "ImageMinus";
         ImageOff: "ImageOff";

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

@@ -6,10 +6,10 @@ declare const _default: {
     description: string;
     props: import("zod/v4/core").ZodStandardJSONSchemaPayload<import("zod").ZodObject<{
         size: import("zod").ZodEnum<{
+            xs: "xs";
             sm: "sm";
             md: "md";
             lg: "lg";
-            xs: "xs";
             xl: "xl";
         }>;
         name: import("zod").ZodEnum<{
@@ -18,7 +18,6 @@ declare const _default: {
             olive: "olive";
             Menu: "Menu";
             toolbox: "toolbox";
-            Image: "Image";
             AArrowDown: "AArrowDown";
             AArrowUp: "AArrowUp";
             ALargeSmall: "ALargeSmall";
@@ -833,6 +832,7 @@ declare const _default: {
             IceCreamCone: "IceCreamCone";
             IdCard: "IdCard";
             IdCardLanyard: "IdCardLanyard";
+            Image: "Image";
             ImageDown: "ImageDown";
             ImageMinus: "ImageMinus";
             ImageOff: "ImageOff";

package/dist/ui/Popover/Popover.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PopoverProps as TamaguiPopoverProps } from 'tamagui';
+export type PopoverStyles = {
+    maxW?: number;
+    maxH?: number;
+};
+export type PopoverProps = PopoverStyles & React.PropsWithChildren<{
+    placement: TamaguiPopoverProps['placement'];
+    renderTrigger: (context: {
+        open: boolean;
+    }) => React.ReactNode;
+}>;
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/ui/Popover/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAyC,YAAY,IAAI,mBAAmB,EAAU,MAAM,SAAS,CAAC;AAG7G,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7D,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,KAAK,CAAC,iBAAiB,CAAC;IACtB,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC5C,aAAa,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CAChE,CAAC,CAAC;AAEL,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,4CAqC1C,CAAC"}

package/dist/ui/Popover/Popover.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '@alveole/theme';
+import React from 'react';
+import { ScrollView, Popover as TamaguiPopover, YStack } from 'tamagui';
+import { useStyles } from './Popover.styles';
+export const Popover = (props) => {
+    const { children, placement, renderTrigger, ...popoverStyles } = props;
+    const [open, setOpen] = React.useState(false);
+    const styles = useStyles();
+    const { spacing } = useTheme();
+    const spacings = {
+        p: 0,
+        mr: placement?.includes('left') ? spacing('025') : undefined,
+        mb: placement?.includes('top') ? spacing('025') : undefined,
+        ml: placement?.includes('right') ? spacing('025') : undefined,
+        mt: placement?.includes('bottom') ? spacing('025') : undefined,
+    };
+    const maxH = popoverStyles.maxH ?? 500;
+    const maxW = popoverStyles.maxW ?? '100%';
+    return (_jsxs(TamaguiPopover, { placement: placement, disableFocus: true, open: open, onOpenChange: setOpen, children: [_jsx(TamaguiPopover.Trigger, { asChild: true, children: renderTrigger({ open }) }), _jsx(TamaguiPopover.Content, { trapFocus: false, disableFocusScope: true, overflow: "hidden", style: { maxHeight: maxH, maxWidth: maxW }, ...spacings, ...styles.content, children: _jsx(YStack, { style: { maxHeight: maxH, overflow: 'hidden' }, children: _jsx(ScrollView, { style: { maxHeight: maxH - spacing('025') }, children: children }) }) })] }));
+};

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

@@ -0,0 +1,53 @@
+declare const _default: {
+    title: string;
+    tags: "Kit"[];
+    experimental: false;
+    description: string;
+    figmaURL: string;
+    component: (props: import("@alveole/components").PopoverProps) => import("react/jsx-runtime").JSX.Element;
+    styleFn: () => {
+        content: {
+            display: "flex";
+            padding: import("@alveole/theme").Spacing;
+            flexDirection: "column";
+            alignItems: "flex-start";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderWidth: number;
+            borderStyle: "solid";
+            borderColor: "#DEE3EC";
+            backgroundColor: "#FFFFFF";
+        } | {
+            shadowColor: import("@alveole/theme").Color;
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            shadowOpacity: number;
+            shadowRadius: number;
+            elevation: number;
+            display: "flex";
+            padding: import("@alveole/theme").Spacing;
+            flexDirection: "column";
+            alignItems: "flex-start";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderWidth: number;
+            borderStyle: "solid";
+            borderColor: "#DEE3EC";
+            backgroundColor: "#FFFFFF";
+        } | {
+            boxShadow: string;
+            display: "flex";
+            padding: import("@alveole/theme").Spacing;
+            flexDirection: "column";
+            alignItems: "flex-start";
+            borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+            borderWidth: number;
+            borderStyle: "solid";
+            borderColor: "#DEE3EC";
+            backgroundColor: "#FFFFFF";
+        };
+    };
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Popover.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/Popover/Popover.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBASkB;AAElB,eAAO,MAAM,OAAO,+CA2BnB,CAAA"}

package/dist/ui/Popover/Popover.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Button, Typography } from '@alveole/components';
+import { Popover } from './Popover';
+import { useStyles } from './Popover.styles';
+export default {
+    title: 'Popover',
+    tags: ['Kit'],
+    experimental: false,
+    description: 'Zone cliquable avec ouverture d’un Popover (Tamagui Popover).',
+    figmaURL: 'https://www.figma.com/design/xJz8Z6vfrnZPKTtRbuT2W8/Alveole---Composants?node-id=2881-442&t=A0jkRqZdoWBKbIWd-4',
+    component: Popover,
+    styleFn: useStyles,
+};
+export const Default = () => {
+    const alignments = [
+        'top',
+        'right',
+        'bottom',
+        'left',
+        'top-start',
+        'top-end',
+        'right-start',
+        'right-end',
+        'bottom-start',
+        'bottom-end',
+        'left-start',
+        'left-end'
+    ];
+    return (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: "1W", flexDirection: "row", "justify-content": "center", "align-items": "center", width: "100%", children: alignments.map((alignment) => (_jsx(Popover, { placement: alignment, renderTrigger: () => _jsx(Button, { variant: "secondary", title: alignment }), children: _jsx(Typography, { children: "Contenu du popover" }) }, alignment))) }));
+};

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

@@ -0,0 +1,43 @@
+export declare const useStyles: () => {
+    content: {
+        display: "flex";
+        padding: import("@alveole/theme").Spacing;
+        flexDirection: "column";
+        alignItems: "flex-start";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: "#DEE3EC";
+        backgroundColor: "#FFFFFF";
+    } | {
+        shadowColor: import("@alveole/theme").Color;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        display: "flex";
+        padding: import("@alveole/theme").Spacing;
+        flexDirection: "column";
+        alignItems: "flex-start";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: "#DEE3EC";
+        backgroundColor: "#FFFFFF";
+    } | {
+        boxShadow: string;
+        display: "flex";
+        padding: import("@alveole/theme").Spacing;
+        flexDirection: "column";
+        alignItems: "flex-start";
+        borderRadius: import("@alveole/theme/dist/constants/Radius").Radius;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: "#DEE3EC";
+        backgroundColor: "#FFFFFF";
+    };
+};
+//# sourceMappingURL=Popover.styles.d.ts.map

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

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

package/dist/ui/Popover/Popover.styles.js

@@ -0,0 +1,15 @@
+import { makeStyles } from '@alveole/theme';
+export const useStyles = makeStyles(({ color, spacing, shadows, radius }) => ({
+    content: {
+        display: 'flex',
+        padding: spacing('1W'),
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        borderRadius: radius('lg'),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: color.light.border['default-grey'],
+        backgroundColor: color.light.background['active-inverted'],
+        ...shadows(2),
+    },
+}));

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

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

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

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

package/dist/ui/Popover/index.js

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

package/dist/ui/index.d.ts

@@ -1,3 +1,4 @@
+export * from './ActionMenu';
 export * from './Avatar';
 export * from './Badge';
 export * from './Breadcrumbs';
@@ -8,6 +9,7 @@ export * from './EmptyState';
 export * from './ListItem';
 export * from './LucideIcon';
 export * from './PageHeader';
+export * from './Popover';
 export * from './ResourceList';
 export * from './Sidebar';
 export * from './Tabs';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/dist/ui/index.js

@@ -1,3 +1,4 @@
+export * from './ActionMenu';
 export * from './Avatar';
 export * from './Badge';
 export * from './Breadcrumbs';
@@ -8,6 +9,7 @@ export * from './EmptyState';
 export * from './ListItem';
 export * from './LucideIcon';
 export * from './PageHeader';
+export * from './Popover';
 export * from './ResourceList';
 export * from './Sidebar';
 export * from './Tabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/components",
-  "version": "0.29.3",
+  "version": "0.30.0",
   "description": "Shared UI components.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",