@aurora-ds/components 0.10.0 → 0.15.0

package/README.md

@@ -47,15 +47,26 @@ function App() {
 | Component | Description |
 |-----------|-------------|
 | **Accordion** | Collapsible container to show/hide content |
-| **Button** | Button with variants (contained, outlined, text), icons, and states |
+| **Avatar** | User avatar display component with image or initials |
+| **AvatarGroup** | Group of avatars with overlapping display |
 | **Breadcrumb** | Navigation component for hierarchical page structures |
-| **IconButton** | Icon-only button component |
-| **Input** | Input field component with controlled value and change handler |
-| **Text** | Typography component with semantic HTML tags (h1-h6, p, span, label) |
-| **Stack** | Flexbox container for horizontal/vertical layouts |
+| **Button** | Button with variants (contained, outlined, text), icons, and states |
 | **Card** | Container with background, border radius, and shadow |
 | **Chip** | Compact element for tags, labels, or status indicators |
+| **DrawerItem** | Item in a drawer navigation |
+| **Form** | Form container component |
+| **Grid** | Grid layout component |
 | **Icon** | Icon wrapper component |
+| **IconButton** | Icon-only button component |
+| **Input** | Input field component with controlled value and change handler |
+| **Menu** | Dropdown menu component positioned absolutely |
+| **Page** | Page layout component |
+| **PageSection** | Section within a page |
+| **Separator** | Visual separator component |
+| **Stack** | Flexbox container for horizontal/vertical layouts |
+| **Tabs** | Tab navigation component with multiple sections, used with `TabItem` |
+| **Text** | Typography component with semantic HTML tags (h1-h6, p, span, label) |
+| **TextArea** | Multi-line text input component |
 
 ## License
 

package/dist/cjs/components/actions/button/Button.props.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from '@aurora-ds/theme';
-import { ReactNode } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 import { ButtonVariants, IconButtonSizes } from '@interfaces/button.types.ts';
 export type ButtonProps = {
     /** Button text label */
@@ -9,7 +9,7 @@ export type ButtonProps = {
     /** Optional icon to display after label */
     endIcon?: ReactNode;
     /** Click handler */
-    onClick?: () => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     /** Visual variant of the button */
     variant?: ButtonVariants;
     /** Button type attribute */

package/dist/cjs/components/actions/icon-button/IconButton.props.d.ts

@@ -1,11 +1,11 @@
 import { Theme } from '@aurora-ds/theme';
-import { ReactNode } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import { IconButtonSizes, IconButtonVariants } from '@/interfaces';
 export type IconButtonProps = {
     /** IconButton icon */
     icon?: ReactNode;
     /** Click handler */
-    onClick?: () => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     /** Visual variant of the button */
     variant?: IconButtonVariants;
     /** Button type attribute */

package/dist/cjs/components/data-display/avatar/Avatar.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AvatarProps } from '@components/data-display/avatar/Avatar.props.ts';
+/**
+ * Avatar component
+ *
+ * Displays a user's avatar with optional image or fallback text.
+ */
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;

package/dist/cjs/components/data-display/avatar/Avatar.props.d.ts

@@ -0,0 +1,25 @@
+import { MouseEvent } from 'react';
+import { AvatarSize } from '@interfaces/avatar.types.ts';
+export type AvatarProps = {
+    /** Image source URL */
+    image?: string;
+    /** Fallback text to display when no image */
+    label?: string;
+    /** Click handler */
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Size of the avatar */
+    size?: AvatarSize;
+    /** Text color for the label */
+    color?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Background color */
+    backgroundColor?: string;
+};
+export type AvatarStyleParams = {
+    hasImage?: boolean;
+    size?: AvatarSize;
+    color?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+};

package/dist/cjs/components/data-display/avatar/Avatar.styles.d.ts

@@ -0,0 +1,10 @@
+import { AvatarStyleParams } from '@components/data-display/avatar/Avatar.props.ts';
+/**
+ * Avatar styles using createStyles from @aurora-ds/theme
+ */
+export declare const AVATAR_STYLES: {
+    root: (args_0: AvatarStyleParams & {
+        clickable?: boolean;
+    }) => string;
+    image: string;
+};

package/dist/cjs/components/data-display/avatar/AvatarGroup.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AvatarGroupProps } from '@components/data-display/avatar/Avatar.props.ts';
+/**
+ * AvatarGroup component
+ *
+ * Groups multiple avatars with optional compact overlapping and limit.
+ */
+declare const AvatarGroup: FC<AvatarGroupProps>;
+export default AvatarGroup;

package/dist/cjs/components/data-display/avatar/avatar-group/AvatarGroup.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AvatarGroupProps } from '@/components';
+/**
+ * AvatarGroup component
+ *
+ * Groups multiple avatars with overlapping display and optional limit.
+ */
+declare const AvatarGroup: FC<AvatarGroupProps>;
+export default AvatarGroup;

package/dist/cjs/components/data-display/avatar/avatar-group/AvatarGroup.props.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { AvatarSize } from '@/interfaces';
+export type AvatarGroupProps = {
+    /** Avatar children */
+    children: ReactNode;
+    /** Maximum number of avatars to display */
+    limit?: number;
+    /** Size of the avatars in the group */
+    size?: AvatarSize;
+};

package/dist/cjs/components/data-display/avatar/avatar-group/AvatarGroup.styles.d.ts

@@ -0,0 +1,14 @@
+import { AvatarSize } from '@/interfaces';
+/**
+ * AvatarGroup styles using createStyles from @aurora-ds/theme
+ */
+export declare const AVATAR_GROUP_STYLES: {
+    root: string;
+    child: (args_0: {
+        size?: AvatarSize;
+    }) => string;
+    firstChild: string;
+    more: (args_0: {
+        size?: AvatarSize;
+    }) => string;
+};

package/dist/cjs/components/data-display/avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Avatar } from '@components/data-display/avatar/Avatar.tsx';
+export { default as AvatarGroup } from '@components/data-display/avatar/avatar-group/AvatarGroup.tsx';
+export type { AvatarProps } from '@components/data-display/avatar/Avatar.props.ts';
+export type { AvatarGroupProps } from '@components/data-display/avatar/avatar-group/AvatarGroup.props.ts';

package/dist/cjs/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from '@components/foundation/icon';
 export * from '@components/foundation/text';
 export * from '@components/data-display/chip';
+export * from '@components/data-display/avatar';
 export * from '@components/actions/button';
 export * from '@components/actions/icon-button';
 export * from '@components/forms/form';
@@ -9,11 +10,14 @@ export * from '@components/forms/textarea';
 export * from '@components/layout/stack';
 export * from '@components/layout/card';
 export * from '@components/layout/grid';
+export * from '@components/layout/separator';
 export * from '@components/layout/page-construction/page-section';
 export * from '@components/layout/page-construction/page';
 export * from '@components/overlay/accordion';
+export * from '@components/overlay/menu';
 export * from '@components/navigation/drawer-item';
 export * from '@components/navigation/breadcrumb';
+export * from '@components/navigation/tabs';
 export type { ButtonVariants, ButtonVariantStyle } from '@interfaces/button.types';
 export type { TextVariants, TextVariantStyle } from '@interfaces/text.types';
 export type { ChipVariant, ChipColor, ChipSize } from '@interfaces/chip.types';

package/dist/cjs/components/layout/separator/Separator.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { SeparatorProps } from '@components/layout/separator/Separator.props.ts';
+/**
+ * Separator component
+ *
+ * A simple separator line for horizontal or vertical division.
+ */
+declare const Separator: FC<SeparatorProps>;
+export default Separator;

package/dist/cjs/components/layout/separator/Separator.props.d.ts

@@ -0,0 +1,17 @@
+import { Theme } from '@aurora-ds/theme';
+export type SeparatorProps = {
+    /** Direction of the separator */
+    direction?: 'horizontal' | 'vertical';
+    /** Custom width (overrides default) */
+    width?: string | number;
+    /** Custom height (overrides default) */
+    height?: string | number;
+    /** Custom color (overrides default) */
+    color?: keyof Theme['colors'];
+};
+export type SeparatorStyleParams = {
+    direction?: 'horizontal' | 'vertical';
+    color?: keyof Theme['colors'];
+    width?: string | number;
+    height?: string | number;
+};

package/dist/cjs/components/layout/separator/Separator.styles.d.ts

@@ -0,0 +1,7 @@
+import { SeparatorStyleParams } from '@components/layout/separator/Separator.props.ts';
+/**
+ * Separator styles using createStyles from @aurora-ds/theme
+ */
+export declare const SEPARATOR_STYLES: {
+    root: (args_0: SeparatorStyleParams) => string;
+};

package/dist/cjs/components/layout/separator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Separator } from '@components/layout/separator/Separator.tsx';
+export type { SeparatorProps } from '@components/layout/separator/Separator.props.ts';

package/dist/cjs/components/navigation/tabs/Tabs.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TabsProps } from '@components/navigation/tabs/Tabs.props';
+/**
+ * Tabs component for navigation between multiple sections
+ */
+declare const Tabs: FC<TabsProps>;
+export default Tabs;

package/dist/cjs/components/navigation/tabs/Tabs.props.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type TabsProps = {
+    /** Children TabItem components */
+    children: ReactNode;
+    /** Currently active tab value or index */
+    activeTab?: string | number;
+    /** Width of the tabs container, default 100% */
+    width?: string;
+};
+export type TabsStyleParams = {
+    width?: string;
+};

package/dist/cjs/components/navigation/tabs/Tabs.styles.d.ts

@@ -0,0 +1,7 @@
+import { TabsStyleParams } from '@components/navigation/tabs/Tabs.props';
+/**
+ * Tabs styles using createStyles from @aurora-ds/theme
+ */
+export declare const TABS_STYLES: {
+    root: (args_0: TabsStyleParams) => string;
+};

package/dist/cjs/components/navigation/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from '@components/navigation/tabs/Tabs.tsx';
+export type { TabsProps } from '@components/navigation/tabs/Tabs.props.ts';
+export { default as TabItem } from '@components/navigation/tabs/tab-item/TabItem.tsx';
+export type { TabItemProps } from '@components/navigation/tabs/tab-item/TabItem.props.ts';

package/dist/cjs/components/navigation/tabs/tab-item/TabItem.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { TabItemProps } from '@components/navigation/tabs/tab-item/TabItem.props.ts';
+/**
+ * TabItem component for use inside Tabs
+ */
+declare const TabItem: FC<TabItemProps>;
+export default TabItem;

package/dist/cjs/components/navigation/tabs/tab-item/TabItem.props.d.ts

@@ -0,0 +1,10 @@
+export type TabItemProps = {
+    /** Label of the tab */
+    label: string;
+    /** Optional value associated with the tab */
+    value?: string | number;
+    /** Whether the tab is active */
+    isActive?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+};

package/dist/cjs/components/navigation/tabs/tab-item/TabItem.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tabs styles using createStyles from @aurora-ds/theme
+ */
+export declare const TAB_ITEM_STYLES: {
+    tab: (isActive: boolean) => string;
+};

package/dist/cjs/components/overlay/menu/Menu.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MenuProps } from '@components/overlay/menu/Menu.props';
+declare const Menu: FC<MenuProps>;
+export default Menu;

package/dist/cjs/components/overlay/menu/Menu.props.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { AnchorOrigin } from '@hooks/useAnchorPosition.types';
+export type MenuProps = {
+    anchor: HTMLElement | null;
+    onClose: () => void;
+    children: ReactNode;
+    anchorOrigin?: AnchorOrigin;
+    width?: string;
+};

package/dist/cjs/components/overlay/menu/Menu.styles.d.ts

@@ -0,0 +1,4 @@
+import { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
+export declare const MENU_STYLES: {
+    root: (isFadingIn: boolean, anchorOrigin: AnchorOrigin, position: AnchorPosition, width?: string | undefined) => string;
+};

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MenuGroupProps } from '@components/overlay/menu/MenuGroup/MenuGroup.props';
+declare const MenuGroup: FC<MenuGroupProps>;
+export default MenuGroup;

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.props.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export type MenuGroupProps = {
+    children: ReactNode;
+};

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const MENU_GROUP_STYLES: {
+    root: string;
+};

package/dist/cjs/components/overlay/menu/MenuGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuGroup } from './MenuGroup.tsx';
+export type { MenuGroupProps } from './MenuGroup.props';

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MenuItemProps } from '@components/overlay/menu/MenuItem/MenuItem.props';
+declare const MenuItem: FC<MenuItemProps>;
+export default MenuItem;

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.props.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type MenuItemProps = {
+    label: string;
+    icon?: ReactNode;
+    onClick: () => void;
+};

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const MENU_ITEM_STYLES: {
+    root: string;
+};

package/dist/cjs/components/overlay/menu/MenuItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MenuItem } from './MenuItem.tsx';
+export type { MenuItemProps } from './MenuItem.props';

package/dist/cjs/components/overlay/menu/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Menu } from './Menu';
+export type { MenuProps } from './Menu.props';
+export { MenuGroup } from './MenuGroup';
+export type { MenuGroupProps } from './MenuGroup/MenuGroup.props';
+export { MenuItem } from './MenuItem';
+export type { MenuItemProps } from './MenuItem/MenuItem.props';

package/dist/cjs/constants/globalConstants.d.ts

@@ -1,2 +1,3 @@
 export declare const BUTTON_SIZE = 36;
 export declare const DRAWER_ITEM_HEIGHT = 32;
+export declare const DEFAULT_TRANSITION_DURATION_MS = 150;

package/dist/cjs/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useAnchorPosition } from '@hooks/useAnchorPosition';
+export type { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
+export { useClickOutside } from '@hooks/useClickOutside';
+export { useTransitionRender } from '@hooks/useTransitionRender';
+export type { UseTransitionRenderReturnType } from '@hooks/useTransitionRender.types';

package/dist/cjs/hooks/useAnchorPosition.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
+type UseAnchorPositionParams = {
+    anchor: HTMLElement | null;
+    menuRef: RefObject<HTMLDivElement | null>;
+    anchorOrigin?: AnchorOrigin;
+    isVisible: boolean;
+};
+/**
+ * Hook pour calculer la position d'un élément par rapport à son ancre
+ * @param anchor - Élément HTML servant d'ancre
+ * @param menuRef - Référence vers l'élément à positionner
+ * @param anchorOrigin - Origine de l'ancrage ('left' ou 'right')
+ * @param isVisible - Si l'élément est visible (pour recalculer la position)
+ */
+export declare const useAnchorPosition: ({ anchor, menuRef, anchorOrigin, isVisible }: UseAnchorPositionParams) => AnchorPosition;
+export {};

package/dist/cjs/hooks/useAnchorPosition.types.d.ts

@@ -0,0 +1,5 @@
+export type AnchorPosition = {
+    top: number;
+    left: number;
+} | null;
+export type AnchorOrigin = 'left' | 'right';

package/dist/cjs/hooks/useClickOutside.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * Gestion d'un click en dehors d'un ou plusieurs éléments
+ * @param refs Tableau de références à écouter
+ * @param onClickOutside Callback si clic à l'extérieur
+ * @param shouldTrigger Activation du comportement
+ */
+export declare const useClickOutside: (refs: RefObject<HTMLElement | null>[], onClickOutside: () => void, shouldTrigger?: boolean) => void;

package/dist/cjs/hooks/useTransitionRender.d.ts

@@ -0,0 +1,7 @@
+import { UseTransitionRenderReturnType } from '@hooks/useTransitionRender.types';
+/**
+ * Hook pour gérer les animations de transition lors des renders
+ * @param isOpen - État d'ouverture
+ * @param duration - Durée de la transition en ms
+ */
+export declare const useTransitionRender: (isOpen: boolean, duration?: number) => UseTransitionRenderReturnType;

package/dist/cjs/hooks/useTransitionRender.types.d.ts

@@ -0,0 +1,4 @@
+export type UseTransitionRenderReturnType = {
+    isVisible: boolean;
+    isFadingIn: boolean;
+};

package/dist/cjs/index.d.ts

@@ -1,2 +1,3 @@
 export * from '@components/index';
+export * from '@hooks/index';
 import '@styles/globals.css';