@protonradio/proton-ui 0.6.0 → 0.6.2-beta1

package/dist/{proton-ui.es.d.ts → index.d.ts}

@@ -1,7 +1,7 @@
 import { AriaDialogProps } from 'react-aria';
 import { AriaPopoverProps } from 'react-aria';
-import { AriaSelectProps } from 'react-aria';
 import { AriaTableProps } from 'react-aria';
+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';
@@ -20,13 +20,60 @@ import { TableStateProps } from 'react-stately';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
 
+export declare function ActionMenu({ children, closeOnNavigation, isDisabled, showCancel, isOpen, close, "data-testId": testId, }: ActionMenuProps): JSX_2.Element;
+
+export declare namespace ActionMenu {
+    var Item: ({ name, to }: ActionMenuItemProps) => JSX_2.Element;
+}
+
+declare interface ActionMenuItemProps {
+    name: string | ReactNode;
+    to?: string;
+}
+
+/**
+ * @interface ActionMenuProps
+ * @description Props interface for the ActionMenu component
+ */
+declare interface ActionMenuProps extends ActionMenuToggleState {
+    /**
+     * @param {ReactNode | function} children - Content to be rendered inside the menu, can be components or render function
+     */
+    children?: ReactNode | ((props: {
+        close: () => void;
+    }) => ReactNode);
+    /**
+     * @param {boolean} isDisabled - Prevents the menu from closing
+     */
+    isDisabled?: boolean;
+    /**
+     * @param {boolean} showCancel - Shows the cancel button
+     */
+    showCancel?: boolean;
+    /**
+     * @param {string} data-testId - Test ID for the menu container
+     */
+    "data-testId"?: string;
+}
+
 /**
- * Converts an RGB array to a CSS string representation.
- * @param rgb - The RGB array to convert.
- * @param opacity - Optional opacity value.
- * @returns A CSS string representation of the RGB array, using `rgb()`, or `rgba()` if an opacity value is provided.
+ * @interface ActionMenuToggleState
+ * @description State interface for controlling the ActionMenu's open/close behavior
  */
-export declare const arrayToRgbString: (rgb: RGBArray, opacity?: number) => string;
+declare interface ActionMenuToggleState {
+    /**
+     * @param {boolean} isOpen - Controls whether the menu is displayed
+     */
+    isOpen: boolean;
+    /**
+     * @param {() => void} close - Closes the menu
+     */
+    close: () => void;
+    /**
+     * @param {boolean} closeOnNavigation - Automatically closes when route changes
+     */
+    closeOnNavigation?: boolean;
+}
 
 export declare const Badge: ({ variant, children, ...props }: BadgeProps) => JSX_2.Element;
 
@@ -113,7 +160,7 @@ declare interface BannerProps extends BannerIconProps, default_2.HTMLAttributes<
 
 export declare type BannerVariant = "default" | "success" | "warning" | "danger";
 
-export declare const BRAND: {
+declare const BRAND: {
     PRIMARY: string;
     PRIMARY_LIGHT: string;
     SECONDARY: string;
@@ -198,11 +245,19 @@ export declare type ButtonVariant = "primary" | "secondary" | "success" | "dange
 
 export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
-export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX.Element;
+export declare namespace COLORS {
+    export {
+        BRAND,
+        GRAYSCALE,
+        DANGER,
+        WARNING,
+        SUCCESS
+    }
+}
 
-export declare function csx(...classnames: unknown[]): string;
+export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
-export declare const DANGER: {
+declare const DANGER: {
     SUPER_DARK: string;
     DARK: string;
     MEDIUM: string;
@@ -220,11 +275,9 @@ declare interface DialogProps extends AriaDialogProps {
     children: React.ReactNode;
 }
 
-export declare const generateThemeCssVariables: (baseColor: RGBArray | null) => Record<Theme, ThemeVariables>;
-
-export declare const generateThemedRGBArray: (baseColor: RGBArray | null) => RGBArray;
+declare function generateThemeCssVariables(baseColor: RGBArray | null): Record<Theme, ThemeVariables>;
 
-export declare const GRAYSCALE: {
+declare const GRAYSCALE: {
     GRAY_SUPER_DARK: string;
     GRAY_DARK: string;
     GRAY_MEDIUM: string;
@@ -236,19 +289,6 @@ export declare const GRAYSCALE: {
     BORDER: string;
 };
 
-/**
- * Handles internal navigation clicks by preventing default browser behavior and
- * programmatically updating the URL and history state.
- *
- * @param e - The click event from the anchor element
- * @param to - The destination path to navigate to
- *
- * @remarks
- * - Converts relative paths to absolute by prepending "/" if needed
- * - Updates browser history using pushState and dispatches a popstate event
- */
-export declare const handleInternalNavigation: (e: React.MouseEvent<HTMLAnchorElement>, to: string) => void;
-
 export declare function Icon(props: Omit<IconProps, "svgContent">): JSX_2.Element;
 
 declare type IconID = "external-link" | "caret-down";
@@ -268,19 +308,6 @@ declare interface IconProps {
     color?: string;
 }
 
-/**
- * [isUrlExternal] - determine if passed absolute url is external to the current domain.
- */
-export declare const isUrlExternal: (url: any) => boolean;
-
-/**
- * Lightens an RGB color by a specified factor.
- * @param rgb - The RGB color array to lighten.
- * @param factor - The factor between 0 (darker) - 1 (lighter) by which to transform the color.
- * @returns The lightened RGB color array, RGB values are clamped to 42 (dark) - 179 (light).
- */
-export declare const lightenRGBColor: (rgb: RGBArray, factor: number) => RGBArray;
-
 export declare function Popover({ children, state, arrow, offset, ...props }: PopoverProps): JSX_2.Element;
 
 /**
@@ -313,7 +340,7 @@ export declare interface ProtonColumnProps<T> extends ColumnProps<T> {
     align?: "left" | "center" | "right";
 }
 
-export declare type RGBArray = [number, number, number];
+declare type RGBArray = [number, number, number];
 
 export { Row }
 
@@ -324,14 +351,53 @@ export declare const Select: {
     Option: <T>(props: ItemProps<T>) => JSX_3.Element;
 };
 
-declare function SelectMenu<T extends object>({ label, name, isDisabled, ...props }: SelectProps<T>): JSX_2.Element;
+declare function SelectMenu<T extends object>({ label, name, isDisabled, disabledKeys, selectedKey, onSelectionChange, items, "data-testid": testId, children, }: SelectProps<T>): JSX_2.Element;
 
-declare interface SelectProps<T> extends AriaSelectProps<T> {
-    label?: string;
+declare interface SelectProps<T> {
+    /** The name of the select field
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+     * @prop {string} name
+     */
     name: string;
+    /** Label to display above the select
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#text
+     * @prop {string} label
+     */
+    label?: string;
+    /** Whether the select is disabled
+     * @prop {boolean} isDisabled
+     */
+    isDisabled?: boolean;
+    /** Array of keys that should be disabled
+     * @example ["Thing 1", "Thing 2"]
+     * @prop {string[] | number[]} disabledKeys
+     */
+    disabledKeys?: (string | number)[];
+    /** Currently selected key
+     * @prop {string | number} selectedKey
+     */
+    selectedKey?: string | number;
+    /** Callback fired when selection changes
+     * @prop {(key: string | number) => void} onSelectionChange
+     */
+    onSelectionChange?: (key: string | number) => void;
+    /** Array of items to display
+     * @example [{ name: "thing 1", label: "Thing 1" }, { name: "thing 2", label: "Thing 2" }]
+     * @prop {object[]} items
+     */
+    items?: T[];
+    /**
+     * Test ID for the select
+     * @prop {string} data-testid
+     */
+    "data-testid"?: string;
+    /** Children elements or render function
+     * @prop {CollectionChildren<T>} children
+     */
+    children: CollectionChildren<T>;
 }
 
-export declare const SUCCESS: {
+declare const SUCCESS: {
     DARK: string;
     MEDIUM: string;
     LIGHT: string;
@@ -397,12 +463,7 @@ declare interface TextEmphasisProps extends React.HTMLAttributes<HTMLSpanElement
     "data-testid"?: string;
 }
 
-export declare type Theme = (typeof THEMES)[keyof typeof THEMES];
-
-export declare const THEME_CLASSES: {
-    dark: string;
-    light: string;
-};
+declare type Theme = (typeof THEMES)[keyof typeof THEMES];
 
 declare interface ThemeContextType {
     theme: Theme;
@@ -425,7 +486,7 @@ export declare const THEMES: {
     readonly LIGHT: "light";
 };
 
-export declare interface ThemeVariables {
+declare interface ThemeVariables {
     "--proton-control__background-color": string;
     "--proton-control__text-color": string;
     "--proton-control__border-color": string;
@@ -467,7 +528,7 @@ export declare function usePopoverTrigger(props?: OverlayTriggerProps): {
 
 export declare const useTheme: () => ThemeContextType;
 
-export declare const WARNING: {
+declare const WARNING: {
     DARK: string;
     MEDIUM: string;
     LIGHT: string;
@@ -535,3 +596,8 @@ export { }
 declare namespace ButtonGroup {
     var Option: (props: ButtonGroupOptionProps) => import("react/jsx-runtime").JSX.Element;
 }
+
+
+declare namespace ActionMenu {
+    var Item: ({ name, to }: ActionMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+}