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

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;
@@ -1128,7 +1128,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_IMAGE' | '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 +1244,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;
@@ -1486,51 +1486,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 +1499,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 +1807,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 +2031,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 +3304,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 +3790,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 +4328,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 +4471,7 @@ export declare interface ModalStandAloneProps extends DataAttributes {
     title?: CommonTextProps & {
         visible?: boolean;
     };
-    closeIcon?: ElementOrIconProps;
+    closeIcon?: CommonIconProps;
     closeButton?: ModalButtonProps;
     contentContainer?: ModalContentContainerProps;
     content?: ReactNode;
@@ -4600,7 +4482,7 @@ export declare interface ModalStandAloneProps extends DataAttributes {
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
     onPopoverCloseInternally?: () => void;
     cssClasses?: ModalCssClasses;
-    dragIcon?: ElementOrIconProps;
+    dragIcon?: CommonIconProps;
 }
 
 /**
@@ -4693,11 +4575,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 +4963,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 +5014,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 +5094,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 +5175,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 +6881,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;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.22",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -22,7 +22,7 @@
   },
   "license": "Apache-2.0",
   "engines": {
-    "node": "20"
+    "node": "24"
   },
   "keywords": [
     "react",

package/dist/cjs/components/dropdownSelected/dropdownSelectedControlled.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),r=require("../../lib/constants/keyboardKeys/keyboardKeys.js"),o=require("../../lib/hooks/useClassName/useClassName.js"),n=require("../../lib/provider/genericComponentsProvider/genericComponentsProvider.js"),t=require("../../lib/utils/keyboard/keyboard.js"),i=require("../../lib/utils/focusHandlers/focusHandlers.js"),l=require("./dropdownSelectedStandAlone.js"),u=s.forwardRef(({additionalClasses:u,closePopoverOnScroll:a,listOptions:d,onClosePopover:c,open:p,url:f,variant:m,...v},y)=>{const{LINK:C}=n.useGenericComponents(),b=o.useClassName({additionalClassNames:u,component:"DROPDOWN_SELECTED",variant:m}),j=s.useRef(null);return s.useEffect(()=>{if(a)return window.addEventListener("scroll",c),()=>{window.removeEventListener("scroll",c)}},[a,c]),e.jsxRuntimeExports.jsx(l.DropdownSelectedStandAlone,{ref:y,component:f?C:"button",cssClasses:b,listOptions:d,listOptionsRef:j,open:p,onButtonKeyDown:e=>{p&&t.isKeyPressed(e.key,r.TAB.key)&&!e.shiftKey&&j.current&&("selection"===d.type?j.current.firstElementChild?.focus():i.focusFirstDescendant({element:j.current}),e.preventDefault())},onClosePopover:c,...v})});exports.DropdownSelectedControlled=u;

package/dist/cjs/components/dropdownSelected/dropdownSelectedStandAlone.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),o=require("react"),t=require("../text/text.js"),s=require("../../lib/components/elementOrIcon/elementOrIcon.js"),n=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),i=require("../../lib/utils/process/processCommonProp.js"),r=require("../../lib/components/customComponent/customComponent.js"),l=require("../listOptions/listOptions.js"),a=require("../listOptions/utils/listOptions.utils.js"),p=require("../popover/popover.js"),c=o.forwardRef(({buttonOrLinkRef:c,component:u,cssClasses:d,icon:m,label:x,listOptions:v,listOptionsRef:b,onBlur:j,onButtonClick:C,onButtonKeyDown:k,onClosePopover:y,onFocus:O,onKeyDown:h,onOptionClick:f,open:M,optionSelected:g,popover:w,url:D,urlTarget:E,...R},q)=>{const F=`dropdownselected-${o.useId().replace(/:/g,"")}`,A=M?`${F}-list`:void 0,S=R["data-testid"]||"dropdown-selected",T=n.pickCustomAttributes(R),I=o.useMemo(()=>{return{currentFocusSelected:-1,keyDownMove:a.keyDownMove(v.options),keyLeftMove:0,keyRightMove:0,keyTabMove:(e=v.options,(o,t)=>{if(t?.shiftKey){const e=Math.max(o,0)-1;return e>=0&&t?.preventDefault(),Math.max(e,0)}const s=Math.max(o,0)+1;return s<=e.length-1&&t?.preventDefault(),Math.min(s,e.length-1)}),keyUpMove:a.keyUpMove,size:v.options.length};var e},[v.options]);return e.jsxRuntimeExports.jsxs("div",{ref:q,className:d?.dropdown_selected,"data-testid":S,role:"combobox",onBlur:j,onFocus:O,onKeyDown:h,...T,"aria-controls":"dropdown-selected-list","aria-expanded":M,tabIndex:0,children:[e.jsxRuntimeExports.jsxs(r.CustomComponent,{ref:c,"aria-controls":A,"aria-expanded":M,"aria-haspopup":"listbox",className:d?.buttonorlinkcontainer,component:u,target:D?E:void 0,type:D?void 0:"button",url:D,onClick:C,onKeyDown:k,children:[e.jsxRuntimeExports.jsx(t.Text,{additionalClasses:{text:M?d?.labelopened:d?.labelclosed},component:"span",...i.processTextProp(x)}),e.jsxRuntimeExports.jsx(s.ElementOrIcon,{className:M?d?.iconopened:d?.iconclosed,rotate:M?"180deg":"0deg",transitionDuration:"0.2s",...m})]}),!!w&&e.jsxRuntimeExports.jsx(p.Popover,{anchorElement:c?.current,component:"div",disableAutoFocusFirstDescendant:!0,disableAutoFocusFirstDescendantAfterClose:!0,disableClickOverlayClose:!1,disableEscapeClose:!1,disableTrapFocus:!0,id:A,open:M,placement:"bottom",preventCloseOnClickElements:[c?.current],strategy:"absolute",...w,onClose:()=>{y(),w?.onClose?.()},children:e.jsxRuntimeExports.jsx("div",{className:d?.listoptionscontainer,"data-testid":`${S}-list`,children:!!v.variant&&!!v.optionVariant&&e.jsxRuntimeExports.jsx(l.ListOptions,{ref:b,roveFocus:"selection"===v.type?I:void 0,selectedValue:g,...v,onOptionClick:e=>{f(e),y()}})})})]})});exports.DropdownSelectedStandAlone=c;

package/dist/cjs/components/dropdownSelected/dropdownSelectedUncontrolled.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),o=require("react"),t=require("../../lib/constants/keyboardKeys/keyboardKeys.js"),n=require("./dropdownSelectedControlled.js"),r=o.forwardRef(({defaultOpen:r=!1,defaultOptionSelected:s,onBlur:l,onButtonClick:i,onClosePopover:u,onFocus:d,onOptionClick:c,openAndCloseOnHover:a=!1,...p},f)=>{const[y,C]=o.useState(r),[S,v]=o.useState(s),k=o.useRef(null);o.useEffect(()=>{const e=()=>{document.hidden&&C(!1)};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]);return e.jsxRuntimeExports.jsx(n.DropdownSelectedControlled,{...p,ref:f,buttonOrLinkRef:k,open:y,optionSelected:S,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(C(!1),l?.(!1)),a&&(C(!1),l?.(!1))},onButtonClick:()=>{i?.(!y),C(!y)},onClosePopover:()=>{C(!1),u?.(!1)},onFocus:()=>{a&&(C(!0),d?.(!0))},onKeyDown:e=>{t.ESCAPE.key.includes(e.key)&&y&&(k.current?.focus(),C(!1))},onOptionClick:e=>{v(e),c?.(e)}})});exports.DropdownSelected=r,exports.DropdownSelectedUnControlled=r;

package/dist/cjs/components/dropdownSelected/index.js

@@ -1,4 +0,0 @@
-const { DropdownSelectedControlled } = require('./dropdownSelectedControlled.js');
-module.exports = { ...module.exports, DropdownSelectedControlled };
-const { DropdownSelected } = require('./dropdownSelectedUncontrolled.js');
-module.exports = { ...module.exports, DropdownSelected };

package/dist/esm/components/dropdownSelected/dropdownSelectedControlled.js

@@ -1 +0,0 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useRef as r,useEffect as s}from"react";import{TAB as t}from"../../lib/constants/keyboardKeys/keyboardKeys.js";import{useClassName as n}from"../../lib/hooks/useClassName/useClassName.js";import{useGenericComponents as i}from"../../lib/provider/genericComponentsProvider/genericComponentsProvider.js";import{isKeyPressed as l}from"../../lib/utils/keyboard/keyboard.js";import{focusFirstDescendant as a}from"../../lib/utils/focusHandlers/focusHandlers.js";import{DropdownSelectedStandAlone as m}from"./dropdownSelectedStandAlone.js";const p=e(({additionalClasses:e,closePopoverOnScroll:p,listOptions:d,onClosePopover:c,open:u,url:f,variant:v,...y},C)=>{const{LINK:b}=i(),j=n({additionalClassNames:e,component:"DROPDOWN_SELECTED",variant:v}),k=r(null);return s(()=>{if(p)return window.addEventListener("scroll",c),()=>{window.removeEventListener("scroll",c)}},[p,c]),/* @__PURE__ */o.jsx(m,{ref:C,component:f?b:"button",cssClasses:j,listOptions:d,listOptionsRef:k,open:u,onButtonKeyDown:o=>{u&&l(o.key,t.key)&&!o.shiftKey&&k.current&&("selection"===d.type?k.current.firstElementChild?.focus():a({element:k.current}),o.preventDefault())},onClosePopover:c,...y})});export{p as DropdownSelectedControlled};

package/dist/esm/components/dropdownSelected/dropdownSelectedStandAlone.js

@@ -1,5 +0,0 @@
-import{j as o}from"../../_virtual/jsx-runtime.js";import{forwardRef as e,useId as t,useMemo as s}from"react";import{Text as n}from"../text/text.js";import{ElementOrIcon as i}from"../../lib/components/elementOrIcon/elementOrIcon.js";import{pickCustomAttributes as r}from"../../lib/utils/pickCustomAttributes/pickCustomAttributes.js";import{processTextProp as l}from"../../lib/utils/process/processCommonProp.js";import{CustomComponent as a}from"../../lib/components/customComponent/customComponent.js";import{ListOptions as p}from"../listOptions/listOptions.js";import{keyUpMove as c,keyDownMove as d}from"../listOptions/utils/listOptions.utils.js";import{Popover as m}from"../popover/popover.js";const u=e(({buttonOrLinkRef:e,component:u,cssClasses:b,icon:v,label:f,listOptions:x,listOptionsRef:C,onBlur:j,onButtonClick:h,onButtonKeyDown:k,onClosePopover:y,onFocus:O,onKeyDown:g,onOptionClick:D,open:w,optionSelected:F,popover:M,url:A,urlTarget:K,...B},N)=>{const E=`dropdownselected-${t().replace(/:/g,"")}`,I=w?`${E}-list`:void 0,R=B["data-testid"]||"dropdown-selected",T=r(B),$=s(()=>{return{currentFocusSelected:-1,keyDownMove:d(x.options),keyLeftMove:0,keyRightMove:0,keyTabMove:(o=x.options,(e,t)=>{if(t?.shiftKey){const o=Math.max(e,0)-1;return o>=0&&t?.preventDefault(),Math.max(o,0)}const s=Math.max(e,0)+1;return s<=o.length-1&&t?.preventDefault(),Math.min(s,o.length-1)}),keyUpMove:c,size:x.options.length};var o},[x.options]);/* @__PURE__ */
-return o.jsxs("div",{ref:N,className:b?.dropdown_selected,"data-testid":R,role:"combobox",onBlur:j,onFocus:O,onKeyDown:g,...T,"aria-controls":"dropdown-selected-list","aria-expanded":w,tabIndex:0,children:[
-/* @__PURE__ */o.jsxs(a,{ref:e,"aria-controls":I,"aria-expanded":w,"aria-haspopup":"listbox",className:b?.buttonorlinkcontainer,component:u,target:A?K:void 0,type:A?void 0:"button",url:A,onClick:h,onKeyDown:k,children:[
-/* @__PURE__ */o.jsx(n,{additionalClasses:{text:w?b?.labelopened:b?.labelclosed},component:"span",...l(f)}),
-/* @__PURE__ */o.jsx(i,{className:w?b?.iconopened:b?.iconclosed,rotate:w?"180deg":"0deg",transitionDuration:"0.2s",...v})]}),!!M&&/* @__PURE__ */o.jsx(m,{anchorElement:e?.current,component:"div",disableAutoFocusFirstDescendant:!0,disableAutoFocusFirstDescendantAfterClose:!0,disableClickOverlayClose:!1,disableEscapeClose:!1,disableTrapFocus:!0,id:I,open:w,placement:"bottom",preventCloseOnClickElements:[e?.current],strategy:"absolute",...M,onClose:()=>{y(),M?.onClose?.()},children:/* @__PURE__ */o.jsx("div",{className:b?.listoptionscontainer,"data-testid":`${R}-list`,children:!!x.variant&&!!x.optionVariant&&/* @__PURE__ */o.jsx(p,{ref:C,roveFocus:"selection"===x.type?$:void 0,selectedValue:F,...x,onOptionClick:o=>{D(o),y()}})})})]})});export{u as DropdownSelectedStandAlone};

package/dist/esm/components/dropdownSelected/dropdownSelectedUncontrolled.js

@@ -1,2 +0,0 @@
-import{j as e}from"../../_virtual/jsx-runtime.js";import{forwardRef as o,useState as n,useRef as t,useEffect as r}from"react";import{ESCAPE as i}from"../../lib/constants/keyboardKeys/keyboardKeys.js";import{DropdownSelectedControlled as s}from"./dropdownSelectedControlled.js";const c=o(({defaultOpen:o=!1,defaultOptionSelected:c,onBlur:l,onButtonClick:d,onClosePopover:u,onFocus:a,onOptionClick:p,openAndCloseOnHover:m=!1,...f},k)=>{const[v,y]=n(o),[C,b]=n(c),j=t(null);r(()=>{const e=()=>{document.hidden&&y(!1)};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]);/* @__PURE__ */
-return e.jsx(s,{...f,ref:k,buttonOrLinkRef:j,open:v,optionSelected:C,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||(y(!1),l?.(!1)),m&&(y(!1),l?.(!1))},onButtonClick:()=>{d?.(!v),y(!v)},onClosePopover:()=>{y(!1),u?.(!1)},onFocus:()=>{m&&(y(!0),a?.(!0))},onKeyDown:e=>{i.key.includes(e.key)&&v&&(j.current?.focus(),y(!1))},onOptionClick:e=>{b(e),p?.(e)}})});export{c as DropdownSelected,c as DropdownSelectedUnControlled};

package/dist/esm/components/dropdownSelected/index.js

@@ -1,2 +0,0 @@
-export {  DropdownSelectedControlled  } from './dropdownSelectedControlled.js';
-export {  DropdownSelected  } from './dropdownSelectedUncontrolled.js';