@lumx/react 4.10.0 → 4.11.0-alpha.1

package/index.d.ts

@@ -1,7 +1,7 @@
-import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Theme as Theme$1, Size as Size$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio as AspectRatio$1, Emphasis as Emphasis$1 } from '@lumx/core/js/constants';
+import { HorizontalAlignment as HorizontalAlignment$1, Orientation as Orientation$1, Alignment as Alignment$1, Size as Size$1, AspectRatio as AspectRatio$1, Kind as Kind$1, Emphasis as Emphasis$1, Theme as Theme$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps as GenericProps$1, HasTheme as HasTheme$1, ValueOf as ValueOf$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
+import { ValueOf as ValueOf$1, GenericProps as GenericProps$1, HasTheme as HasTheme$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaLabelOrLabelledBy as HasAriaLabelOrLabelledBy$1 } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, SetStateAction, Key, CSSProperties, ElementType as ElementType$1, HTMLInputTypeAttribute, ComponentProps, ImgHTMLAttributes, AriaAttributes as AriaAttributes$1 } from 'react';
@@ -39,260 +39,6 @@ type HasPolymorphicAs$1<E extends React.ElementType> = React.ComponentPropsWitho
     as?: E;
 };
 
-interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
-    /** Message variant. */
-    kind?: Kind$1;
-    /** Dialog title. */
-    title?: string;
-    /** Props forwarded to the confirm button */
-    confirmProps: ButtonProps & {
-        label: string;
-    };
-    /**
-     * Props forwarded to the cancel button.
-     * Will not render a cancel button if undefined.
-     */
-    cancelProps?: ButtonProps & {
-        label: string;
-    };
-    /**
-     * Children
-     */
-    children?: React__default.ReactNode;
-}
-/**
- * AlertDialog component.
- *
- * An alert dialog is a modal dialog that interrupts the user's workflow to
- * communicate an important message and acquire a response.
- *
- * It should not have a complex content.
- * Children of this component should only be strings, paragraphs or links.
- */
-declare const AlertDialog: Comp<AlertDialogProps, HTMLDivElement>;
-
-/**
- * Defines the props of the component.
- */
-interface AutocompleteProps extends GenericProps$1, HasTheme$1 {
-    /**
-     * Whether the suggestions list should display anchored to the input or to the wrapper.
-     * @see {@link DropdownProps#anchorToInput}
-     */
-    anchorToInput?: boolean;
-    /**
-     * Props to pass to the clear button (minus those already set by the TextField props).
-     * If not specified, the button won't be displayed.
-     * @see {@link TextFieldProps#clearButtonProps}
-     */
-    clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /**
-     * Reference to the <input> or <textarea> element.
-     * @see {@link TextFieldProps#inputRef}
-     */
-    inputRef?: TextFieldProps['inputRef'];
-    /**
-     * The offset that will be applied to the Dropdown position.
-     * @see {@link DropdownProps#offset}
-     */
-    offset?: Offset;
-    /**
-     * The preferred Dropdown location against the anchor element.
-     * @see {@link DropdownProps#placement}
-     */
-    placement?: Placement;
-    /**
-     * Manage dropdown width:
-     *   - `maxWidth`: dropdown not bigger than anchor
-     *   - `minWidth` or `true`: dropdown not smaller than anchor
-     *   - `width`: dropdown equal to the anchor.
-     * @see {@link DropdownProps#fitToAnchorWidth}
-     */
-    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
-    /**
-     * The error related to the component.
-     * @see {@link TextFieldProps#error}
-     */
-    error?: string | ReactNode;
-    /**
-     * Whether the text field is displayed with error style or not.
-     * @see {@link TextFieldProps#hasError}
-     */
-    hasError?: boolean;
-    /**
-     * Whether the text box should be focused upon closing the suggestions or not.
-     */
-    shouldFocusOnClose?: boolean;
-    /**
-     * The helper message of the text field.
-     * @see {@link TextFieldProps#helper}
-     */
-    helper?: string;
-    /**
-     * The icon of the text field (SVG path).
-     * @see {@link TextFieldProps#icon}
-     */
-    icon?: string;
-    /**
-     * Whether the component is disabled or not.
-     * @see {@link TextFieldProps#isDisabled}
-     */
-    isDisabled?: boolean;
-    /**
-     * Whether the component is required or not.
-     * @see {@link TextFieldProps#isRequired}
-     */
-    isRequired?: boolean;
-    /**
-     * Whether the text field is displayed with valid style or not.
-     * @see {@link TextFieldProps#isValid}
-     */
-    isValid?: boolean;
-    /**
-     * The label of the text field displayed in a label tag.
-     * @see {@link TextFieldProps#label}
-     */
-    label?: string;
-    /**
-     * The placeholder message of the text field.
-     * @see {@link TextFieldProps#placeholder}
-     */
-    placeholder?: string;
-    /** List of suggestions to display during autocomplete. */
-    children: React.ReactNode;
-    /**
-     * The list of chips to be displayed before the text field input.
-     */
-    chips?: React.ReactNode;
-    /**
-     * The value of the text field.
-     * @see {@link TextFieldProps#value}
-     */
-    value: string;
-    /**
-     * Whether the suggestions from the autocomplete should be displayed or not.
-     * @see {@link DropdownProps#isOpen}
-     */
-    isOpen: boolean;
-    /**
-     * The native input name property.
-     * @see {@link TextFieldProps#name}
-     */
-    name?: string;
-    /**
-     * Whether a click in the Autocomplete dropdown would close it or not.
-     * @see {@link DropdownProps#closeOnClick}
-     */
-    closeOnClick?: boolean;
-    /**
-     * Whether a click anywhere out of the Autocomplete would close it or not.
-     * @see {@link DropdownProps#closeOnClickAway}
-     */
-    closeOnClickAway?: boolean;
-    /**
-     * Whether an escape key press would close the Autocomplete or not.
-     * @see {@link DropdownProps#closeOnEscape}
-     */
-    closeOnEscape?: boolean;
-    /**
-     * Whether the focus should go back on the anchor when dropdown closes and focus is within.
-     * @see {@link DropdownProps#focusAnchorOnClose}
-     */
-    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
-    /**
-     * The function called on blur.
-     * @see {@link TextFieldProps#onBlur}
-     */
-    onBlur?(event: React.FocusEvent): void;
-    /**
-     * On change callback.
-     * @see {@link TextFieldProps#onChange}
-     */
-    onChange(value: string, name?: string, event?: SyntheticEvent): void;
-    /**
-     * The function called on close.
-     * @see {@link DropdownProps#onClose}
-     */
-    onClose?(): void;
-    /**
-     * The function called on focus.
-     * @see {@link TextFieldProps#onFocus}
-     */
-    onFocus?(event: React.FocusEvent): void;
-    /**
-     * The function called when the bottom of the dropdown is reached.
-     * @see {@link DropdownProps#onInfiniteScroll}
-     */
-    onInfiniteScroll?(): void;
-    /**
-     * Props forwarded to the underlying TextField component.
-     * Only the props not managed by the Autocomplete can be set.
-     * @see {@link TextFieldProps}
-     */
-    textFieldProps?: Partial<TextFieldProps>;
-}
-/**
- * Autocomplete component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const Autocomplete: Comp<AutocompleteProps, HTMLDivElement>;
-
-/**
- * Defines the props of the component.
- */
-interface AutocompleteMultipleProps extends AutocompleteProps {
-    /** Selected values. */
-    values: any[];
-    /** Alignment of the chips in the autocomplete. */
-    chipsAlignment?: HorizontalAlignment$1;
-    /** Selected value render function. Default: Renders the value inside of a Chip. */
-    selectedChipRender(choice: any, index: number, onClear?: (event?: React.MouseEvent, val?: any) => void, isDisabled?: boolean): ReactNode | string;
-}
-/**
- * AutocompleteMultiple component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
-
-/**
- * Require either `aria-label` or `arial-labelledby` prop.
- * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
- * needs a visible element.
- */
-type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
-    /**
-     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
-     * Although it is not recommended, aria-label can be used instead if no visible element is available.
-     */
-    'aria-labelledby': T;
-    /** The label of the dialog. */
-    'aria-label'?: undefined;
-} : {
-    'aria-label': string;
-    'aria-labelledby'?: undefined;
-};
-
-interface HasClassName {
-    /**
-     * Class name forwarded to the root element of the component.
-     */
-    className?: string;
-}
-
-interface HasCloseMode {
-    /**
-     * Choose how the children are hidden when closed
-     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
-     */
-    closeMode?: 'hide' | 'unmount';
-}
-
 /**
  * Alignments.
  */
@@ -480,121 +226,394 @@ type ColorVariant = ValueOf$1<typeof ColorVariant>;
 /** ColorPalette with all possible color variant combination */
 type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
 
-interface HasTheme {
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+    /**
+     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+     * Although it is not recommended, aria-label can be used instead if no visible element is available.
+     */
+    'aria-labelledby': T;
+    /** The label of the dialog. */
+    'aria-label'?: undefined;
+} : {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+};
+
+interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}
+
+interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}
+
+interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+
+/**
+ * Define a generic props types.
+ */
+interface GenericProps extends HasClassName {
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}
+
+/**
+ * Framework-agnostic type for renderable content.
+ * Vue components should cast VNode[] from slots to this type.
+ *
+ * Note: Uses type-only import to avoid runtime dependencies.
+ */
+type JSXElement = React__default.ReactNode;
+type ElementType = React__default.ElementType;
+
+/** Union type of all heading elements */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/** Union type of all text elements */
+type TextElement = 'span' | 'p' | HeadingElement;
+
+/** Get types of the values of a record. */
+type ValueOf<T extends Record<any, any>> = T[keyof T];
+
+/** Transform a string literal into kebab case */
+type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;
+
+/** Transform the component name into the lumx class name. */
+type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
+
+type HasRequiredLinkHref<E> = E extends 'a' ? {
+    href: string;
+} : Record<string, unknown>;
+
+type HasPolymorphicAs<E extends ElementType> = React__default.ComponentPropsWithoutRef<E> & {
+    /**
+     * Customize the rendered component.
+     */
+    as?: E;
+};
+
+type CommonRef = any;
+
+type Booleanish = boolean | 'true' | 'false';
+
+interface HasAriaDisabled {
+    /** Similar to `disabled` but does not block pointer events or focus */
+    'aria-disabled'?: Booleanish;
+}
+
+interface HasChecked<C = boolean> {
+    /** Component checked state. */
+    isChecked?: C;
+    /** @alias isChecked */
+    checked?: boolean;
+}
+
+interface HasDisabled {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** @alias isDisabled */
+    disabled?: boolean;
+}
+
+/**
+ * ARIA attributes type for components.
+ * All attributes are optional.
+ *
+ * This is a custom interface containing only the ARIA attributes
+ * actually used in the @lumx/core components, avoiding dependency on React types.
+ */
+interface AriaAttributes {
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    'aria-expanded'?: boolean | 'true' | 'false';
+    /** Indicates the availability and type of interactive popup element that can be triggered by the element. */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** Indicates the current "pressed" state of toggle buttons. */
+    'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'true' | 'false';
+    /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
+    'aria-disabled'?: boolean | 'true' | 'false';
+    /** Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. */
+    'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
+    /** Indicates whether items in a table or grid are sorted in ascending or descending order. */
+    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+}
+
+type FunctionSelector<TObject, TValue> = (o: TObject) => TValue;
+type FieldSelector<TObject, TValue> = keyof {
+    [TKey in keyof TObject as TObject[TKey] extends TValue ? TKey : never]: TObject[TKey];
+};
+/**
+ * Value selector on an object
+ * - either via an object key
+ * - or a selector function
+ */
+type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
+
+interface BaseDialogProps {
+    /** Footer content. */
+    footer?: JSXElement;
+    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
+    forceFooterDivider?: boolean;
+    /** Header content. */
+    header?: JSXElement;
+    /** Whether the divider between the dialog content and the header is always displayed (instead of showing it on scroll). */
+    forceHeaderDivider?: boolean;
+    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
+    isLoading?: boolean;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+}
+type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
+
+interface BaseAlertDialogProps {
+    /** Message variant. */
+    kind?: Kind;
+    /** Dialog title. */
+    title?: string;
+    /**
+     * Children
+     */
+    children?: JSXElement;
+}
+
+interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'>, BaseAlertDialogProps {
+    /** Props forwarded to the confirm button */
+    confirmProps: ButtonProps & {
+        label: string;
+    };
+    /**
+     * Props forwarded to the cancel button.
+     * Will not render a cancel button if undefined.
+     */
+    cancelProps?: ButtonProps & {
+        label: string;
+    };
+}
+/**
+ * AlertDialog component.
+ *
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
+ *
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
+ */
+declare const AlertDialog: Comp<AlertDialogProps, HTMLDivElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface AutocompleteProps extends GenericProps$1, HasTheme$1 {
+    /**
+     * Whether the suggestions list should display anchored to the input or to the wrapper.
+     * @see {@link DropdownProps#anchorToInput}
+     */
+    anchorToInput?: boolean;
+    /**
+     * Props to pass to the clear button (minus those already set by the TextField props).
+     * If not specified, the button won't be displayed.
+     * @see {@link TextFieldProps#clearButtonProps}
+     */
+    clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /**
+     * Reference to the <input> or <textarea> element.
+     * @see {@link TextFieldProps#inputRef}
+     */
+    inputRef?: TextFieldProps['inputRef'];
+    /**
+     * The offset that will be applied to the Dropdown position.
+     * @see {@link DropdownProps#offset}
+     */
+    offset?: Offset;
+    /**
+     * The preferred Dropdown location against the anchor element.
+     * @see {@link DropdownProps#placement}
+     */
+    placement?: Placement;
+    /**
+     * Manage dropdown width:
+     *   - `maxWidth`: dropdown not bigger than anchor
+     *   - `minWidth` or `true`: dropdown not smaller than anchor
+     *   - `width`: dropdown equal to the anchor.
+     * @see {@link DropdownProps#fitToAnchorWidth}
+     */
+    fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];
+    /**
+     * The error related to the component.
+     * @see {@link TextFieldProps#error}
+     */
+    error?: string | ReactNode;
+    /**
+     * Whether the text field is displayed with error style or not.
+     * @see {@link TextFieldProps#hasError}
+     */
+    hasError?: boolean;
+    /**
+     * Whether the text box should be focused upon closing the suggestions or not.
+     */
+    shouldFocusOnClose?: boolean;
+    /**
+     * The helper message of the text field.
+     * @see {@link TextFieldProps#helper}
+     */
+    helper?: string;
+    /**
+     * The icon of the text field (SVG path).
+     * @see {@link TextFieldProps#icon}
+     */
+    icon?: string;
+    /**
+     * Whether the component is disabled or not.
+     * @see {@link TextFieldProps#isDisabled}
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the component is required or not.
+     * @see {@link TextFieldProps#isRequired}
+     */
+    isRequired?: boolean;
     /**
-     * Theme adapting the component to light or dark background.
+     * Whether the text field is displayed with valid style or not.
+     * @see {@link TextFieldProps#isValid}
      */
-    theme?: Theme;
-}
-
-/**
- * Define a generic props types.
- */
-interface GenericProps extends HasClassName {
+    isValid?: boolean;
     /**
-     * Any prop (particularly any supported prop for a HTML element).
+     * The label of the text field displayed in a label tag.
+     * @see {@link TextFieldProps#label}
      */
-    [propName: string]: any;
+    label?: string;
+    /**
+     * The placeholder message of the text field.
+     * @see {@link TextFieldProps#placeholder}
+     */
+    placeholder?: string;
+    /** List of suggestions to display during autocomplete. */
+    children: React.ReactNode;
+    /**
+     * The list of chips to be displayed before the text field input.
+     */
+    chips?: React.ReactNode;
+    /**
+     * The value of the text field.
+     * @see {@link TextFieldProps#value}
+     */
+    value: string;
+    /**
+     * Whether the suggestions from the autocomplete should be displayed or not.
+     * @see {@link DropdownProps#isOpen}
+     */
+    isOpen: boolean;
+    /**
+     * The native input name property.
+     * @see {@link TextFieldProps#name}
+     */
+    name?: string;
+    /**
+     * Whether a click in the Autocomplete dropdown would close it or not.
+     * @see {@link DropdownProps#closeOnClick}
+     */
+    closeOnClick?: boolean;
+    /**
+     * Whether a click anywhere out of the Autocomplete would close it or not.
+     * @see {@link DropdownProps#closeOnClickAway}
+     */
+    closeOnClickAway?: boolean;
+    /**
+     * Whether an escape key press would close the Autocomplete or not.
+     * @see {@link DropdownProps#closeOnEscape}
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the focus should go back on the anchor when dropdown closes and focus is within.
+     * @see {@link DropdownProps#focusAnchorOnClose}
+     */
+    focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];
+    /**
+     * The function called on blur.
+     * @see {@link TextFieldProps#onBlur}
+     */
+    onBlur?(event: React.FocusEvent): void;
+    /**
+     * On change callback.
+     * @see {@link TextFieldProps#onChange}
+     */
+    onChange(value: string, name?: string, event?: SyntheticEvent): void;
+    /**
+     * The function called on close.
+     * @see {@link DropdownProps#onClose}
+     */
+    onClose?(): void;
+    /**
+     * The function called on focus.
+     * @see {@link TextFieldProps#onFocus}
+     */
+    onFocus?(event: React.FocusEvent): void;
+    /**
+     * The function called when the bottom of the dropdown is reached.
+     * @see {@link DropdownProps#onInfiniteScroll}
+     */
+    onInfiniteScroll?(): void;
+    /**
+     * Props forwarded to the underlying TextField component.
+     * Only the props not managed by the Autocomplete can be set.
+     * @see {@link TextFieldProps}
+     */
+    textFieldProps?: Partial<TextFieldProps>;
 }
-
 /**
- * Framework-agnostic type for renderable content.
- * Vue components should cast VNode[] from slots to this type.
+ * Autocomplete component.
  *
- * Note: Uses type-only import to avoid runtime dependencies.
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-type JSXElement = React__default.ReactNode;
-type ElementType = React__default.ElementType;
-
-/** Union type of all heading elements */
-type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
-/** Union type of all text elements */
-type TextElement = 'span' | 'p' | HeadingElement;
-
-/** Get types of the values of a record. */
-type ValueOf<T extends Record<any, any>> = T[keyof T];
-
-/** Transform a string literal into kebab case */
-type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;
-
-/** Transform the component name into the lumx class name. */
-type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
-
-type HasRequiredLinkHref<E> = E extends 'a' ? {
-    href: string;
-} : Record<string, unknown>;
-
-type HasPolymorphicAs<E extends ElementType> = React__default.ComponentPropsWithoutRef<E> & {
-    /**
-     * Customize the rendered component.
-     */
-    as?: E;
-};
-
-type CommonRef = any;
-
-type Booleanish = boolean | 'true' | 'false';
-
-interface HasAriaDisabled {
-    /** Similar to `disabled` but does not block pointer events or focus */
-    'aria-disabled'?: Booleanish;
-}
-
-interface HasChecked<C = boolean> {
-    /** Component checked state. */
-    isChecked?: C;
-    /** @alias isChecked */
-    checked?: boolean;
-}
-
-interface HasDisabled {
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** @alias isDisabled */
-    disabled?: boolean;
-}
+declare const Autocomplete: Comp<AutocompleteProps, HTMLDivElement>;
 
 /**
- * ARIA attributes type for components.
- * All attributes are optional.
- *
- * This is a custom interface containing only the ARIA attributes
- * actually used in the @lumx/core components, avoiding dependency on React types.
+ * Defines the props of the component.
  */
-interface AriaAttributes {
-    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
-    'aria-expanded'?: boolean | 'true' | 'false';
-    /** Indicates the availability and type of interactive popup element that can be triggered by the element. */
-    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
-    /** Indicates the current "pressed" state of toggle buttons. */
-    'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
-    /** Defines a string value that labels the current element. */
-    'aria-label'?: string;
-    /** Identifies the element (or elements) that labels the current element. */
-    'aria-labelledby'?: string;
-    /** Identifies the element (or elements) that describes the object. */
-    'aria-describedby'?: string;
-    /** Indicates whether the element is exposed to an accessibility API. */
-    'aria-hidden'?: boolean | 'true' | 'false';
-    /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
-    'aria-disabled'?: boolean | 'true' | 'false';
-    /** Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. */
-    'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
-    /** Indicates whether items in a table or grid are sorted in ascending or descending order. */
-    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+interface AutocompleteMultipleProps extends AutocompleteProps {
+    /** Selected values. */
+    values: any[];
+    /** Alignment of the chips in the autocomplete. */
+    chipsAlignment?: HorizontalAlignment$1;
+    /** Selected value render function. Default: Renders the value inside of a Chip. */
+    selectedChipRender(choice: any, index: number, onClear?: (event?: React.MouseEvent, val?: any) => void, isDisabled?: boolean): ReactNode | string;
 }
-
-type FunctionSelector<TObject, TValue> = (o: TObject) => TValue;
-type FieldSelector<TObject, TValue> = keyof {
-    [TKey in keyof TObject as TObject[TKey] extends TValue ? TKey : never]: TObject[TKey];
-};
 /**
- * Value selector on an object
- * - either via an object key
- * - or a selector function
+ * AutocompleteMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-type Selector<TObject, TValue = string> = FieldSelector<TObject, TValue> | FunctionSelector<TObject, TValue>;
+declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
 
 /**
  * Avatar sizes.
@@ -1018,61 +1037,50 @@ declare const ChipGroup: Comp<ChipGroupProps, HTMLDivElement> & {
     useChipGroupNavigation: useChipGroupNavigationType<any>;
 };
 
-interface SelectionChipGroupProps<O> extends GenericProps$1 {
-    /**
-     * Option object id selector (either the property name or a function to get the id)
-     */
+/**
+ * Defines the props of the component.
+ */
+interface SelectionChipGroupProps$1<O> extends HasClassName, HasTheme {
+    /** Option object id selector (either a property name or a function to get the id) */
     getOptionId: Selector<O>;
-    /**
-     * Option object name selector (either the property name or a function to get the name)
-     * Fallbacks on the ID if not defined
-     */
+    /** Option object name selector. Falls back to the id if not defined */
     getOptionName?: Selector<O, string | undefined | null>;
-    /**
-     * Selected options array
-     */
+    /** Selected options array */
     value?: O[];
-    /**
-     * Callback on option array selected
-     */
+    /** Label for accessibility (aria-label on the listbox) */
+    label: string;
+    /** Label for the remove action (visually hidden text appended to each chip) */
+    chipRemoveLabel?: string;
+    /** Disabled state for all chips */
+    isDisabled?: boolean;
+    /** Customize chip props per option */
+    getChipProps?: (option: O) => Partial<ChipProps$1>;
+    /** Ref for the container element */
+    ref?: any;
+}
+
+/**
+ * Defines the props of the component.
+ */
+interface SelectionChipGroupProps<O> extends GenericProps$1, ReactToJSX<SelectionChipGroupProps$1<O>> {
+    /** Callback on option array selected */
     onChange?(newValue?: O[]): void;
-    /**
-     * Input ref to restore focus
-     */
+    /** Input ref to restore focus */
     inputRef?: React__default.RefObject<HTMLInputElement>;
-    /**
-     * Input label, used to generate the chip group aria description
-     */
-    inputLabel?: string;
-    /**
-     * Customize how chips should render
-     */
+    /** Customize how chips should render (return a <Chip> element to override chip props) */
     renderChip?: (option: O) => React__default.ReactNode;
-    /**
-     * Scope for tracking purposes
-     */
-    scope?: string;
-    /**
-     * LumX theme
-     */
-    theme?: Theme$1;
-    /**
-     * Disabled state
-     */
-    isDisabled?: boolean;
-    /** label to be used for accessibility purposes */
-    label: string;
-    /** callback for generating the tooltip for each individual chip */
-    chipTooltipLabel: (chip: string) => string;
 }
 /**
  * SelectionChipGroup component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
  * @return React element.
  */
-declare const SelectionChipGroup: <O>({ onChange, value, getOptionId, getOptionName, inputRef, inputLabel, renderChip, theme, isDisabled, chipTooltipLabel, label, ...forwardedProps }: SelectionChipGroupProps<O>) => react_jsx_runtime.JSX.Element;
+declare const SelectionChipGroup: {
+    <O>({ onChange, value, getOptionId, getOptionName, inputRef, renderChip, getChipProps: getChipPropsProp, theme, isDisabled, label, chipRemoveLabel, ...forwardedProps }: SelectionChipGroupProps<O>): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+    className: "lumx-selection-chip-group";
+};
 
 type Listener = (evt: KeyboardEvent) => void;
 interface UseKeyboardListNavigationType {
@@ -1781,6 +1789,8 @@ interface InputLabelProps$1 extends HasClassName, HasTheme {
     children: JSXElement;
     /** Native htmlFor property. */
     htmlFor: string;
+    /** Native id property. */
+    id?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** ref to the root element */
@@ -1813,6 +1823,8 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     helperId?: string;
     /** Generated error id for accessibility attributes. */
     errorId?: string;
+    /** Generated label id for accessibility attributes (used to link the clear button to the field label). */
+    labelId?: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
     /** Whether the text field is displayed with valid style or not. */
@@ -1842,7 +1854,7 @@ interface TextFieldProps$1 extends HasClassName, HasTheme, HasAriaDisabled, HasD
     /** Ref to the component root. */
     ref?: CommonRef;
 }
-type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'isAnyDisabled' | 'isFocus';
+type TextFieldPropsToOverride = 'input' | 'IconButton' | 'labelProps' | 'textFieldRef' | 'clearButtonProps' | 'helperId' | 'errorId' | 'labelId' | 'isAnyDisabled' | 'isFocus';
 
 /**
  * Defines the props of the component.
@@ -1950,13 +1962,22 @@ interface ComboboxInputProps extends TextFieldProps {
         value: string;
     }) => void;
     /**
-     * When true (default), the combobox automatically filters options as the user types.
-     * Each `Combobox.Option` registers itself and hides when it doesn't match the input value.
+     * Controls how the combobox filters options as the user types.
+     *
+     * - `'auto'` (default) — Options are automatically filtered client-side.
+     * - `'manual'` — Filtering is the consumer's responsibility.
+     * - `'off'` — Like `'manual'`, but the input is rendered as `readOnly`
+     *   and `openOnFocus` defaults to `true`.
+     */
+    filter?: 'auto' | 'manual' | 'off';
+    /**
+     * When true, the combobox opens automatically when the input receives focus.
+     * When false (default, unless `filter` is `'off'`), the combobox only opens
+     * on click, typing, or keyboard navigation.
      *
-     * Set to false when you handle filtering yourself (e.g. async search, consumer-side
-     * pre-filtering). Options will not be auto-filtered.
+     * @default false (true when filter is 'off')
      */
-    autoFilter?: boolean;
+    openOnFocus?: boolean;
 }
 
 /**
@@ -2282,19 +2303,7 @@ declare const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface DialogProps extends GenericProps$1, HasCloseMode$1 {
-    /** Footer content. */
-    footer?: ReactNode;
-    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
-    forceFooterDivider?: boolean;
-    /** Header content. */
-    header?: ReactNode;
-    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */
-    forceHeaderDivider?: boolean;
-    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */
-    isLoading?: boolean;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
+interface DialogProps extends GenericProps$1, HasCloseMode$1, BaseDialogProps {
     /** Reference to the parent element that triggered modal opening (will get back focus on close). */
     parentElement?: RefObject<HTMLElement>;
     /** Reference to the dialog content element. */
@@ -2322,7 +2331,7 @@ interface DialogProps extends GenericProps$1, HasCloseMode$1 {
     /** Children */
     children?: React__default.ReactNode;
 }
-type DialogSizes = Extract<Size$1, 'tiny' | 'regular' | 'big' | 'huge'>;
+
 /**
  * Dialog component.
  *