@protonradio/proton-ui 0.11.0-beta.2 → 0.11.0-beta.20

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { AriaButtonProps } from 'react-aria';
 import { AriaDialogProps } from 'react-aria';
 import { AriaPopoverProps } from 'react-aria';
 import { AriaTableProps } from 'react-aria';
@@ -14,8 +15,7 @@ import { RefAttributes } from 'react';
 import { RowProps } from '@react-stately/table';
 import { Section } from '@react-stately/table';
 import { Selection as Selection_2 } from 'react-stately';
-import { Selection as Selection_3 } from 'react-aria-components';
-import { TableBodyProps } from '@react-stately/table';
+import { TableBodyProps as TableBodyProps_2 } from '@react-stately/table';
 import { TableHeader } from '@react-stately/table';
 import { TableStateProps } from 'react-stately';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
@@ -26,11 +26,12 @@ 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, defaultSelectedKeys, disabledKeys, children, showCancel, cancelButtonText, actions, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
+export declare const ActionMenu: ({ isOpen, selectionMode, selectedKeys, defaultSelectedKeys, disabledKeys, children, showCancel, cancelButtonText, actions, title, onSelectionChange, onClose, "data-testid": testId, }: ActionMenuProps) => JSX_2.Element;
 
 declare interface ActionMenuAction {
     key: string;
     label?: ReactNode;
+    description?: ReactNode;
     to?: string;
     onAction?: (key: string) => void;
     children?: ActionMenuAction[];
@@ -47,8 +48,8 @@ declare interface ActionMenuProps {
     }) => ReactNode);
     showCancel?: boolean;
     cancelButtonText?: string;
+    title?: string;
     actions?: ActionMenuAction[];
-    id?: string;
     onClose?: () => void;
     onSelectionChange?: (keys: Selection_2) => void;
     "data-testid"?: string;
@@ -205,7 +206,7 @@ declare interface BaseInputProps {
  * A customizable button component that can render as either a button or anchor element
  * @interface ButtonProps
  */
-export declare function Button({ variant, size, fullWidth, icon, to, target, onPress, type, isDisabled, "data-testid": testId, children, __textShift, }: ButtonProps): JSX_2.Element;
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 export declare function ButtonGroup(props: ButtonGroupProps): JSX_2.Element;
 
@@ -245,7 +246,7 @@ declare interface ButtonGroupProps {
     children?: React.ReactNode;
 }
 
-declare interface ButtonProps {
+declare interface ButtonProps extends AriaButtonProps<"button"> {
     /** The button's visual aesthetic
      * @param {ButtonVariant} variant
      */
@@ -274,7 +275,7 @@ declare interface ButtonProps {
     /** The target attribute for the link. Defaults to `_blank` if the URL is external.
      * @param {string} target
      */
-    target?: "_blank" | "_self" | "_parent" | "_top";
+    target?: "_blank" | "_self" | "_parent" | "_top" | string;
     /** Called when the button is pressed (on release, not keydown)
      * @param {(e: PressEvent) => void} onPress
      */
@@ -291,10 +292,6 @@ declare interface ButtonProps {
      * @param {React.ReactNode} children
      */
     children?: React.ReactNode;
-    /** DO NOT USE. INTERNAL USE ONLY. Will be used in calculation for the shift of the button text. Represents the # of horizontal pixels to shift.
-     * @param {number} __textShift
-     */
-    __textShift?: number;
 }
 
 declare type ButtonSize = "small" | "medium" | "large" | "xlarge" | "2xlarge";
@@ -426,12 +423,14 @@ export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps &
 declare type MenuItemType = ActionMenuAction;
 
 declare interface MenuProps {
-    /** The id of the menu */
-    menuId?: string;
     /** Custom trigger component. If not provided, defaults to ellipsis icon */
-    renderTrigger?: (triggerProps: TriggerProps, isOpen: boolean) => ReactNode;
-    /** Size of the trigger icon */
+    renderTrigger?: (triggerProps: TriggerProps) => ReactNode;
+    /** Size of the trigger icon
+     * @default 24
+     */
     size?: number;
+    /** Title of the parent menu */
+    title?: string;
     /** Array of menu actions/items to display */
     items: MenuItemType[];
     /** Whether the menu is disabled */
@@ -439,18 +438,18 @@ declare interface MenuProps {
     /** Callback when menu closes */
     onClose?: () => void;
     /** Test ID for the trigger component */
-    testId?: string;
+    triggerTestId?: string;
     /** Test ID for the menu */
     menuTestId?: string;
     /** Callback when a menu item is selected */
-    onSelectionChange?: (keys: Selection_3) => void;
+    onSelectionChange?: (key: string) => void;
     /** The key of the selected item */
     selectedKey?: string;
     /** The keys of the disabled items */
     disabledKeys?: string[];
 }
 
-export declare function MenuTrigger({ renderTrigger, menuId, size, items, disabled, onClose, testId: triggerTestId, menuTestId, onSelectionChange, selectedKey, disabledKeys, }: MenuProps): JSX_2.Element;
+export declare function MenuTrigger({ renderTrigger, size, title, items, disabled, onClose, triggerTestId, menuTestId, onSelectionChange, selectedKey, disabledKeys, }: MenuProps): JSX_2.Element;
 
 export declare const Modal: (({ isOpen, onClose, title, subtitle, body, children, isOverlay, "data-testid": dataTestId, }: ModalProps) => JSX_2.Element) & {
     Title: ({ children }: {
@@ -509,6 +508,7 @@ declare type Palette = {
     BRAND: {
         PRIMARY: string;
         PRIMARY_LIGHT: string;
+        PRIMARY_SUPER_LIGHT: string;
         SECONDARY: string;
     };
     PRIMARY: {
@@ -590,7 +590,7 @@ export declare interface ProtonRowProps<T = object> extends RowProps<T> {
     onClick?: (key: string) => void;
 }
 
-export declare interface ProtonTableBodyProps<T = object> extends TableBodyProps<T> {
+export declare interface ProtonTableBodyProps<T = object> extends TableBodyProps_2<T> {
     showLines?: boolean;
 }
 
@@ -714,18 +714,92 @@ declare interface SwitchProps {
     children?: React.ReactNode;
 }
 
-export declare function Table(props: TableProps): JSX_2.Element;
+export declare function Table(props: TableProps_2): JSX_2.Element;
+
+/**
+ * Base Table component that renders data in rows and columns using collections.
+ *
+ * Accessibility features are built-in:
+ * - aria-label is automatically generated from table structure and content
+ * - aria-describedby links to caption when provided
+ * - Full ARIA table semantics with proper roles and indices
+ *
+ * @example
+ * ```tsx
+ * <Table caption="Employee Directory">
+ *   <Table.Header>
+ *     <Table.Column id="name">Name</Table.Column>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row key="1">
+ *       <Table.Cell>Joe</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
+export declare const Table2: (({ children, name, className }: TableProps) => JSX_2.Element) & {
+    /** Table header: {@link TableHeaderProps} */
+    Header: typeof TableHeader_2;
+    /** Table column: {@link TableColumnProps} */
+    Column: typeof TableColumn;
+    /** Table body: {@link TableBodyProps} */
+    Body: typeof TableBody_2;
+    /** Table row: {@link TableRowProps} */
+    Row: typeof TableRow;
+    /** Table cell: {@link TableCellProps} */
+    Cell: typeof TableCell;
+};
 
 export declare const TableBody: <T = object>(props: ProtonTableBodyProps<T>) => JSX.Element;
 
+declare function TableBody_2({ children }: TableBodyProps): any;
+
+export declare interface TableBodyProps {
+    children: ReactNode;
+}
+
+declare function TableCell({ columnKey, children }: TableCellProps): any;
+
+export declare interface TableCellProps {
+    columnKey?: string;
+    children: ReactNode;
+}
+
+declare function TableColumn({ id, children }: TableColumnProps): any;
+
+export declare interface TableColumnProps {
+    id: string;
+    children: ReactNode;
+}
+
 export { TableHeader }
 
-declare interface TableProps extends AriaTableProps, TableStateProps<object> {
+declare function TableHeader_2({ children }: TableHeaderProps): any;
+
+export declare interface TableHeaderProps {
+    children: ReactNode;
+}
+
+declare interface TableProps {
+    children: default_2.ReactNode;
+    name?: string;
+    className?: string;
+}
+
+declare interface TableProps_2 extends AriaTableProps, TableStateProps<object> {
     headerProps?: {
         isHidden?: boolean;
     };
 }
 
+declare function TableRow({ key, children }: TableRowProps): any;
+
+export declare interface TableRowProps {
+    key?: string;
+    children: ReactNode;
+}
+
 /**
  * A component that displays text with an ellipsis when it overflows its container.
  * @interface TextEllipsisProps
@@ -819,6 +893,7 @@ declare interface ThemeVariables {
     "--proton-control__shadow-color": string;
     "--proton-color__primary": string;
     "--proton-color__primary-light": string;
+    "--proton-color__primary-super-light": string;
     "--proton-color__secondary": string;
     "--proton-control__primary-super-dark": string;
     "--proton-control__primary-dark": string;
@@ -897,11 +972,10 @@ export declare interface TooltipTriggerProps extends TooltipProps, TooltipTrigge
  * @returns {JSX.Element} - The MenuTrigger component.
  */
 declare interface TriggerProps {
-    isDisabled?: boolean;
-    "data-testid"?: string;
-    ref?: React.RefObject<HTMLButtonElement>;
-    onPress?: () => void;
-    "aria-label": string;
+    disabled?: boolean;
+    isOpen?: boolean;
+    setIsOpen?: (isOpen: boolean) => void;
+    triggerRef: React.RefObject<HTMLButtonElement>;
 }
 
 /**