@protonradio/proton-ui 0.6.16 → 0.6.18-beta.1

package/dist/index.d.ts

@@ -26,7 +26,7 @@ import { TooltipTriggerComponentProps } from 'react-aria-components';
  * Renders a list of actions as a focusable menu, or non-focusable children.
  * @interface ActionMenuProps
  */
-export declare const ActionMenu: ({ isOpen, selectionMode, selectedKeys, disabledKeys, children, showCancel, actions, closeOnNavigation, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
+export declare const ActionMenu: ({ id, isOpen, selectionMode, selectedKeys, disabledKeys, children, showCancel, actions, closeOnNavigation, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
 
 declare interface ActionMenuAction {
     key: string;
@@ -46,6 +46,7 @@ declare interface ActionMenuProps {
     showCancel?: boolean;
     closeOnNavigation?: boolean;
     actions?: ActionMenuAction[];
+    id?: string;
     onClose?: () => void;
     onSelectionChange?: (keys: Selection_2) => void;
     "data-testid"?: string;
@@ -315,7 +316,9 @@ declare interface DialogProps extends AriaDialogProps {
     children: React.ReactNode;
 }
 
-declare function generateThemeCssVariables(baseColor: RGBArray | null): Record<Theme, ThemeVariables>;
+export declare const generatePalette: (primaryColor: RGBArray, adjustForLuminance?: boolean) => Palette;
+
+declare function generateThemeCssVariables(palette: Palette): Record<Theme, ThemeVariables>;
 
 declare const GRAYSCALE: {
     GRAY_SUPER_DARK: string;
@@ -353,6 +356,32 @@ declare interface IconProps {
  */
 export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps & default_2.RefAttributes<HTMLInputElement>>;
 
+declare type Palette = {
+    BRAND: {
+        PRIMARY: string;
+        PRIMARY_LIGHT: string;
+        SECONDARY: string;
+    };
+    PRIMARY: {
+        PRIMARY_SUPER_DARK: string;
+        PRIMARY_DARK: string;
+        PRIMARY_MEDIUM: string;
+        PRIMARY_MEDIUM_LIGHT: string;
+        PRIMARY_LIGHT: string;
+        PRIMARY_LIGHTEST: string;
+        PRIMARY_SUPER_LIGHT: string;
+    };
+    SECONDARY: {
+        SECONDARY_SUPER_DARK: string;
+        SECONDARY_DARK: string;
+        SECONDARY_MEDIUM: string;
+        SECONDARY_MEDIUM_LIGHT: string;
+        SECONDARY_LIGHT: string;
+        SECONDARY_LIGHTEST: string;
+        SECONDARY_SUPER_LIGHT: string;
+    };
+};
+
 /**
  * Popover is an unstyled popover component that handles positioning. It should be used
  * with the Dialog component to provide a styled popover.
@@ -387,6 +416,27 @@ export declare interface ProtonColumnProps<T> extends ColumnProps<T> {
     align?: "left" | "center" | "right";
 }
 
+declare interface ResponsiveMenuProps {
+    /** The id of the menu */
+    menuId?: string;
+    /** Custom trigger component. If not provided, defaults to ellipsis icon */
+    renderTrigger?: (triggerProps: TriggerProps, isOpen: boolean) => ReactNode;
+    /** Size of the trigger icon */
+    size?: number;
+    /** Array of menu actions/items to display */
+    actions: ActionMenuAction[];
+    /** Whether the menu is disabled */
+    disabled?: boolean;
+    /** Callback when menu closes */
+    onClose?: () => void;
+    /** Test ID for the trigger component */
+    testId?: string;
+    /** Test ID for the menu */
+    menuTestId?: string;
+}
+
+export declare function ResponsiveMenuTrigger({ renderTrigger, menuId, size, actions, disabled, onClose, testId: triggerTestId, menuTestId, }: ResponsiveMenuProps): JSX_2.Element;
+
 export declare const ResponsiveSelect: {
     Menu: typeof ResponsiveSelectMenu;
     Option: <T>(props: ItemProps<T>) => JSX_3.Element;
@@ -543,8 +593,7 @@ declare interface ThemeContextType {
     theme: Theme;
     className: string;
     style: ReturnType<typeof generateThemeCssVariables>[Theme];
-    baseColor: RGBArray;
-    themedRGBArray: RGBArray;
+    palette: Palette;
 }
 
 export declare const ThemeProvider: default_2.FC<ThemeProviderProps>;
@@ -552,11 +601,12 @@ export declare const ThemeProvider: default_2.FC<ThemeProviderProps>;
 declare interface ThemeProviderProps {
     theme: Theme;
     children: ReactNode;
-    baseColor?: RGBArray;
+    palette: Palette;
 }
 
 export declare const THEMES: {
     readonly DARK: "dark";
+    readonly CUSTOM_DARK: "custom-dark";
     readonly LIGHT: "light";
 };
 
@@ -564,6 +614,10 @@ declare interface ThemeVariables {
     "--proton-control__background-color": string;
     "--proton-control__text-color": string;
     "--proton-control__border-color": string;
+    "--proton-control__shadow-color": string;
+    "--proton-color__primary": string;
+    "--proton-color__primary-light": string;
+    "--proton-color__secondary": string;
 }
 
 export declare function Tooltip({ children, arrow, ...props }: TooltipProps): JSX_2.Element;
@@ -589,6 +643,23 @@ export declare interface TooltipTriggerProps extends TooltipProps, TooltipTrigge
     disableTriggerClick?: boolean;
 }
 
+/**
+ * A component that displays either a popover menu or an action menu
+ * depending on the screen size when the menu trigger is pressed.
+ *
+ * @param {ResponsiveMenuProps} props - The props for the ResponsiveMenuTrigger component.
+ * @returns {JSX.Element} - The ResponsiveMenuTrigger component.
+ */
+declare interface TriggerProps {
+    "data-testid"?: string;
+    disabled?: boolean;
+    ref?: React.RefObject<HTMLButtonElement>;
+    onClick?: () => void;
+    "aria-label": string;
+}
+
+export declare const usePalette: (backgroundImage: string | null) => Palette;
+
 /**
  * Hook for creating a popover trigger. This hook manages the state and events for the popover
  * and popover trigger. For examples see Popover.stories.tsx.