@protonradio/proton-ui 0.10.1 → 0.10.3

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { CollectionChildren } from '@react-types/shared';
 import { ColumnProps } from '@react-stately/table';
 import { default as default_2 } from 'react';
 import { DOMProps } from '@react-types/shared';
+import { ForwardRefExoticComponent } from 'react';
 import { ItemProps } from 'react-stately';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { JSX as JSX_3 } from 'react';
@@ -12,6 +13,7 @@ import { OverlayTriggerProps } from 'react-stately';
 import { OverlayTriggerState } from 'react-stately';
 import { PressEvent } from 'react-aria';
 import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
 import { RowProps } from '@react-stately/table';
 import { Section } from '@react-stately/table';
 import { Selection as Selection_2 } from 'react-stately';
@@ -26,7 +28,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: ({ isOpen, selectionMode, selectedKeys, disabledKeys, children, beforeActions, afterActions, showCancel, cancelButtonText, actions, closeOnNavigation, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
 
 declare interface ActionMenuAction {
     key: string;
@@ -43,7 +45,14 @@ declare interface ActionMenuProps {
     children?: ReactNode | ((props: {
         close: () => void;
     }) => ReactNode);
+    beforeActions?: ReactNode | ((props: {
+        close: () => void;
+    }) => ReactNode);
+    afterActions?: ReactNode | ((props: {
+        close: () => void;
+    }) => ReactNode);
     showCancel?: boolean;
+    cancelButtonText?: string;
     closeOnNavigation?: boolean;
     actions?: ActionMenuAction[];
     id?: string;
@@ -199,12 +208,6 @@ declare interface BaseInputProps {
     value?: string;
 }
 
-declare const BRAND: {
-    PRIMARY: string;
-    PRIMARY_LIGHT: string;
-    SECONDARY: string;
-};
-
 /**
  * A customizable button component that can render as either a button or anchor element
  * @interface ButtonProps
@@ -288,51 +291,8 @@ export declare type ButtonVariant = "primary" | "secondary" | "success" | "dange
 
 export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
-export declare namespace COLORS {
-    export {
-        BRAND,
-        GRAYSCALE,
-        SECONDARY,
-        DANGER,
-        WARNING,
-        SUCCESS,
-        DARK_GRAYSCALE,
-        DARK_SECONDARY
-    }
-}
-
 export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
-declare const DANGER: {
-    SUPER_DARK: string;
-    DARK: string;
-    MEDIUM: string;
-    LIGHT: string;
-    SUPER_LIGHT: string;
-};
-
-declare const DARK_GRAYSCALE: {
-    GRAY_SUPER_DARK: string;
-    GRAY_DARK: string;
-    GRAY_MEDIUM: string;
-    GRAY_MEDIUM_LIGHT: string;
-    GRAY_LIGHT: string;
-    GRAY_LIGHTEST: string;
-    GRAY_SUPER_LIGHT: string;
-    WHITE: string;
-    BORDER: string;
-};
-
-declare const DARK_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;
-};
-
 /**
  * Intended use in overlay containers such as modals or popovers.
  */
@@ -343,18 +303,6 @@ declare interface DialogProps extends AriaDialogProps {
     children: React.ReactNode;
 }
 
-declare const GRAYSCALE: {
-    GRAY_SUPER_DARK: string;
-    GRAY_DARK: string;
-    GRAY_MEDIUM: string;
-    GRAY_MEDIUM_LIGHT: string;
-    GRAY_LIGHT: string;
-    GRAY_LIGHTEST: string;
-    GRAY_SUPER_LIGHT: string;
-    WHITE: string;
-    BORDER: string;
-};
-
 export declare function Icon(props: Omit<IconProps, "svgContent">): JSX_2.Element;
 
 declare type IconID = "external-link" | "caret-down";
@@ -405,6 +353,54 @@ declare interface ImageBackgroundProps {
  */
 export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps & default_2.RefAttributes<HTMLInputElement>>;
 
+export declare const Modal: (({ isOpen, onClose, title, subtitle, body, children, isOverlay, }: ModalProps) => JSX_2.Element) & {
+    Title: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX_2.Element;
+    Subtitle: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX_2.Element;
+    Body: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX_2.Element;
+    Action: (props: ButtonProps) => JSX_2.Element;
+    Actions: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX_2.Element;
+};
+
+declare interface ModalProps {
+    /**
+     * Controls the visibility of the modal
+     * */
+    isOpen: boolean;
+    /**
+     * Callback function when modal is closed
+     * */
+    onClose: () => void;
+    /**
+     * Whether to show the modal with an overlay background.
+     * @default true
+     * */
+    isOverlay?: boolean;
+    /**
+     * Optional title text for the modal header
+     * */
+    title?: string;
+    /**
+     * Optional subtitle text below the modal title
+     * */
+    subtitle?: string;
+    /**
+     * Optional body text content for the modal
+     * */
+    body?: string;
+    /**
+     * Content to render inside the modal
+     * */
+    children: React.ReactNode;
+}
+
 declare type Palette = {
     BASE_COLOR: string;
     BRAND: {
@@ -534,21 +530,21 @@ export declare const Row: <T = object>(props: ProtonRowProps<T>) => JSX.Element;
  * Base Overlay component for creating modal-like backgrounds.
  * @interface ScreenOverlayProps
  */
-export declare function ScreenOverlay({ fadeIn, fadeOut, onClose, children, }: ScreenOverlayProps): JSX_2.Element;
+export declare const ScreenOverlay: ForwardRefExoticComponent<Omit<ScreenOverlayProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
 declare interface ScreenOverlayProps {
     /**
      * Whether to fade in the overlay.
      */
     fadeIn?: boolean;
-    /**
-     * Whether to fade out the overlay. Fade out triggers on click.
-     */
-    fadeOut?: boolean;
     /**
      * Callback function to handle events (click or ESC key).
      */
     onClose?: () => void;
+    /**
+     * Ref to the overlay element.
+     */
+    ref?: React.RefObject<HTMLDivElement>;
     /**
      * Children to render inside the overlay.
      */
@@ -573,17 +569,6 @@ declare interface SearchInputProps extends Omit<BaseInputProps, "prefix" | "suff
     value?: string;
 }
 
-declare const SECONDARY: {
-    SUPER_DARK: string;
-    DARK: string;
-    MEDIUM: string;
-    MEDIUM_LIGHT: string;
-    LIGHT: string;
-    LIGHTEST: string;
-    SUPER_LIGHT: string;
-    WHITE: string;
-};
-
 export { Section }
 
 export declare const Select: {
@@ -630,13 +615,6 @@ declare interface SelectProps<T> {
     children: CollectionChildren<T>;
 }
 
-declare const SUCCESS: {
-    DARK: string;
-    MEDIUM: string;
-    LIGHT: string;
-    SUPER_LIGHT: string;
-};
-
 export declare function Switch(props: SwitchProps): JSX_2.Element;
 
 declare interface SwitchProps {
@@ -758,7 +736,7 @@ declare interface ThemeProviderProps {
     palette?: Palette;
 }
 
-export declare const THEMES: {
+declare const THEMES: {
     readonly DARK: "dark";
     readonly CUSTOM_DARK: "custom-dark";
     readonly LIGHT: "light";
@@ -766,6 +744,7 @@ export declare const THEMES: {
 
 declare interface ThemeVariables {
     "--proton-control__background-color": string;
+    "--proton-control__background-color-light": string;
     "--proton-control__text-color": string;
     "--proton-control__border-color": string;
     "--proton-control__shadow-color": string;
@@ -869,13 +848,6 @@ export declare function usePopoverTrigger(props?: OverlayTriggerProps): {
 
 export declare const useTheme: () => ThemeContextType;
 
-declare const WARNING: {
-    DARK: string;
-    MEDIUM: string;
-    LIGHT: string;
-    SUPER_LIGHT: string;
-};
-
 /**
  * A waveform visualization component that displays audio data with interactive features.
  *