@protonradio/proton-ui 0.6.1 → 0.6.2

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;
+}
+
 /**
- * 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 ActionMenuProps
+ * @description Props interface for the ActionMenu component
  */
-export declare const arrayToRgbString: (rgb: RGBArray, opacity?: number) => string;
+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;
+}
+
+/**
+ * @interface ActionMenuToggleState
+ * @description State interface for controlling the ActionMenu's open/close behavior
+ */
+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,110 +160,7 @@ declare interface BannerProps extends BannerIconProps, default_2.HTMLAttributes<
 
 export declare type BannerVariant = "default" | "success" | "warning" | "danger";
 
-declare interface BaseInputProps {
-    /**
-     * onChange handler for the input
-     * @param {React.ChangeEvent<HTMLInputElement>} event
-     */
-    onChange?: (value: string) => void;
-    /**
-     * onKeyDown handler for the input
-     * @param {React.KeyboardEvent<HTMLInputElement>} event
-     */
-    onKeyDown?: (event: default_2.KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * Whether the input is disabled.
-     * @param {boolean} isDisabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Should the input be rounded?
-     * @param {boolean} isRounded
-     */
-    isRounded?: boolean;
-    /**
-     * Description text shown above the input.
-     * @param {React.ReactNode | string} description
-     */
-    description?: default_2.ReactNode | string;
-    /**
-     * Error state that changes the input's visual style and displays an error message.
-     * @param {React.ReactNode | string} error
-     */
-    error?: default_2.ReactNode | string;
-    /**
-     * Label for the input element.
-     * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.
-     * @param {string} label
-     */
-    label?: string;
-    /**
-     * Test ID for the component.
-     * @param {string} data-testid
-     */
-    "data-testid"?: string;
-    /**
-     * Content to display before the input. Typically used for icons.
-     * @param {React.ReactNode} prefix
-     */
-    prefix?: default_2.ReactNode;
-    /**
-     * Content to display after the input. Typically used for icons.
-     * @param {React.ReactNode} suffix
-     */
-    suffix?: default_2.ReactNode;
-    /**
-     * Should the browser's autocomplete be enabled?
-     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-     * @param {boolean} autoComplete
-     */
-    autoComplete?: boolean;
-    /**
-     * Should the input be autofocused?
-     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus
-     * @param {boolean} autoFocus
-     */
-    autoFocus?: boolean;
-    /**
-     * The name attribute of the input element.
-     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name
-     * @param {string} name
-     */
-    name?: string;
-    /**
-     * The placeholder text to display when the input is empty.
-     * @note Placeholder takes precedence over label, if both are provided.
-     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder
-     * @param {string} placeholder
-     */
-    placeholder?: string;
-    /**
-     * The pattern attribute of the input element.
-     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
-     * @param {string} pattern
-     */
-    pattern?: string;
-    /**
-     * The tab index of the input element.
-     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-     * @param {number} tabIndex
-     */
-    tabIndex?: number;
-    /**
-     * The type attribute of the input element.
-     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type
-     * @param {string} type
-     */
-    type?: string;
-    /**
-     * The value of the input.
-     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-     * @param {string} value
-     */
-    value?: string;
-}
-
-export declare const BRAND: {
+declare const BRAND: {
     PRIMARY: string;
     PRIMARY_LIGHT: string;
     SECONDARY: string;
@@ -301,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;
@@ -323,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;
@@ -339,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";
@@ -371,24 +308,6 @@ declare interface IconProps {
     color?: string;
 }
 
-/**
- * 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>>;
-
-/**
- * [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;
 
 /**
@@ -421,44 +340,10 @@ 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 }
 
-/**
- * A search input component with optional clear functionality and URL parameter sync.
- */
-export declare const SearchInput: ({ name, placeholder, autoComplete, isClearable, isRounded, error, urlSearchParam, defaultValue, "data-testid": testId, onChange, onClear, }: SearchInputProps) => JSX_2.Element;
-
-declare interface SearchInputProps extends Omit<BaseInputProps, "prefix" | "suffix" | "value" | "onChange"> {
-    /**
-     * Should the clear button be shown when there is text?
-     * @param {boolean} isClearable
-     */
-    isClearable?: boolean;
-    /**
-     * Called when the input value changes.
-     * @note Required when using the input as a controlled component.
-     * @param {(value: string) => void} onChange
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Called when the clear button is clicked.
-     * @param {() => void} onClear
-     */
-    onClear?: () => void;
-    /**
-     * URL search parameter key to sync the input value with.
-     * @param {string} urlSearchParam
-     */
-    urlSearchParam?: string;
-    /**
-     * The initial value of the input.
-     * @param {string} defaultValue
-     */
-    defaultValue?: string;
-}
-
 export { Section }
 
 export declare const Select: {
@@ -466,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;
@@ -539,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;
@@ -567,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;
@@ -609,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;
@@ -674,6 +593,11 @@ declare interface WaveformProps {
 export { }
 
 
+declare namespace ActionMenu {
+    var Item: ({ name, to }: ActionMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+}
+
+
 declare namespace ButtonGroup {
     var Option: (props: ButtonGroupOptionProps) => import("react/jsx-runtime").JSX.Element;
 }