@protonradio/proton-ui 0.6.6 → 0.6.8

package/dist/index.d.ts

@@ -20,10 +20,18 @@ import { TableStateProps } from 'react-stately';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
 
+/**
+ * [ActionMenu] - React hooks-based ActionMenu that renders into a Portal layer.
+ * @interface ActionMenuProps
+ * @interface ActionMenuToggleState
+ */
 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;
+    var List: ({ children }: {
+        children: ReactNode;
+    }) => JSX_2.Element;
 }
 
 declare interface ActionMenuItemProps {
@@ -31,47 +39,25 @@ declare interface ActionMenuItemProps {
     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
-     */
+    /** 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
-     */
+    /** Prevents the menu from closing */
     isDisabled?: boolean;
-    /**
-     * @param {boolean} showCancel - Shows the cancel button
-     */
+    /** Shows the cancel button */
     showCancel?: boolean;
-    /**
-     * @param {string} data-testId - Test ID for the menu container
-     */
+    /** 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
-     */
+    /** Controls whether the menu is displayed */
     isOpen: boolean;
-    /**
-     * @param {() => void} close - Closes the menu
-     */
+    /** Closes the menu */
     close: () => void;
-    /**
-     * @param {boolean} closeOnNavigation - Automatically closes when route changes
-     */
+    /** Automatically closes when route changes */
     closeOnNavigation?: boolean;
 }
 
@@ -160,6 +146,66 @@ declare interface BannerProps extends BannerIconProps, default_2.HTMLAttributes<
 
 export declare type BannerVariant = "default" | "success" | "warning" | "danger";
 
+declare interface BaseInputProps {
+    /**
+     * onChange handler for the input
+     */
+    onChange?: (value: string) => void;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Description text shown above the input. */
+    description?: default_2.ReactNode | string;
+    /**
+     * The position of the description text.
+     * @default "top"
+     */
+    descriptionPosition?: "top" | "bottom";
+    /** Error state that changes the input's visual style and displays an error message. */
+    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.
+     */
+    label?: string;
+    /** Test ID for the component. */
+    "data-testid"?: string;
+    /** Content to display before the input. Typically used for icons. */
+    prefix?: default_2.ReactNode;
+    /** Content to display after the input. Typically used for icons. */
+    suffix?: default_2.ReactNode;
+    /**
+     * Should the browser's autocomplete be enabled?
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    autoComplete?: boolean;
+    /**
+     * Should the input be autofocused?
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus
+     */
+    autoFocus?: boolean;
+    /**
+     * The name attribute of the input element.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/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
+     */
+    placeholder?: string;
+    /**
+     * The type attribute of the input element.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type
+     */
+    type?: string;
+    /**
+     * The value of the input.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+     */
+    value?: string;
+}
+
 declare const BRAND: {
     PRIMARY: string;
     PRIMARY_LIGHT: string;
@@ -308,6 +354,11 @@ 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>>;
+
 export declare function Popover({ children, state, arrow, offset, ...props }: PopoverProps): JSX_2.Element;
 
 /**
@@ -340,10 +391,40 @@ export declare interface ProtonColumnProps<T> extends ColumnProps<T> {
     align?: "left" | "center" | "right";
 }
 
+export declare const ResponsiveSelect: {
+    Menu: typeof ResponsiveSelectMenu;
+    Option: <T>(props: ItemProps<T>) => JSX_3.Element;
+};
+
+/**
+ * A dropdown select menu that opens a Popover, or an ActionMenu on mobile.
+ * Supports controlled and uncontrolled modes.
+ * @interface SelectProps
+ */
+declare function ResponsiveSelectMenu<T extends object>({ label, name, isDisabled, disabledKeys, selectedKey, onSelectionChange, items, "data-testid": testId, children, }: SelectProps<T>): JSX_2.Element;
+
 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, 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? */
+    isClearable?: boolean;
+    /** Called when the input value changes. */
+    onChange?: (value: string) => void;
+    /** Called when the clear button is clicked. */
+    onClear?: () => void;
+    /** The initial value of the input. */
+    defaultValue?: string;
+    /** The current value of the input (for controlled usage) */
+    value?: string;
+}
+
 export { Section }
 
 export declare const Select: {
@@ -352,8 +433,7 @@ export declare const Select: {
 };
 
 /**
- * A Dropdown select menu that opens a Popover, or an ActionMenu on mobile.
- * Supports controlled and uncontrolled modes, and urlSearchParam syncing.
+ * A dropdown select menu that opens a popover. Supports controlled and uncontrolled modes.
  * @interface SelectProps
  */
 declare function SelectMenu<T extends object>({ label, name, isDisabled, disabledKeys, selectedKey, onSelectionChange, items, "data-testid": testId, children, }: SelectProps<T>): JSX_2.Element;
@@ -361,44 +441,29 @@ declare function SelectMenu<T extends object>({ label, name, isDisabled, disable
 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
-     */
+    /** Whether the select is disabled */
     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
-     */
+    /** Currently selected key */
     selectedKey?: string | number;
-    /** Callback fired when selection changes
-     * @prop {(key: string | number) => void} onSelectionChange
-     */
+    /** Callback fired when selection changes */
     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
-     */
+    /** Test ID for the select */
     "data-testid"?: string;
-    /** Children elements or render function
-     * @prop {CollectionChildren<T>} children
-     */
+    /** Children elements or render function */
     children: CollectionChildren<T>;
 }
 
@@ -605,4 +670,7 @@ declare namespace ButtonGroup {
 
 declare namespace ActionMenu {
     var Item: ({ name, to }: ActionMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    var List: ({ children }: {
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
 }