@protonradio/proton-ui 0.10.2 → 0.10.4

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;
@@ -284,6 +293,23 @@ export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
 export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
+/**
+ * Input with a button to copy value to the clipboard.
+ * @interface CopyInputProps
+ */
+export declare function CopyInput({ name, value, onError, onSuccess }: CopyInputProps): JSX_2.Element;
+
+declare interface CopyInputProps {
+    /** The name of the input field */
+    name: string;
+    /** The value to display in the input and copy to clipboard */
+    value: string;
+    /** Optional callback when copy fails, receives the error object */
+    onError?: (error: Error) => void;
+    /** Optional callback when copy succeeds */
+    onSuccess?: () => void;
+}
+
 /**
  * Intended use in overlay containers such as modals or popovers.
  */
@@ -294,6 +320,36 @@ declare interface DialogProps extends AriaDialogProps {
     children: React.ReactNode;
 }
 
+/**
+ * Elevation component creates a visual elevation effect using the theme-aware background color.
+ *
+ * This component is designed to be used as a visual layer that sits on top of other content
+ * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`
+ * CSS variable which is theme-aware and will adapt to light, dark, and custom-dark themes.
+ *
+ * @interface ElevationProps
+ */
+export declare const Elevation: ({ children, backgroundGradient, backgroundGradientDirection, "data-testid": dataTestId, }: ElevationProps) => JSX_2.Element;
+
+declare interface ElevationProps {
+    /**
+     * The content to be displayed within the elevation.
+     */
+    children?: ReactNode;
+    /**
+     * Whether the elevation should have a background gradient.
+     */
+    backgroundGradient?: boolean;
+    /**
+     * The direction of the background gradient.
+     */
+    backgroundGradientDirection?: "left" | "right";
+    /**
+     * The data-testid attribute for testing purposes.
+     */
+    "data-testid"?: string;
+}
+
 export declare function Icon(props: Omit<IconProps, "svgContent">): JSX_2.Element;
 
 declare type IconID = "external-link" | "caret-down";
@@ -344,12 +400,51 @@ declare interface ImageBackgroundProps {
  */
 export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps & default_2.RefAttributes<HTMLInputElement>>;
 
-export declare const Modal: ({ isOpen, onClose, title, children }: ModalProps) => JSX_2.Element;
+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;
-    onClose: () => void;
+    /**
+     * 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;
 }
 
@@ -482,22 +577,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.
-     * @important Fade out triggers on click, you must provide an onClose prop to use this.
-     */
-    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.
      */
@@ -697,6 +791,7 @@ 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;