@protonradio/proton-ui 0.6.18 → 0.7.0-beta.2

package/dist/index.d.ts

@@ -316,7 +316,7 @@ declare interface DialogProps extends AriaDialogProps {
     children: React.ReactNode;
 }
 
-declare function generateThemeCssVariables(baseColor: RGBArray | null): Record<Theme, ThemeVariables>;
+declare function generateThemeCssVariables(palette: Palette): Record<Theme, ThemeVariables>;
 
 declare const GRAYSCALE: {
     GRAY_SUPER_DARK: string;
@@ -354,6 +354,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.
@@ -363,7 +389,7 @@ export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps &
  *
  * @interface PopoverProps
  */
-export declare function Popover({ children, state, arrow, offset, ...props }: PopoverProps): JSX_2.Element;
+export declare function Popover({ children, state, arrow, offset, isEntering, ...props }: PopoverProps): JSX_2.Element;
 
 declare interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
     /**
@@ -382,26 +408,21 @@ declare interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
      * Whether to show an arrow on the popover.
      */
     arrow?: boolean;
+    /**
+     * Whether the popover is entering.
+     */
+    isEntering?: boolean;
 }
 
 export declare interface ProtonColumnProps<T> extends ColumnProps<T> {
     align?: "left" | "center" | "right";
 }
 
-/**
- * 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 ResponsiveMenuProps {
     /** The id of the menu */
     menuId?: string;
-    /** The tab index of the menu trigger */
-    tabIndex?: number;
     /** Custom trigger component. If not provided, defaults to ellipsis icon */
-    trigger?: ReactNode;
+    renderTrigger?: (triggerProps: TriggerProps, isOpen: boolean) => ReactNode;
     /** Size of the trigger icon */
     size?: number;
     /** Array of menu actions/items to display */
@@ -410,11 +431,13 @@ declare interface ResponsiveMenuProps {
     disabled?: boolean;
     /** Callback when menu closes */
     onClose?: () => void;
-    /** Test ID for the component */
-    "data-testid"?: string;
+    /** Test ID for the trigger component */
+    testId?: string;
+    /** Test ID for the menu */
+    menuTestId?: string;
 }
 
-export declare function ResponsiveMenuTrigger({ trigger, menuId, tabIndex, size, actions, disabled, onClose, "data-testid": testId, }: ResponsiveMenuProps): JSX_2.Element;
+export declare function ResponsiveMenuTrigger({ renderTrigger, menuId, size, actions, disabled, onClose, testId: triggerTestId, menuTestId, }: ResponsiveMenuProps): JSX_2.Element;
 
 export declare const ResponsiveSelect: {
     Menu: typeof ResponsiveSelectMenu;
@@ -428,8 +451,6 @@ export declare const ResponsiveSelect: {
  */
 declare function ResponsiveSelectMenu<T extends object>({ label, name, isDisabled, disabledKeys, selectedKey, onSelectionChange, onOpen, onClose, items, "data-testid": testId, children, }: SelectProps<T>): JSX_2.Element;
 
-declare type RGBArray = [number, number, number];
-
 export { Row }
 
 /**
@@ -572,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>;
@@ -581,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";
 };
 
@@ -593,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;
@@ -618,6 +643,21 @@ 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;
+}
+
 /**
  * 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.