@protonradio/proton-ui 0.7.5 → 0.7.6

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: ({ id, 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, showCancel, actions, closeOnNavigation, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
 
 declare interface ActionMenuAction {
     key: string;
@@ -316,8 +316,6 @@ declare interface DialogProps extends AriaDialogProps {
     children: React.ReactNode;
 }
 
-declare function generateThemeCssVariables(palette: Palette): Record<Theme, ThemeVariables>;
-
 declare const GRAYSCALE: {
     GRAY_SUPER_DARK: string;
     GRAY_DARK: string;
@@ -349,12 +347,39 @@ declare interface IconProps {
     color?: string;
 }
 
+/**
+ * ImageOverlay component for displaying an image with a blur effect.
+ * @interface ImageBackgroundProps
+ */
+export declare function ImageBackground({ image, imageUrl, onLoad, }: ImageBackgroundProps): JSX_2.Element;
+
+declare interface ImageBackgroundProps {
+    /**
+     * Manually display a background image. Useful for server-side rendering.
+     * @important When using this prop, you must style your own image component appropriately.
+     * The component will be placed directly in the background without additional styling.
+     */
+    image?: React.ReactNode;
+    /**
+     * The URL of the image to display in the background.
+     * @important Client-side only. Cannot be used in Server Components.
+     * When using this prop, the image will be automatically styled with the background effect.
+     */
+    imageUrl?: string;
+    /**
+     * Callback function to handle the image load event.
+     * @important Client-side only. Cannot be used in Server Components.
+     */
+    onLoad?: (image: HTMLImageElement) => void;
+}
+
 /**
  * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.
  */
 export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps & default_2.RefAttributes<HTMLInputElement>>;
 
 declare type Palette = {
+    BASE_COLOR: string;
     BRAND: {
         PRIMARY: string;
         PRIMARY_LIGHT: string;
@@ -389,7 +414,7 @@ declare type Palette = {
  *
  * @interface PopoverProps
  */
-export declare function Popover({ children, state, arrow, offset, isEntering, ...props }: PopoverProps): JSX_2.Element;
+export declare function Popover({ children, state, arrow, offset, ...props }: PopoverProps): JSX_2.Element;
 
 declare interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
     /**
@@ -408,10 +433,6 @@ 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> {
@@ -453,10 +474,31 @@ declare function ResponsiveSelectMenu<T extends object>({ label, name, isDisable
 
 export { Row }
 
+/**
+ * Base Overlay component for creating modal-like backgrounds.
+ * @interface ScreenOverlayProps
+ */
+export declare function ScreenOverlay({ fadeIn, onClose, children, }: ScreenOverlayProps): JSX_2.Element;
+
+declare interface ScreenOverlayProps {
+    /**
+     * Whether to fade in the overlay.
+     */
+    fadeIn?: boolean;
+    /**
+     * Callback function to handle events (click or ESC key).
+     */
+    onClose?: () => void;
+    /**
+     * Children to render inside the overlay.
+     */
+    children?: React.ReactNode;
+}
+
 /**
  * A search input component with optional clear functionality and URL parameter sync.
  */
-export declare const SearchInput: ({ name, placeholder, autoComplete, isClearable, isDisabled, error, defaultValue, value: controlledValue, "data-testid": testId, onChange, onClear, }: SearchInputProps) => JSX_2.Element;
+export declare const SearchInput: ({ name, placeholder, autoComplete, isClearable, error, defaultValue, value: controlledValue, "data-testid": testId, onChange, onClear, }: SearchInputProps) => JSX_2.Element;
 
 declare interface SearchInputProps extends Omit<BaseInputProps, "prefix" | "suffix" | "value" | "onChange" | "description" | "descriptionPosition" | "label"> {
     /** Should the clear button be shown when there is text? */
@@ -592,7 +634,7 @@ declare type Theme = (typeof THEMES)[keyof typeof THEMES];
 declare interface ThemeContextType {
     theme: Theme;
     className: string;
-    style: ReturnType<typeof generateThemeCssVariables>[Theme];
+    style: ThemeVariables;
     palette: Palette;
 }
 
@@ -634,30 +676,6 @@ declare interface ThemeVariables {
     "--proton-control__secondary-super-light": string;
 }
 
-/**
- * A component that displays a loading tombstone. For use as a placeholder while loading content
- * @interface TombstoneProps
- */
-export declare const Tombstone: ({ width, height, borderRadius, }: TombstoneProps) => JSX_2.Element;
-
-declare interface TombstoneProps {
-    /**
-     * The width of the tombstone.
-     * @default "100%"
-     */
-    width?: string;
-    /**
-     * The height of the tombstone.
-     * @default "1.5rem"
-     */
-    height?: string;
-    /**
-     * The border radius of the tombstone.
-     * @default "4px"
-     */
-    borderRadius?: string;
-}
-
 export declare function Tooltip({ children, arrow, ...props }: TooltipProps): JSX_2.Element;
 
 export declare interface TooltipProps extends Omit<TooltipProps_2, "children"> {