@gouvfr-lasuite/ui-kit 0.18.7 → 0.19.0

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import { JSX } from 'react/jsx-runtime';
 import { Key } from 'react-stately';
 import { LabelHTMLAttributes } from 'react';
 import { MemoExoticComponent } from 'react';
+import { ModalSize } from '@gouvfr-lasuite/cunningham-react';
 import { NodeApi } from 'react-arborist';
 import { NodeRendererProps } from 'react-arborist';
 import { Option as Option_2 } from '@gouvfr-lasuite/cunningham-react';
@@ -502,6 +503,49 @@ export declare type BaseTreeViewData<T> = {
 
 export declare const containerSizeMap: Record<IconSize, number>;
 
+export declare const ContextMenu: <T>({ children, options, context, disabled, asChild, onFocus, onBlur, }: ContextMenuProps<T>) => JSX.Element;
+
+declare type ContextMenuContextValue = {
+    open: (config: {
+        position: {
+            x: number;
+            y: number;
+        };
+        items: MenuItem[];
+        onBlur?: () => void;
+    }) => void;
+    close: () => void;
+};
+
+/**
+ * @deprecated Use MenuItem instead
+ */
+export declare type ContextMenuItem = MenuItem;
+
+/**
+ * @deprecated Use MenuItemAction instead
+ */
+export declare type ContextMenuItemAction = MenuItemAction;
+
+/**
+ * @deprecated Use MenuItemSeparator instead
+ */
+export declare type ContextMenuItemSeparator = MenuItemSeparator;
+
+export declare type ContextMenuProps<T = unknown> = {
+    children: ReactNode;
+    options: MenuItem[] | ((context: T) => MenuItem[]);
+    context?: T;
+    disabled?: boolean;
+    asChild?: boolean;
+    /** Called when the menu opens on this trigger */
+    onFocus?: () => void;
+    /** Called when the menu closes (if it was open on this trigger) */
+    onBlur?: () => void;
+};
+
+export declare const ContextMenuProvider: ({ children }: PropsWithChildren) => JSX.Element;
+
 export declare const cunninghamConfig: {
     themes: {
         default: any;
@@ -520,21 +564,25 @@ export declare type CustomTranslations = Partial<Record<TranslationKey, string>>
 
 export declare const DropdownMenu: ({ options, isOpen, onOpenChange, children, selectedValues, onSelectValue, topMessage, shouldCloseOnInteractOutside, }: PropsWithChildren<DropdownMenuProps>) => JSX.Element;
 
-export declare type DropdownMenuOption = {
-    label: string;
-    subText?: string;
-    icon?: ReactNode;
-    callback?: () => void | Promise<unknown>;
-    isDisabled?: boolean;
-    showSeparator?: boolean;
-    isHidden?: boolean;
+/**
+ * Union type for DropdownMenu items (supports separators)
+ */
+export declare type DropdownMenuItem = DropdownMenuOption | MenuItemSeparator;
+
+/**
+ * DropdownMenu option extending the shared MenuItemAction
+ * Adds selection-specific props: isChecked, value
+ * @deprecated showSeparator - use MenuItemSeparator instead
+ */
+export declare type DropdownMenuOption = MenuItemAction & {
     isChecked?: boolean;
-    testId?: string;
     value?: string;
+    /** @deprecated Use MenuItem with { type: "separator" } instead */
+    showSeparator?: boolean;
 };
 
 export declare type DropdownMenuProps = {
-    options: DropdownMenuOption[];
+    options: DropdownMenuItem[];
     onOpenChange?: (isOpen: boolean) => void;
     selectedValues?: string[];
     onSelectValue?: (value: string) => void;
@@ -979,6 +1027,12 @@ export declare const getContainerSize: (iconSize: IconSize) => number;
 
 export declare const getIconSize: (iconSize: IconSize) => number;
 
+/**
+ * Returns the appropriate icon for the step based on active state.
+ * Extracted to avoid duplication between desktop and mobile views.
+ */
+export declare const getStepIcon: (step: OnboardingStep, isActive: boolean) => ReactNode;
+
 export declare const getUIKitThemesFromGlobals: (globals: Parameters<typeof getThemesFromGlobals>[0], options?: Parameters<typeof getThemesFromGlobals>[1]) => Record<string, any>;
 
 /**
@@ -1312,6 +1366,15 @@ export declare const locales: {
                     alt: string;
                 };
             };
+            onboarding: {
+                skip: string;
+                next: string;
+                previous: string;
+                complete: string;
+                stepLabel: string;
+                currentStepSuffix: string;
+                contentRegionLabel: string;
+            };
         };
     };
     "fr-FR": {
@@ -1482,6 +1545,15 @@ export declare const locales: {
                     alt: string;
                 };
             };
+            onboarding: {
+                skip: string;
+                next: string;
+                previous: string;
+                complete: string;
+                stepLabel: string;
+                currentStepSuffix: string;
+                contentRegionLabel: string;
+            };
         };
     };
 };
@@ -1502,8 +1574,105 @@ export declare type MainLayoutProps = {
     setIsLeftPanelOpen?: (isLeftPanelOpen: boolean) => void;
 };
 
+/**
+ * Union type for all menu items
+ */
+export declare type MenuItem = MenuItemAction | MenuItemSeparator;
+
+/**
+ * Base action item for menus (shared between ContextMenu and DropdownMenu)
+ */
+export declare type MenuItemAction = {
+    id?: string;
+    label: string;
+    subText?: string;
+    icon?: ReactNode;
+    callback?: () => void | Promise<unknown>;
+    isDisabled?: boolean;
+    isHidden?: boolean;
+    variant?: "default" | "danger";
+    testId?: string;
+};
+
+/**
+ * Separator item for menus
+ */
+export declare type MenuItemSeparator = {
+    type: "separator";
+};
+
+export { ModalSize }
+
 export { NodeRendererProps }
 
+export declare const OnboardingModal: ({ isOpen, size, appName, mainTitle, steps, initialStep, footerLink, onSkip, onComplete, onClose, labels, }: OnboardingModalProps) => JSX.Element | null;
+
+export declare interface OnboardingModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Size of the modal on desktop (default: ModalSize.LARGE). On mobile, always ModalSize.FULL */
+    size?: ModalSize;
+    /** Name of the application or module (e.g., "Discover Docs", "Welcome to Messaging") */
+    appName?: string;
+    /** Main heading of the onboarding modal (e.g., "Learn the core principles") */
+    mainTitle: string;
+    /** Array of onboarding steps */
+    steps: OnboardingStep[];
+    /** Initial step index (default: 0) */
+    initialStep?: number;
+    /** Optional footer link - requires either href or onClick */
+    footerLink?: {
+        label: string;
+    } & ({
+        href: string;
+        onClick?: () => void;
+    } | {
+        onClick: () => void;
+        href?: string;
+    });
+    /** Callback when user clicks Skip */
+    onSkip?: () => void;
+    /** Callback when user clicks Understood (last step) */
+    onComplete: () => void;
+    /** Callback when user clicks the close button */
+    onClose: () => void;
+    /** Custom labels for i18n */
+    labels?: {
+        skip?: string;
+        next?: string;
+        previous?: string;
+        complete?: string;
+    };
+}
+
+export declare interface OnboardingStep {
+    /** Icon displayed next to the step title */
+    icon: ReactNode;
+    /** Icon displayed when the step is active (optional, defaults to icon with brand color) */
+    activeIcon?: ReactNode;
+    /** Step title */
+    title: string;
+    /** Step description, visible only when the step is active */
+    description?: string;
+    /** Content displayed in the preview zone (image, video, component, etc.) */
+    content: ReactNode;
+}
+
+export declare interface OnboardingStepItemProps {
+    /** Step data */
+    step: OnboardingStep;
+    /** Whether this step is active */
+    isActive: boolean;
+    /** Click handler */
+    onClick: () => void;
+    /** Step index (0-based) for accessibility */
+    index: number;
+    /** Total number of steps */
+    totalSteps: number;
+    /** Accessible label for the step */
+    ariaLabel: string;
+}
+
 export declare type OpenMap = {
     [id: string]: boolean;
 };
@@ -1901,6 +2070,8 @@ export declare const TreeViewSeparator: ({ top, left }: CursorProps) => JSX.Elem
  */
 export declare function useArrowRoving(container: HTMLElement | null): void;
 
+export declare const useContextMenuContext: () => ContextMenuContextValue;
+
 /**
  * Hook for using custom translations with type safety.
  *