@vibe/core 3.36.0-alpha-94da6.0 → 3.36.0

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -6,23 +6,65 @@ import { ColorShapes, ColorPickerSizes, ColorPickerValue, ColorPickerArrayValueO
 import { VibeComponentProps, VibeComponent, SubIcon } from "../../types";
 import { ColorStyle } from "../../types/Colors";
 export interface ColorPickerProps extends VibeComponentProps {
+    /**
+     * The selected color(s).
+     */
     value?: ColorPickerValue;
+    /**
+     * Callback fired when the selected color(s) change.
+     */
     onSave?: (value: ColorPickerArrayValueOnly) => void;
+    /**
+     * Icon displayed as an indicator inside the color.
+     */
     ColorIndicatorIcon?: SubIcon;
+    /**
+     * Icon displayed when a color is selected.
+     */
     SelectedIndicatorIcon?: SubIcon;
     /**
-     * Hide color icon
+     * Icon used for clearing the color selection.
      */
     NoColorIcon?: SubIcon;
+    /**
+     * The style applied to the colors.
+     */
     colorStyle?: ColorStyle;
+    /**
+     * Text displayed for the "no color" option.
+     */
     noColorText?: string;
+    /**
+     * If true, renders the color indicator without a background.
+     */
     shouldRenderIndicatorWithoutBackground?: boolean;
+    /**
+     * If true, treats the color list as a blacklist rather than a whitelist.
+     */
     isBlackListMode?: boolean;
+    /**
+     * The list of colors available for selection.
+     */
     colorsList?: ColorPickerArrayValueOnly;
+    /**
+     * If true, allows selecting multiple colors.
+     */
     isMultiselect?: boolean;
+    /**
+     * The size of the color items.
+     */
     colorSize?: ColorPickerSizes;
+    /**
+     * The number of colors displayed per row.
+     */
     numberOfColorsInLine?: number;
+    /**
+     * If true, the first color is focused when the component mounts.
+     */
     focusOnMount?: boolean;
+    /**
+     * The shape of the color items.
+     */
     colorShape?: ColorShapes;
     /**
      * Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.

package/dist/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.d.ts

@@ -1,7 +1,16 @@
 import { VibeComponentProps, VibeComponent, SubIcon } from "../../../../types";
 export interface ColorPickerClearButtonProps extends VibeComponentProps {
+    /**
+     * Callback fired when the clear button is clicked.
+     */
     onClick: () => void;
+    /**
+     * The text displayed inside the button.
+     */
     text?: string;
+    /**
+     * The icon displayed inside the button.
+     */
     Icon: SubIcon;
 }
 export declare const ColorPickerClearButton: VibeComponent<ColorPickerClearButtonProps>;

package/dist/components/ColorPicker/components/ColorPickerContent/ColorPickerColorsGrid.d.ts

@@ -4,18 +4,57 @@ import { ColorShapes, ColorPickerSizes } from "../../ColorPicker.types";
 import { SubIcon, VibeComponent, VibeComponentProps } from "../../../../types";
 import { ColorStyle } from "../../../../types/Colors";
 export interface ColorPickerColorsGridProps extends VibeComponentProps {
+    /**
+     * Callback fired when a color is clicked.
+     */
     onColorClicked?: (color: ColorPickerValueOnly) => void;
+    /**
+     * The list of colors to be displayed.
+     */
     colorsToRender?: ColorPickerArrayValueOnly;
+    /**
+     * Icon displayed as an indicator inside the color.
+     */
     ColorIndicatorIcon?: SubIcon;
+    /**
+     * Icon displayed when a color is selected.
+     */
     SelectedIndicatorIcon?: SubIcon;
+    /**
+     * The style applied to the colors.
+     */
     colorStyle?: ColorStyle;
+    /**
+     * The currently selected color or colors.
+     */
     value?: string | string[];
+    /**
+     * If true, renders the color indicator without a background.
+     */
     shouldRenderIndicatorWithoutBackground?: boolean;
+    /**
+     * The size of the color items.
+     */
     colorSize?: ColorPickerSizes;
+    /**
+     * The number of colors per row.
+     */
     numberOfColorsInLine?: number;
+    /**
+     * Custom tooltip content for specific colors.
+     */
     tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string> & Record<string, string>>;
+    /**
+     * If true, the first color is focused when the component mounts.
+     */
     focusOnMount?: boolean;
+    /**
+     * The shape of the color items.
+     */
     colorShape?: ColorShapes;
+    /**
+     * If true, displays a tooltip with the color name.
+     */
     showColorNameTooltip?: boolean;
 }
 export declare const ColorPickerColorsGrid: VibeComponent<ColorPickerColorsGridProps, HTMLUListElement>;

package/dist/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.d.ts

@@ -6,21 +6,69 @@ import { ColorShapes, ColorPickerSizes, ColorPickerValue, ColorPickerArrayValueO
 import { VibeComponentProps, VibeComponent, SubIcon } from "../../../../types";
 import { ColorStyle } from "../../../../types/Colors";
 export interface ColorPickerContentProps extends VibeComponentProps {
+    /**
+     * The selected color(s).
+     */
     value: ColorPickerValue;
+    /**
+     * Callback fired when the selected color(s) change.
+     */
     onValueChange: (value: ColorPickerArrayValueOnly) => void;
+    /**
+     * The list of colors available for selection.
+     */
     colorsList: ColorPickerArrayValueOnly;
+    /**
+     * Icon displayed as an indicator inside the color.
+     */
     ColorIndicatorIcon?: SubIcon;
+    /**
+     * Icon displayed when a color is selected.
+     */
     SelectedIndicatorIcon?: SubIcon;
+    /**
+     * Icon used for clearing the color selection.
+     */
     NoColorIcon?: SubIcon;
+    /**
+     * The style applied to the colors.
+     */
     colorStyle?: ColorStyle;
+    /**
+     * The size of the color items.
+     */
     colorSize?: ColorPickerSizes;
+    /**
+     * The shape of the color items.
+     */
     colorShape?: ColorShapes;
+    /**
+     * Custom tooltip content for specific colors.
+     */
     tooltipContentByColor?: Partial<Record<CONTENT_COLORS_VALUES, string>>;
+    /**
+     * Text displayed for the "no color" option.
+     */
     noColorText?: string;
+    /**
+     * If true, renders the color indicator without a background.
+     */
     shouldRenderIndicatorWithoutBackground?: boolean;
+    /**
+     * If true, treats the color list as a blacklist rather than a whitelist.
+     */
     isBlackListMode?: boolean;
+    /**
+     * The number of colors displayed per row.
+     */
     numberOfColorsInLine?: number;
+    /**
+     * If true, the first color is focused when the component mounts.
+     */
     focusOnMount?: boolean;
+    /**
+     * If true, allows selecting multiple colors.
+     */
     isMultiselect?: boolean;
     /**
      * Used to force the component render the colorList prop as is. Usually, this flag should not be used. It's intended only for edge cases.

package/dist/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.d.ts

@@ -2,18 +2,50 @@ import { ColorPickerValueOnly } from "../../ColorPicker.types";
 import { ColorShapes, ColorPickerSizes } from "../../ColorPicker.types";
 import { SubIcon, VibeComponent, VibeComponentProps, ElementContent, ColorStyle } from "../../../../types";
 export interface ColorPickerItemComponentProps extends VibeComponentProps {
+    /**
+     * The color value of the item.
+     */
     color: ColorPickerValueOnly;
+    /**
+     * Callback fired when the color is clicked.
+     */
     onColorClicked: (color: ColorPickerValueOnly) => void;
+    /**
+     * The style applied to the color.
+     */
     colorStyle: ColorStyle;
+    /**
+     * If true, renders the color indicator without a background.
+     */
     shouldRenderIndicatorWithoutBackground: boolean;
+    /**
+     * Icon displayed inside the color item.
+     */
     ColorIndicatorIcon: SubIcon;
+    /**
+     * Icon displayed when the color is selected.
+     */
     SelectedIndicatorIcon: SubIcon;
+    /**
+     * If true, the color is marked as selected.
+     */
     isSelected: boolean;
+    /**
+     * The size of the color item.
+     */
     colorSize: ColorPickerSizes;
+    /**
+     * Tooltip content for the color item.
+     */
     tooltipContent: ElementContent;
+    /**
+     * If true, the color item is currently active.
+     */
     isActive: boolean;
+    /**
+     * The shape of the color item.
+     */
     colorShape: ColorShapes;
-    ["data-testid"]?: string;
 }
 declare const ColorPickerItemComponent: VibeComponent<ColorPickerItemComponentProps>;
 export default ColorPickerItemComponent;

package/dist/components/Combobox/Combobox.d.ts

@@ -5,99 +5,152 @@ import { ComboboxSizes } from "./Combobox.types";
 import IconButton from "../IconButton/IconButton";
 import MenuButton from "../MenuButton/MenuButton";
 export interface ComboboxProps extends VibeComponentProps {
-    className?: string;
+    /**
+     * Class name applied to each option item.
+     */
     optionClassName?: string;
+    /**
+     * Class name applied to the search wrapper.
+     */
     searchWrapperClassName?: string;
     /**
-     * Class name for sticky category header
+     * Class name applied to the sticky category header.
      */
     stickyCategoryClassName?: string;
     /**
-     * Placeholder to show when no value was selected
+     * Placeholder text displayed in the search input.
      */
     placeholder?: string;
     /**
-     * Unique element id
+     * Message displayed when no results are found.
      */
-    id?: string;
+    noResultsMessage?: string;
     /**
-     * A message that will be displayed inside the combo box when no results are found
+     * If true, the combobox is disabled.
      */
-    noResultsMessage?: string;
     disabled?: boolean;
+    /**
+     * The list of available options.
+     */
     options?: IComboboxOption[];
+    /**
+     * The list of available categories.
+     */
     categories?: IComboboxCategoryMap;
     /**
-     * Divider between categories sections
+     * If true, displays a divider between category sections.
      */
     withCategoriesDivider?: boolean;
+    /**
+     * The size of the combobox.
+     */
     size?: ComboboxSizes;
+    /**
+     * The height of each option item.
+     */
     optionLineHeight?: number;
+    /**
+     * The height of the options list.
+     */
     optionsListHeight?: number;
+    /**
+     * If true, the search input is focused when the component mounts.
+     */
     autoFocus?: boolean;
     /**
-     * Callback that called after clicking on the add new combo box button.
-     * @param {string} _filterValue
+     * Callback fired when the "Add new" button is clicked.
      */
     onAddNew?: (value: string) => void;
     /**
-     * The label of the button that appears at the end of the combo box when the search does not return appropriate options
+     * Label displayed for the "Add new" button.
      */
     addNewLabel?: ((label: string) => ElementContent) | string;
+    /**
+     * Custom filter function for searching options.
+     */
     filter?: (filterValue: string, options: IComboboxOption[]) => IComboboxOption[];
     /**
-     * Default search input
+     * The default search input
      */
     defaultFilter?: string;
+    /**
+     * If true, disables filtering.
+     */
     disableFilter?: boolean;
     /**
-     * For controlled search input. If provided, `defaultFilter` will be ignored
+     * Controlled search input value.
      */
     filterValue?: string;
+    /**
+     * Callback fired when the search input value changes.
+     */
     onFilterChanged?: (value: string) => void;
     /**
-     * Display the combo box with loading state
+     * If true, displays a loading state.
      */
     loading?: boolean;
     /**
-     * on mouse hover callback for option
+     * Callback fired when an option is hovered.
      */
     onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption) => void;
     /**
-     * on mouse leave callback for option
+     * Callback fired when the mouse leaves an option.
      */
     onOptionLeave?: () => void;
     /**
-     * Allowed to the following behavior: scrolling automatically to the combo box's selected option
+     * If true, automatically scrolls to the selected option.
      */
     shouldScrollToSelectedItem?: boolean;
+    /**
+     * Custom renderer for when no results are found.
+     */
     noResultsRenderer?: () => JSX.Element;
+    /**
+     * If true, keeps categories visible when scrolling.
+     */
     stickyCategories?: boolean;
-    /** By default, the first option will be selected, when focusing selecting the first option, or when changing items */
+    /**
+     * If true, visually focuses the first item by default.
+     */
     defaultVisualFocusFirstIndex?: boolean;
-    /** Clear the filter/search on selection (click or enter) */
+    /**
+     * If true, clears the search input when an option is selected.
+     */
     clearFilterOnSelection?: boolean;
-    /** Replace the regular appearance of combo box option with custom renderer. */
+    /**
+     * Custom renderer for options.
+     */
     optionRenderer?: (option: IComboboxOption) => JSX.Element;
-    /** Maximum options count without scroll */
+    /**
+     * Maximum number of options displayed before scrolling.
+     */
     maxOptionsWithoutScroll?: number;
     /**
-     * Using virtualized list for rendering only the items which visible to the user in any given user (performance optimization)
+     * If true, renders only visible options for performance optimization.
      */
     renderOnlyVisibleOptions?: boolean;
     /**
-     * On option click callback
+     * Callback fired when an option is clicked.
      */
     onClick?: (optionData: IComboboxOption) => void;
     /**
-     * Custom search icon
+     * Custom search icon.
      */
     searchIcon?: SubIcon;
+    /**
+     * ARIA label for the search input.
+     */
     searchInputAriaLabel?: string;
+    /**
+     * The debounce rate for filtering.
+     */
     debounceRate?: number;
+    /**
+     * Ref for the search input element.
+     */
     searchInputRef?: React.RefObject<HTMLInputElement>;
     /**
-     * Render additional action within the right section of search component.
+     * Additional action button inside the search input.
      */
     renderAction?: React.ReactElement<typeof IconButton | typeof MenuButton>;
     /**

package/dist/components/Combobox/components/ComboboxCategory/ComboboxCategory.d.ts

@@ -1,7 +1,13 @@
 import { FC } from "react";
 import { IComboboxCategory } from "../ComboboxConstants";
 export interface ComboboxCategoryProps {
+    /**
+     * The category data.
+     */
     category: IComboboxCategory;
+    /**
+     * Class name applied to the category element.
+     */
     className: string;
 }
 declare const ComboboxCategory: FC<ComboboxCategoryProps>;

package/dist/components/Combobox/components/ComboboxConstants.d.ts

@@ -13,66 +13,222 @@ export declare enum ComboboxOptionIconType {
     RENDERER = "renderer"
 }
 export interface IComboboxCategoryMap {
+    /**
+     * A mapping of category IDs to category details.
+     */
     [key: string]: IComboboxCategory;
 }
 export interface IComboboxCategory {
+    /**
+     * The display label of the category.
+     */
     label: string;
+    /**
+     * The unique ID of the category.
+     */
     id: string;
+    /**
+     * The ARIA label for accessibility.
+     */
     ariaLabel?: string;
+    /**
+     * If true, the category is only shown when searching.
+     */
     onlyShowOnSearch?: boolean;
+    /**
+     * The color associated with the category.
+     */
     color?: string;
 }
 export interface IComboboxOption {
+    /**
+     * The unique ID of the option.
+     */
     id: string;
+    /**
+     * The ID of the category the option belongs to.
+     */
     categoryId?: string;
+    /**
+     * The icon displayed on the left side.
+     */
     leftIcon?: SubIcon | ((className: string) => JSX.Element);
+    /**
+     * The icon displayed on the right side.
+     */
     rightIcon?: SubIcon | ((className: string) => JSX.Element);
+    /**
+     * The type of the left icon.
+     */
     leftIconType?: ComboboxOptionIconType;
+    /**
+     * The type of the right icon.
+     */
     rightIconType?: ComboboxOptionIconType;
+    /**
+     * The display label of the option.
+     */
     label: string;
+    /**
+     * The size of the icons.
+     */
     iconSize?: number;
+    /**
+     * If true, the option is disabled.
+     */
     disabled?: boolean;
+    /**
+     * If true, the option is selected.
+     */
     selected?: boolean;
+    /**
+     * The ARIA label for accessibility.
+     */
     ariaLabel?: string;
+    /**
+     * If true, the option belongs to a category.
+     */
     belongToCategory?: boolean;
+    /**
+     * The tooltip content displayed on hover.
+     */
     tooltipContent?: string;
 }
 export interface IComboboxItem {
+    /**
+     * The height of the item.
+     */
     height?: number;
+    /**
+     * The type of the item.
+     */
     type?: string;
+    /**
+     * The category details if the item is a category.
+     */
     category?: IComboboxCategory;
+    /**
+     * The ID of the category the item belongs to.
+     */
     categoryId?: string;
+    /**
+     * The unique ID of the item.
+     */
     id?: string;
+    /**
+     * The index of the item in the list.
+     */
     index?: number;
+    /**
+     * If true, a divider is displayed before this item.
+     */
     withDivider?: boolean;
+    /**
+     * Class name applied to the item.
+     */
     className?: string;
+    /**
+     * If true, the item belongs to a category.
+     */
     belongToCategory?: boolean;
+    /**
+     * The option details if the item is an option.
+     */
     option?: IComboboxOption;
+    /**
+     * Custom renderer for the option.
+     */
     optionRenderer?: (option: IComboboxOption) => JSX.Element;
+    /**
+     * If true, the item is currently active.
+     */
     isActive?: boolean;
+    /**
+     * The height of the option item.
+     */
     optionLineHeight?: number;
+    /**
+     * If true, the selected item is automatically scrolled into view.
+     */
     shouldScrollToSelectedItem?: boolean;
 }
 export interface IComboboxOptionEvents {
+    /**
+     * Callback fired when an option is clicked.
+     */
     onOptionClick: (event: React.MouseEvent | React.KeyboardEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;
+    /**
+     * Callback fired when the mouse leaves an option.
+     */
     onOptionLeave: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;
+    /**
+     * Callback fired when the mouse enters an option.
+     */
     onOptionEnter: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;
+    /**
+     * Callback fired when hovering over an option.
+     */
     onOptionHover?: (event: React.MouseEvent, index: number, option: IComboboxOption, mouseTriggered: boolean) => void;
 }
 export interface IOptionItemRendererArgs extends IComboboxOptionEvents {
+    /**
+     * The unique ID of the option item.
+     */
     id?: string;
+    /**
+     * The index of the option item.
+     */
     index?: number;
+    /**
+     * The option details.
+     */
     option?: IComboboxOption;
+    /**
+     * Class name applied to the option item.
+     */
     className?: string;
+    /**
+     * If true, the option is currently active.
+     */
     isActive?: boolean;
+    /**
+     * If true, the option has visual focus.
+     */
     visualFocus?: boolean;
+    /**
+     * A reference to the scroll container.
+     */
     scrollRef?: MutableRef<HTMLElement>;
+    /**
+     * The amount of offset when scrolling to the active item.
+     */
     scrollOffset?: number;
+    /**
+     * The height of the option item.
+     */
     optionLineHeight?: number;
+    /**
+     * If true, the selected item is automatically scrolled into view.
+     */
     shouldScrollToSelectedItem?: boolean;
+    /**
+     * If true, scrolls to the active option when it is selected.
+     */
     shouldScrollWhenActive?: boolean;
+    /**
+     * If true, the option belongs to a category.
+     */
     belongToCategory?: boolean;
+    /**
+     * The index of the item with visual focus.
+     */
     visualFocusItemIndex?: number;
+    /**
+     * The index of the currently active item.
+     */
     activeItemIndex?: number;
+    /**
+     * Custom renderer for the option content.
+     */
     optionRenderer?: (option: IComboboxOption) => JSX.Element;
 }