@kubit-ui-web/react-components 2.0.0-beta.21 → 2.0.0-beta.23

package/dist/types/index.d.ts

@@ -454,7 +454,7 @@ export declare interface BreadcrumbsStandAloneProps extends BreadcrumbAriaAttrib
     id?: string;
     crumbs: BreadcrumbProps[];
     minCharLimit?: number;
-    dividerIcon?: ElementOrIconProps;
+    dividerIcon?: CommonIconProps;
     lastOneCrumbComponent?: TextComponentType;
     cssClasses?: BreadcrumbsCssClasses;
 }
@@ -478,7 +478,7 @@ export declare interface BreadcrumbStandAloneProps extends DataAttributes {
     crumb: BreadcrumbProps;
     lastCrumb?: boolean;
     lastOneCrumbComponent?: TextComponentType;
-    dividerIcon?: ElementOrIconProps;
+    dividerIcon?: CommonIconProps;
 }
 
 export declare type BreadcrumbsVariantStyles<Variant extends string> = BreadcrumbsStyleProps & {
@@ -556,7 +556,7 @@ export declare interface ButtonProps<Variant = undefined extends string | unknow
 export declare interface ButtonStandAloneProps extends PropsWithChildren<ButtonStylesProps>, ButtonAriaProps, DataAttributes {
     type?: HTMLButtonElement['type'];
     onClick?: MouseEventHandler<HTMLButtonElement>;
-    icon?: ElementOrIconProps;
+    icon?: CommonIconProps;
     form?: string;
     role?: AriaRole;
     title?: string;
@@ -729,87 +729,121 @@ export declare type CalendarVariantStyles<Variant extends string> = CalendarStyl
 };
 
 /**
- * CardImage component for displaying an image card with responsive and theme support.
+ * Card component for displaying content in a structured container.
+ *
+ * This component wraps content in a styled card with optional header, content, and footer sections.
+ * It is useful for organizing information, displaying items in a list, or creating selectable cards.
+ * Supports interactive states (hover, selected) and custom theming via variants.
  *
- * This component is useful for rendering images in a card layout, adapting its style
- * based on the current device and variant. It leverages generics to allow custom variant
- * types, enabling flexible theming and styling.
+ * All sections (header, content, footer) are optional and can accept either text or any React node.
+ * The card can respond to user interaction through onClick, onMouseEnter, and onMouseLeave handlers.
  *
- * Internally, it uses {@link CardImageStandAlone} and injects device and CSS class information.
+ * Internally, it computes CSS classes using a custom hook and delegates rendering to {@link CardStandAlone}.
  *
- * The generic type parameter `<Variant extends string>` allows you to define your own variant
- * types for more precise theming.
+ * This component accepts a generic type parameter `<Variant extends string>` to allow for custom variant values,
+ * enabling flexible theming and styling.
  *
  * @example
  * ```tsx
- * <CardImage variant="primary" />
+ * <Card
+ *   header={{ content: "Card Title" }}
+ *   content="This is the card content"
+ *   footer={{ content: "Footer information" }}
+ * />
  *
  * // With a custom variant type:
- * type MyVariant = "rounded" | "square";
- * <CardImage<MyVariant> variant="rounded" />
+ * type MyVariant = "primary" | "secondary";
+ * <Card<MyVariant>
+ *   header="Primary Card"
+ *   content={<div>Custom content</div>}
+ *   variant="primary"
+ *   state="selected"
+ * />
  * ```
  */
-export declare const CardImage: ForwardRefExoticComponent<CardImageProps<string> & RefAttributes<HTMLDivElement>>;
-
-declare type CardImageCssClasses = ComponentSelected<ComponentsTypesComponents['CARD_IMAGE']>;
+export declare const Card: ForwardRefExoticComponent<CardProps<string> & RefAttributes<HTMLDivElement>>;
 
-/**
- * Represents the type for a link within the CardImage component.
- * Extends the LinkProps interface and includes content.
- */
-export declare type CardImageLinkProps = Omit<LinkProps, 'children'> & {
-    content: string;
-};
+declare type CardCssClasses = ComponentSelected<ComponentsTypesComponents['CARD']>;
 
 /**
- * Interface for the CardImage component with a variant.
- * Extends the CardImageStandAloneProps interface and adds a variant and additional CSS classes.
+ * Interface for the card component with a variant.
+ * Extends the ICardStandAlone interface and adds a variant and additional CSS classes.
  *
- * @template Variant - The type of the variant for the CardImage.
+ * @template Variant - The type of the variant for the card.
  */
-export declare interface CardImageProps<Variant = undefined extends string ? unknown : string> extends Omit<CardImageStandAloneProps, 'device'> {
+export declare interface CardProps<Variant extends string | unknown> extends Omit<CardStandAloneProps, 'cssClasses'> {
     variant?: Variant;
-    additionalClasses?: CardImageCssClasses;
+    additionalClasses?: Partial<CardCssClasses>;
 }
 
 /**
- * Represents the type for responsive images based on device breakpoints.
+ * Standalone card component for rendering a section with optional header, content and footer areas.
+ *
+ * This component displays a styled card container with three optional sections:
+ * - header: Can be text or any React node
+ * - content: Can be text or any React node
+ * - footer: Can be text or any React node
+ *
+ * Supports interactive states like hover and selected, making it useful for
+ * selectable cards, clickable items, or informational panels.
+ *
+ * This component accepts a generic type parameter `<Variant extends string>` to allow for custom variant values,
+ * enabling flexible theming and styling of the card.
+ *
+ * @example
+ * ```tsx
+ * <CardStandAlone
+ *   header={{ content: "Card Title" }}
+ *   content="Card content goes here"
+ *   footer={{ content: "Footer text" }}
+ * />
+ *
+ * // With a custom variant type:
+ * type MyVariant = "primary" | "secondary";
+ * <CardStandAlone<MyVariant>
+ *   header="Primary Card"
+ *   content={<div>Custom content</div>}
+ *   variant="primary"
+ *   state="selected"
+ * />
+ * ```
  */
-declare interface CardImageResponsiveImages {
-    [DEVICE_BREAKPOINTS.DESKTOP]: string;
-    [DEVICE_BREAKPOINTS.MOBILE]: string;
-    [DEVICE_BREAKPOINTS.TABLET]: string;
-}
+export declare const CardStandAlone: ForwardRefExoticComponent<CardStandAloneProps & RefAttributes<HTMLDivElement>>;
 
 /**
- * Interface for the standalone CardImage component.
- * Includes responsive images, title, description, optional link, and CSS classes.
+ * Interface for the standalone card component.
+ * It includes optional custom CSS classes, header, content, footer sections and interactive states.
  */
-export declare interface CardImageStandAloneProps extends DataAttributes {
-    image: CardImageResponsiveImages;
-    title: CommonTextProps;
-    description?: CommonTextProps;
-    link?: CardImageLinkProps;
-    device: string;
-    imageAltText?: string;
-    component?: string | React.ElementType;
-    onClick?: React.MouseEventHandler;
-    cssClasses?: CardImageCssClasses;
+export declare interface CardStandAloneProps extends DataAttributes {
+    cssClasses?: CardCssClasses;
+    header?: CommonTextProps | ReactNode;
+    content?: CommonTextProps | ReactNode;
+    footer?: CommonTextProps | ReactNode;
+    state?: StateType;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
 
-export declare interface CardImageStyleProps extends CssLibPropsType {
-    _imageContainer?: CssLibPropsType;
+/**
+ * Interface representing the styles for the card component.
+ */
+export declare interface CardStyleProps extends CssLibPropsType {
+    _header?: CssLibPropsType;
     _content?: CssLibPropsType;
-    _textContainer?: CssLibPropsType;
-    _titleContainer?: CssLibPropsType;
-    _title?: CssLibPropsType;
-    _descriptionContainer?: CssLibPropsType;
-    _description?: CssLibPropsType;
-    _linkContainer?: CssLibPropsType;
+    _footer?: CssLibPropsType;
+    $pseudo?: {
+        hover?: CssLibPropsType;
+    };
 }
 
-export declare type CardImageVariantStyles<Variant extends string> = CardImageStyleProps & {
-    [key in Variant]?: CardImageStyleProps;
+/**
+ * Type representing the styles for different variants of the card component.
+ *
+ * @template Variant - The type of the variant keys.
+ */
+export declare type CardVariantStyles<Variant extends string> = CardStyleProps & {
+    [key in Variant]: CardStyleProps;
 };
 
 export declare const Carousel: ForwardRefExoticComponent<Omit<ICarousel, "ref"> & RefAttributes<CarouselRefType>>;
@@ -1128,7 +1162,7 @@ declare type ComponentSelected<T> = Pick<T, NonVariablesKeys<T>>;
 
 declare type ComponentSelected_2<T> = Pick<T, NonVariablesKeys_2<T>>;
 
-declare type ComponentsTypesAvailableComponents = 'ACCORDION' | 'ALERT' | 'AVATAR' | 'BADGE' | 'BREADCRUMBS' | 'BUTTON' | 'CALENDAR' | 'CARD_IMAGE' | 'CAROUSEL' | 'CHECKBOX' | 'CHECKBOX_BASE' | 'CHIP' | 'CONTAINER' | 'DATA_TABLE' | 'DOT' | 'DROPDOWN_SELECTED' | 'ERROR_MESSAGE' | 'ICON' | 'INPUT' | 'INPUT_BASE' | 'INPUT_DECORATION' | 'INPUT_SIGNATURE' | 'ITEM_ROVE' | 'LINK' | 'LINK_AS_BUTTON' | 'LIST_OPTIONS' | 'MODAL' | 'OPTION' | 'OVERLAY' | 'PAGE_CONTROL' | 'PAGINATION' | 'POPOVER' | 'PROGRESS_BAR' | 'RADIO_BUTTON' | 'SELECTOR_BOX_FILE' | 'SKELETON' | 'SLIDER' | 'SNACKBAR' | 'STEPPER_NUMBER' | 'TABLE' | 'TABLE_BODY' | 'TABLE_CAPTION' | 'TABLE_CELL' | 'TABLE_DIVIDER' | 'TABLE_FOOT' | 'TABLE_HEAD' | 'TABLE_ROW' | 'TABS' | 'TAG' | 'TEXT' | 'TEXT_AREA' | 'TEXT_COUNT' | 'TOGGLE' | 'TOOLTIP' | 'VIRTUAL_KEYBOARD';
+declare type ComponentsTypesAvailableComponents = 'ACCORDION' | 'ALERT' | 'AVATAR' | 'BADGE' | 'BREADCRUMBS' | 'BUTTON' | 'CALENDAR' | 'CARD' | 'CAROUSEL' | 'CHECKBOX' | 'CHECKBOX_BASE' | 'CHIP' | 'CONTAINER' | 'DATA_TABLE' | 'DOT' | 'ERROR_MESSAGE' | 'ICON' | 'INPUT' | 'INPUT_BASE' | 'INPUT_DECORATION' | 'INPUT_SIGNATURE' | 'ITEM_ROVE' | 'LINK' | 'LINK_AS_BUTTON' | 'LIST_OPTIONS' | 'MODAL' | 'OPTION' | 'OVERLAY' | 'PAGE_CONTROL' | 'PAGINATION' | 'POPOVER' | 'PROGRESS_BAR' | 'RADIO_BUTTON' | 'SELECT' | 'SELECTOR_BOX_FILE' | 'SKELETON' | 'SLIDER' | 'SNACKBAR' | 'STEPPER_NUMBER' | 'TABLE' | 'TABLE_BODY' | 'TABLE_CAPTION' | 'TABLE_CELL' | 'TABLE_DIVIDER' | 'TABLE_FOOT' | 'TABLE_HEAD' | 'TABLE_ROW' | 'TABS' | 'TAG' | 'TEXT' | 'TEXT_AREA' | 'TEXT_COUNT' | 'TOGGLE' | 'TOOLTIP' | 'VIRTUAL_KEYBOARD';
 
 declare type ComponentsTypesComponents = {
     ACCORDION: {
@@ -1244,26 +1278,26 @@ declare type ComponentsTypesComponents = {
             button: string;
             icon: string;
         };
-        $_action_primary: {
+        $_alternative: {
             button: string;
         };
-        $_action_secondary: {
+        $_ghost_alt: {
             button: string;
         };
-        $_action_secondary_alt: {
+        $_ghost_primary: {
             button: string;
         };
-        $_primary: {
+        $_ghost_secondary: {
             button: string;
         };
-        $_secondary: {
+        $_primary: {
             button: string;
         };
-        $_secondary_alt: {
+        $_secondary: {
             button: string;
         };
         dynamic_values: (styles: {
-            $alignText: string;
+            '$alignText': string;
         }) => {
             string: string;
             object: object;
@@ -1306,22 +1340,16 @@ declare type ComponentsTypesComponents = {
             loader: string;
         };
     };
-    CARD_IMAGE: {
-        card_image: string;
+    CARD: {
+        card: string;
         content: string;
-        description: string;
-        descriptioncontainer: string;
-        imagecontainer: string;
-        linkcontainer: string;
-        textcontainer: string;
-        title: string;
-        titlecontainer: string;
-        $_alternative: {
-            card_image: string;
-        };
+        footer: string;
+        header: string;
         $_default: {
-            card_image: string;
-            description: string;
+            card: string;
+            content: string;
+            footer: string;
+            header: string;
         };
     };
     CAROUSEL: {
@@ -1486,51 +1514,6 @@ declare type ComponentsTypesComponents = {
             dot: string;
         };
     };
-    DROPDOWN_SELECTED: {
-        dropdown_selected: string;
-        buttonorlinkcontainer: string;
-        iconclosed: string;
-        iconopened: string;
-        labelclosed: string;
-        labelopened: string;
-        listoptionscontainer: string;
-        $_default: {
-            dropdown_selected: string;
-            buttonorlinkcontainer: string;
-            iconclosed: string;
-            iconopened: string;
-            labelclosed: string;
-            labelopened: string;
-            listoptionscontainer: string;
-        };
-        $_side_menu: {
-            dropdown_selected: string;
-            buttonorlinkcontainer: string;
-            iconclosed: string;
-            iconopened: string;
-            labelclosed: string;
-            labelopened: string;
-            listoptionscontainer: string;
-        };
-        $_topbar: {
-            dropdown_selected: string;
-            buttonorlinkcontainer: string;
-            iconclosed: string;
-            iconopened: string;
-            labelclosed: string;
-            labelopened: string;
-            listoptionscontainer: string;
-        };
-        $_topbar_tab: {
-            dropdown_selected: string;
-            buttonorlinkcontainer: string;
-            iconclosed: string;
-            iconopened: string;
-            labelclosed: string;
-            labelopened: string;
-            listoptionscontainer: string;
-        };
-    };
     ERROR_MESSAGE: {
         error_message: string;
         icon: string;
@@ -1544,11 +1527,11 @@ declare type ComponentsTypesComponents = {
         complex: string;
         svg: string;
         dynamic_values: (styles: {
-            $color: string;
-            $moveAround: string;
-            $transitionDuration: string;
-            $height: string;
-            $width: string;
+            '$color': string;
+            '$moveAround': string;
+            '$transitionDuration': string;
+            '$height': string;
+            '$width': string;
         }) => {
             string: string;
             object: object;
@@ -1852,6 +1835,51 @@ declare type ComponentsTypesComponents = {
             tooltipasmodal: string;
         };
     };
+    SELECT: {
+        select: string;
+        buttonorlinkcontainer: string;
+        iconclosed: string;
+        iconopened: string;
+        labelclosed: string;
+        labelopened: string;
+        listoptionscontainer: string;
+        $_default: {
+            select: string;
+            buttonorlinkcontainer: string;
+            iconclosed: string;
+            iconopened: string;
+            labelclosed: string;
+            labelopened: string;
+            listoptionscontainer: string;
+        };
+        $_side_menu: {
+            select: string;
+            buttonorlinkcontainer: string;
+            iconclosed: string;
+            iconopened: string;
+            labelclosed: string;
+            labelopened: string;
+            listoptionscontainer: string;
+        };
+        $_topbar: {
+            select: string;
+            buttonorlinkcontainer: string;
+            iconclosed: string;
+            iconopened: string;
+            labelclosed: string;
+            labelopened: string;
+            listoptionscontainer: string;
+        };
+        $_topbar_tab: {
+            select: string;
+            buttonorlinkcontainer: string;
+            iconclosed: string;
+            iconopened: string;
+            labelclosed: string;
+            labelopened: string;
+            listoptionscontainer: string;
+        };
+    };
     SELECTOR_BOX_FILE: {
         selector_box_file: string;
         actionicon: string;
@@ -2031,18 +2059,18 @@ declare type ComponentsTypesComponents = {
             table_cell: string;
         };
         dynamic_values: (styles: {
-            $tdWidth: string;
-            $tdHeight: string;
-            $tdMinWidth: string;
-            $tdMaxWidth: string;
-            $tdTextAlign: string;
-            $tdVerticalAlign: string;
-            $tdAlignItems: string;
-            $tdJustifyContent: string;
-            $tdTop: string;
-            $tdLeft: string;
-            $tdRight: string;
-            $tdBottom: string;
+            '$tdWidth': string;
+            '$tdHeight': string;
+            '$tdMinWidth': string;
+            '$tdMaxWidth': string;
+            '$tdTextAlign': string;
+            '$tdVerticalAlign': string;
+            '$tdAlignItems': string;
+            '$tdJustifyContent': string;
+            '$tdTop': string;
+            '$tdLeft': string;
+            '$tdRight': string;
+            '$tdBottom': string;
         }) => {
             string: string;
             object: object;
@@ -3304,124 +3332,6 @@ export declare type DotThemeStyles<variant extends string, size extends string>
     [s in size]: CssLibPropsType;
 };
 
-/**
- * Uncontrolled dropdown component for displaying selectable options.
- *
- * This component manages its own open/close state and selected option internally, so you do not need
- * to control the dropdown state from the parent. It is useful when you want a simple dropdown that handles
- * its own toggle and selection logic. You can optionally receive state changes via callbacks.
- *
- * Internally, it wraps {@link DropdownSelectedControlled} and passes the necessary props.
- *
- * @example
- * ```tsx
- * <DropdownSelectedUnControlled defaultOpen />
- * ```
- */
-export declare const DropdownSelected: ForwardRefExoticComponent<DropdownSelectedUnControlledProps & RefAttributes<HTMLDivElement>>;
-
-/**
- * Controlled dropdown component for displaying selectable options.
- *
- * This component renders a dropdown that is fully controlled by its parent, allowing for custom open/close logic,
- * keyboard navigation, and flexible theming. It is useful when you need to manage the dropdown state and behavior externally.
- *
- * Internally, it wraps {@link DropdownSelectedStandAlone} and handles keyboard focus and scroll-based closing.
- * Accepts a generic type parameter `<Variant extends string>` to allow for custom variant values, enabling flexible styling.
- *
- * @example
- * ```tsx
- * <DropdownSelectedControlled open listOptions={options} />
- *
- * // With a custom variant type:
- * type MyVariant = "primary" | "secondary";
- * <DropdownSelectedControlled<MyVariant> variant="primary" open listOptions={options} />
- * ```
- */
-export declare const DropdownSelectedControlled: ForwardRefExoticComponent<DropdownSelectedControlledProps<string> & RefAttributes<HTMLDivElement>>;
-
-/**
- * Interface for the controlled DropdownSelected component.
- * Extends the DropdownSelectedStandAloneProps interface and adds a variant and additional CSS classes.
- *
- * @template Variant - The type of the variant for the DropdownSelected.
- */
-export declare interface DropdownSelectedControlledProps<Variant = undefined extends string ? unknown : string> extends Omit<DropdownSelectedStandAloneProps, 'listOptionsRef' | 'onButtonKeyDown' | 'component'> {
-    variant?: Variant;
-    additionalClasses?: Partial<DropdownSelectedCssClasses>;
-}
-
-declare type DropdownSelectedCssClasses = ComponentSelected<ComponentsTypesComponents['DROPDOWN_SELECTED']>;
-
-/**
- * Represents the type for the list options in the DropdownSelected component.
- */
-export declare type DropdownSelectedListOptionsProps = Omit<ListOptionsProps, 'selectedValue' | 'onOptionClick'>;
-
-declare type DropdownSelectedOmittedProps = 'buttonOrLinkRef' | 'open' | 'onButtonClick' | 'optionSelected' | 'onOptionClick' | 'onClosePopover' | 'onMouseEnter' | 'onMouseLeave' | 'onBlur' | 'onFocus' | 'onKeyDown';
-
-/**
- * Represents the type for the popover in the DropdownSelected component.
- */
-export declare type DropdownSelectedPopoverProps = Omit<IPopover, 'children' | 'open'>;
-
-/**
- * Interface for the standalone DropdownSelected component.
- * Includes properties for state, event handlers, and CSS classes.
- */
-export declare interface DropdownSelectedStandAloneProps extends DataAttributes {
-    open: boolean;
-    popover?: DropdownSelectedPopoverProps;
-    onButtonClick: MouseEventHandler<HTMLButtonElement | HTMLLinkElement>;
-    onButtonKeyDown: KeyboardEventHandler<HTMLButtonElement | HTMLLinkElement>;
-    onClosePopover: () => void;
-    label: CommonTextProps;
-    icon: ElementOrIconProps;
-    listOptions: DropdownSelectedListOptionsProps;
-    optionSelected?: string;
-    onOptionClick: (value: string) => void;
-    listOptionsRef: RefObject<HTMLDivElement>;
-    closePopoverOnScroll?: boolean;
-    openAndCloseOnHover?: boolean;
-    url?: string;
-    urlTarget?: HTMLAttributeAnchorTarget;
-    component: 'button' | GenericLinkType;
-    buttonOrLinkRef?: RefObject<HTMLButtonElement>;
-    onFocus?: FocusEventHandler<HTMLDivElement>;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
-    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
-    cssClasses?: DropdownSelectedCssClasses;
-}
-
-export declare interface DropdownSelectedStyleProps extends CssLibPropsType {
-    _buttonOrLinkContainer?: CssLibPropsType;
-    _labelOpened?: CssLibPropsType;
-    _labelClosed?: CssLibPropsType;
-    _iconOpened?: CssLibPropsType;
-    _iconClosed?: CssLibPropsType;
-    _listOptionsContainer?: CssLibPropsType;
-}
-
-/**
- * Interface for the uncontrolled DropdownSelected component.
- * Extends the DropdownSelectedProps interface and adds default properties.
- */
-export declare interface DropdownSelectedUnControlledProps extends Omit<DropdownSelectedControlledProps, DropdownSelectedOmittedProps> {
-    defaultOpen?: boolean;
-    defaultOptionSelected?: string;
-    onOptionClick?: (value: string) => void;
-    onButtonClick?: (open: boolean) => void;
-    onClosePopover?: (open: boolean) => void;
-    onMouseEnter?: (open: boolean) => void;
-    onMouseLeave?: (open: boolean) => void;
-    onFocus?: (open: boolean) => void;
-    onBlur?: (open: boolean) => void;
-}
-
-export declare type DropdownSelectedVariantStyles<Variant extends string> = DropdownSelectedStyleProps & {
-    [key in Variant]: DropdownSelectedStyleProps;
-};
-
 /**
  * @name ElementOrIconProps
  * @description
@@ -3908,7 +3818,7 @@ export declare interface InputDecorationProps<Variant = undefined extends string
  */
 export declare interface InputDecorationStandAloneProps extends DataAttributes {
     disabled?: boolean;
-    decoration?: ElementOrIconProps;
+    decoration?: CommonIconProps;
     cssClasses?: InputDecorationCssClasses;
     component?: React.ElementType;
 }
@@ -4446,7 +4356,7 @@ export declare interface ListOptionsStandAloneProps extends DataAttributes {
     content?: React.ReactNode;
     onOptionClick?: (value: string, event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>) => void;
     multiSelect?: boolean;
-    checkedIcon?: ElementOrIconProps;
+    checkedIcon?: CommonIconProps;
     id?: string;
     roveFocus?: UseRoveFocusProps;
     index?: number;
@@ -4589,7 +4499,7 @@ export declare interface ModalStandAloneProps extends DataAttributes {
     title?: CommonTextProps & {
         visible?: boolean;
     };
-    closeIcon?: ElementOrIconProps;
+    closeIcon?: CommonIconProps;
     closeButton?: ModalButtonProps;
     contentContainer?: ModalContentContainerProps;
     content?: ReactNode;
@@ -4600,7 +4510,7 @@ export declare interface ModalStandAloneProps extends DataAttributes {
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
     onPopoverCloseInternally?: () => void;
     cssClasses?: ModalCssClasses;
-    dragIcon?: ElementOrIconProps;
+    dragIcon?: CommonIconProps;
 }
 
 /**
@@ -4693,11 +4603,11 @@ export declare interface OptionProps<Variant = undefined extends string ? unknow
  * Includes ARIA attributes, labels, icons, event handlers, and CSS classes.
  */
 export declare interface OptionStandAloneProps extends OptionAriaProps, DataAttributes {
-    icon?: ElementOrIconProps;
+    icon?: CommonIconProps;
     sublabel?: CommonTextProps;
     label: ReactNode;
     labelCharsHighlighted?: string;
-    checkedIcon?: ElementOrIconProps;
+    checkedIcon?: CommonIconProps;
     multiSelect?: boolean;
     disabled?: boolean;
     selected?: boolean;
@@ -5081,7 +4991,7 @@ export declare interface RadioButtonStandAloneProps extends RadioButtonAriaProps
     name?: string;
     label?: RadioButtonLabelProps;
     errorMessage?: string;
-    errorIcon?: ElementOrIconProps;
+    errorIcon?: CommonIconProps;
     errorAriaLiveType?: AriaAttributes['aria-live'];
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
@@ -5132,6 +5042,62 @@ declare interface ScreenReaderOnlyProps extends DataAttributes {
     role?: React.AriaRole;
 }
 
+/**
+ * Uncontrolled select component for displaying selectable options.
+ *
+ * This component manages its own open/close state and selected option internally, so you do not need
+ * to control the select state from the parent. It is useful when you want a simple select that handles
+ * its own toggle and selection logic. You can optionally receive state changes via callbacks.
+ *
+ * Internally, it wraps {@link SelectControlled} and passes the necessary props.
+ *
+ * @example
+ * ```tsx
+ * <SelectUnControlled defaultOpen />
+ * ```
+ */
+export declare const Select: ForwardRefExoticComponent<SelectUnControlledProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Controlled select component for displaying selectable options.
+ *
+ * This component renders a select that is fully controlled by its parent, allowing for custom open/close logic,
+ * keyboard navigation, and flexible theming. It is useful when you need to manage the select state and behavior externally.
+ *
+ * Internally, it wraps {@link SelectStandAlone} and handles keyboard focus and scroll-based closing.
+ * Accepts a generic type parameter `<Variant extends string>` to allow for custom variant values, enabling flexible styling.
+ *
+ * @example
+ * ```tsx
+ * <SelectControlled open listOptions={options} />
+ *
+ * // With a custom variant type:
+ * type MyVariant = "primary" | "secondary";
+ * <SelectControlled<MyVariant> variant="primary" open listOptions={options} />
+ * ```
+ */
+export declare const SelectControlled: ForwardRefExoticComponent<SelectControlledProps<string> & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Interface for the controlled Select component.
+ * Extends the SelectStandAloneProps interface and adds a variant and additional CSS classes.
+ *
+ * @template Variant - The type of the variant for the Select.
+ */
+export declare interface SelectControlledProps<Variant = undefined extends string ? unknown : string> extends Omit<SelectStandAloneProps, 'listOptionsRef' | 'onButtonKeyDown' | 'component'> {
+    variant?: Variant;
+    additionalClasses?: Partial<SelectCssClasses>;
+}
+
+declare type SelectCssClasses = ComponentSelected<ComponentsTypesComponents['SELECT']>;
+
+/**
+ * Represents the type for the list options in the Select component.
+ */
+export declare type SelectListOptionsProps = Omit<ListOptionsProps, 'selectedValue' | 'onOptionClick'>;
+
+declare type SelectOmittedProps = 'buttonOrLinkRef' | 'open' | 'onButtonClick' | 'optionSelected' | 'onOptionClick' | 'onClosePopover' | 'onMouseEnter' | 'onMouseLeave' | 'onBlur' | 'onFocus' | 'onKeyDown';
+
 /**
  * SelectorBoxFile component for file upload with drag-and-drop support.
  *
@@ -5156,10 +5122,10 @@ export declare const SelectorBoxFile: ForwardRefExoticComponent<SelectorBoxFileP
  */
 export declare type SelectorBoxFileContainerBoxStateContentProps = {
     [key in SelectorBoxFileStateType]: {
-        icon?: ElementOrIconProps;
-        iconRight?: ElementOrIconProps;
+        icon?: CommonIconProps;
+        iconRight?: CommonIconProps;
         actionText?: CommonTextProps;
-        actionIcon?: ElementOrIconProps;
+        actionIcon?: CommonIconProps;
         description?: CommonTextProps;
     };
 };
@@ -5237,6 +5203,68 @@ export declare type SelectorBoxFileVariantStyles<Variant extends string> = Selec
     [key in Variant]?: SelectorBoxFileStyleProps;
 };
 
+/**
+ * Represents the type for the popover in the Select component.
+ */
+export declare type SelectPopoverProps = Omit<IPopover, 'children' | 'open'>;
+
+/**
+ * Interface for the standalone Select component.
+ * Includes properties for state, event handlers, and CSS classes.
+ */
+export declare interface SelectStandAloneProps extends DataAttributes {
+    open: boolean;
+    popover?: SelectPopoverProps;
+    onButtonClick: MouseEventHandler<HTMLButtonElement | HTMLLinkElement>;
+    onButtonKeyDown: KeyboardEventHandler<HTMLButtonElement | HTMLLinkElement>;
+    onClosePopover: () => void;
+    label: CommonTextProps;
+    icon: CommonIconProps;
+    listOptions: SelectListOptionsProps;
+    optionSelected?: string;
+    onOptionClick: (value: string) => void;
+    listOptionsRef: RefObject<HTMLDivElement>;
+    closePopoverOnScroll?: boolean;
+    openAndCloseOnHover?: boolean;
+    url?: string;
+    urlTarget?: HTMLAttributeAnchorTarget;
+    component: 'button' | GenericLinkType;
+    buttonOrLinkRef?: RefObject<HTMLButtonElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    cssClasses?: SelectCssClasses;
+}
+
+export declare interface SelectStyleProps extends CssLibPropsType {
+    _buttonOrLinkContainer?: CssLibPropsType;
+    _labelOpened?: CssLibPropsType;
+    _labelClosed?: CssLibPropsType;
+    _iconOpened?: CssLibPropsType;
+    _iconClosed?: CssLibPropsType;
+    _listOptionsContainer?: CssLibPropsType;
+}
+
+/**
+ * Interface for the uncontrolled Select component.
+ * Extends the SelectProps interface and adds default properties.
+ */
+export declare interface SelectUnControlledProps extends Omit<SelectControlledProps, SelectOmittedProps> {
+    defaultOpen?: boolean;
+    defaultOptionSelected?: string;
+    onOptionClick?: (value: string) => void;
+    onButtonClick?: (open: boolean) => void;
+    onClosePopover?: (open: boolean) => void;
+    onMouseEnter?: (open: boolean) => void;
+    onMouseLeave?: (open: boolean) => void;
+    onFocus?: (open: boolean) => void;
+    onBlur?: (open: boolean) => void;
+}
+
+export declare type SelectVariantStyles<Variant extends string> = SelectStyleProps & {
+    [key in Variant]: SelectStyleProps;
+};
+
 /**
  * Skeleton component for displaying loading placeholders.
  *
@@ -6881,7 +6909,7 @@ export declare interface VirtualKeyboardStandAloneProps extends DataAttributes {
     onVirtualKeyboardBlur: React.FocusEventHandler<HTMLDivElement>;
     onDigitButtonClick: (digit: string, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onRemoveButtonClick: React.MouseEventHandler<HTMLButtonElement>;
-    icon: ElementOrIconProps;
+    icon: CommonIconProps;
     cssClasses?: VirtualKeyboardCssClasses;
 }