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

package/dist/components/Accordion/Accordion/Accordion.d.ts

@@ -2,29 +2,17 @@ import { ReactElement } from "react";
 import { VibeComponent, VibeComponentProps } from "../../../types";
 export interface AccordionProps extends VibeComponentProps {
     /**
-     * List of AccordionItems
+     * The content of the accordion (`AccordionItem` components).
      */
     children?: Array<ReactElement> | ReactElement;
     /**
-     * is allowed multiple opened accordion items
+     * If true, multiple accordion items can be expanded at the same time.
      */
     allowMultiple?: boolean;
     /**
-     * Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc.)
-     */
-    "data-testid"?: string;
-    /**
-     * Array of initial expanded indexes
+     * An array of initially expanded item indexes.
      */
     defaultIndex?: Array<number>;
-    /**
-     * A class name to be added to the accordion container
-     */
-    className?: string;
-    /**
-     * An id to be added the accordion container.
-     */
-    id?: string;
 }
 declare const Accordion: VibeComponent<AccordionProps, unknown> & object;
 export default Accordion;

package/dist/components/Accordion/AccordionItem/AccordionItem.d.ts

@@ -2,19 +2,19 @@ import React from "react";
 import { VibeComponentProps, ElementContent } from "../../../types";
 export interface AccordionItemProps extends VibeComponentProps {
     /**
-     * Header title for the accordion item.
+     * The header content displayed in the accordion item.
      */
     title?: ElementContent;
     /**
-     * The value of the expandable section
+     * The content rendered inside the accordion item.
      */
     children?: ElementContent;
     /**
-     * The font size of the expand/collapse icon.
+     * The size of the expand/collapse icon.
      */
     iconSize?: number | string;
     /**
-     * Custom callback triggered when the item is clicked.
+     * Callback fired upon item click.
      */
     onClick?: () => void;
     /** @ignore */
@@ -22,33 +22,25 @@ export interface AccordionItemProps extends VibeComponentProps {
     /** @ignore */
     onClickAccordionCallback?: () => void;
     /**
-     * Determines whether the item's border is hidden.
+     * If true, the accordion item's border is hidden.
      */
     hideBorder?: boolean;
     /**
-     * Custom class name to add to the header of the expandable
+     * Class name applied to the accordion item's header.
      */
     headerClassName?: string;
     /**
-     * Custom class name to add to the content of the expandable
+     * Class name applied to the accordion item's content.
      */
     contentClassName?: string;
     /**
-     * Custom class name to add to the ExpandCollapse component
+     * Class name applied to the expand/collapse component.
      */
     expandCollapseComponentClassName?: string;
     /**
-     * If true, the click event is handled during the capture phase instead of bubbling.
+     * If true, the click event is handled during the capture phase.
      */
     captureOnClick?: boolean;
-    /**
-     * A class name to be added to the accordion item container
-     */
-    className?: string;
-    /**
-     * An id to be added the accordion item container.
-     */
-    id?: string;
 }
 declare const AccordionItem: React.FC<AccordionItemProps>;
 export default AccordionItem;

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -9,15 +9,28 @@ import { VibeComponent } from "../../types";
 type ChildrenType = ReactElement<AlertBannerButtonProps | AlertBannerLinkProps | AlertBannerTextProps>;
 export interface AlertBannerProps extends VibeComponentProps {
     /**
-     * Set external styling to the progress bar.
+     * The background color of the alert banner.
      */
-    className?: string;
     backgroundColor?: AlertBannerBackgroundColor;
+    /**
+     * If true, the close button is hidden.
+     */
     isCloseHidden?: boolean;
-    /** ARIA description for the progress bar */
+    /**
+     * The ARIA label of the alert banner for accessibility.
+     */
     ariaLabel?: string;
+    /**
+     * The ARIA label of the close button for accessibility.
+     */
     closeButtonAriaLabel?: string;
+    /**
+     * Callback fired when the close button is clicked.
+     */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The content of the alert banner.
+     */
     children?: ChildrenType | ChildrenType[];
 }
 declare const _default: ((VibeComponent<AlertBannerProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{

package/dist/components/AlertBanner/AlertBannerButton/AlertBannerButton.d.ts

@@ -1,6 +1,9 @@
 import { ButtonProps } from "../../Button/Button";
 import { FC } from "react";
 export interface AlertBannerButtonProps extends ButtonProps {
+    /**
+     * If true, the button is displayed on a dark background.
+     */
     isDarkBackground?: boolean;
 }
 declare const AlertBannerButton: FC<AlertBannerButtonProps>;

package/dist/components/AlertBanner/AlertBannerLink/AlertBannerLink.d.ts

@@ -1,6 +1,9 @@
 import { FC } from "react";
 import { LinkProps } from "../../Link/Link";
 export interface AlertBannerLinkProps extends LinkProps {
+    /**
+     * If true, a left margin is applied to the link.
+     */
     marginLeft?: boolean;
 }
 declare const AlertBannerLink: FC<AlertBannerLinkProps>;

package/dist/components/AlertBanner/AlertBannerText/AlertBannerText.d.ts

@@ -1,7 +1,13 @@
 import { FC } from "react";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 export interface AlertBannerTextProps extends VibeComponentProps {
+    /**
+     * The text content displayed within the alert banner.
+     */
     text: string;
+    /**
+     * If true, a left margin is applied to the alert banner text.
+     */
     marginLeft?: boolean;
 }
 declare const AlertBannerText: FC<AlertBannerTextProps>;

package/dist/components/AttentionBox/AttentionBox.d.ts

@@ -4,21 +4,53 @@ import { AttentionBoxType as AttentionBoxTypeEnum } from "./AttentionBoxConstant
 import { AttentionBoxType } from "./AttentionBox.types";
 import { SubIcon, VibeComponentProps, ElementContent } from "../../types";
 export interface AttentionBoxProps extends VibeComponentProps {
-    className?: string;
+    /**
+     * If true, displays an icon even when no header is provided.
+     */
     withIconWithoutHeader?: boolean;
-    /** we support 5 types of attention boxes */
+    /**
+     * The type of the AttentionBox.
+     */
     type?: AttentionBoxType;
-    /** Icon classname for icon font or SVG Icon Component for SVG Type */
+    /**
+     * The icon displayed next to the title or text.
+     */
     icon?: SubIcon;
+    /**
+     * The type of the icon.
+     */
     iconType?: "svg" | "font";
+    /**
+     * The title of the component.
+     */
     title?: string;
+    /**
+     * The text content displayed inside.
+     */
     text?: string;
+    /**
+     * The content of the component.
+     */
     children?: ElementContent;
+    /**
+     * If true, the icon is not displayed.
+     */
     withoutIcon?: boolean;
+    /**
+     * Callback fired when the close button is clicked.
+     */
     onClose?: (event: React.MouseEvent) => void;
+    /**
+     * If true, renders in compact mode.
+     */
     compact?: boolean;
+    /**
+     * The label of the close button.
+     */
     closeButtonAriaLabel?: string;
-    /** Enables an entry animation when the component appears */
+    /**
+     * If true, an entry animation is applied when the component appears.
+     */
     entryAnimation?: boolean;
 }
 declare const _default: ((import("../../types/VibeComponent").default<AttentionBoxProps, unknown> & Partial<{

package/dist/components/Avatar/Avatar.d.ts

@@ -6,34 +6,101 @@ import { AvatarBadgeProps } from "./AvatarBadge";
 import { TooltipProps } from "../Tooltip/Tooltip";
 import { SubIcon, VibeComponentProps } from "../../types";
 export interface AvatarProps extends VibeComponentProps {
+    /**
+     * The image source for the avatar.
+     */
     src?: string;
+    /**
+     * The text displayed inside the avatar.
+     */
     text?: string;
     /**
-     * Props passed to the Tooltip component. See full options in the [Tooltip documentation](/?path=/docs/components-tooltip--docs).
+     * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).
      */
     tooltipProps?: Partial<TooltipProps>;
+    /**
+     * The ARIA label of the avatar.
+     */
     ariaLabel?: string;
+    /**
+     * If true, the tooltip is disabled.
+     */
     withoutTooltip?: boolean;
+    /**
+     * The icon displayed inside the avatar.
+     */
     icon?: SubIcon;
+    /**
+     * The type of the avatar.
+     */
     type?: AvatarType;
-    /** Class name for the avatar content of text type */
+    /**
+     * Class name applied to the text inside the avatar.
+     */
     textClassName?: string;
-    /** Class name for a div-wrapper of avatar content */
+    /**
+     * Class name applied to the avatar content wrapper.
+     */
     avatarContentWrapperClassName?: string;
+    /**
+     * The background color of the avatar.
+     */
     backgroundColor?: ElementAllowedColor;
+    /**
+     * A custom background color.
+     */
     customBackgroundColor?: string;
+    /**
+     * The ARIA role of the avatar.
+     */
     role?: AriaRole;
+    /**
+     * The size of the avatar.
+     */
     size?: AvatarSize;
+    /**
+     * A custom size in pixels.
+     */
     customSize?: number;
+    /**
+     * The tab index of the avatar.
+     */
     tabIndex?: number;
+    /**
+     * If true, the avatar is hidden from assistive technologies.
+     */
     ariaHidden?: boolean;
+    /**
+     * If true, the avatar is disabled.
+     */
     disabled?: boolean;
+    /**
+     * If true, renders the avatar as a square instead of a circle.
+     */
     square?: boolean;
+    /**
+     * Props for the top-left badge.
+     */
     topLeftBadgeProps?: AvatarBadgeProps;
+    /**
+     * Props for the top-right badge.
+     */
     topRightBadgeProps?: AvatarBadgeProps;
+    /**
+     * Props for the bottom-left badge.
+     */
     bottomLeftBadgeProps?: AvatarBadgeProps;
+    /**
+     * Props for the bottom-right badge.
+     */
     bottomRightBadgeProps?: AvatarBadgeProps;
+    /**
+     * If true, removes the avatar's border.
+     */
     withoutBorder?: boolean;
+    /**
+     * Callback fired when the avatar is clicked.
+     */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void;
 }
 declare const _default: ((import("../../types/VibeComponent").default<AvatarProps, unknown> & Partial<{

package/dist/components/Avatar/AvatarBadge.d.ts

@@ -4,13 +4,21 @@ import { AvatarSize } from "./Avatar.types";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { SubIcon } from "../../types";
 export interface AvatarBadgeProps extends VibeComponentProps {
+    /**
+     * The image source for the badge.
+     */
     src?: string;
     /**
-     * Use to provide SVG Components
+     * The icon displayed inside the badge.
      */
     icon?: SubIcon;
+    /**
+     * The tab index of the badge.
+     */
     tabIndex?: string | number;
-    className?: string;
+    /**
+     * The size of the badge.
+     */
     size?: AvatarSize;
 }
 export declare const AvatarBadge: React.FC<AvatarBadgeProps> & {

package/dist/components/Avatar/AvatarContent.d.ts

@@ -3,14 +3,37 @@ import { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from "./Av
 import { AvatarSize, AvatarType } from "./Avatar.types";
 import { SubIcon, VibeComponentProps } from "../../types";
 export interface AvatarContentProps extends VibeComponentProps {
+    /**
+     * The image source when the type is set to `img`.
+     */
     src?: string;
+    /**
+     * The type of content displayed inside the avatar.
+     */
     type?: AvatarType;
+    /**
+     * The size of the avatar content.
+     */
     size?: AvatarSize;
+    /**
+     * The ARIA role of the content.
+     */
     role?: string;
+    /**
+     * The label of the content for accessibility.
+     */
     ariaLabel?: string;
-    /** we support two types of icons - SVG and FONT (classname) so this prop is either the name of the icon or the component */
+    /**
+     * The icon displayed when the type is set to `icon`.
+     */
     icon?: SubIcon;
+    /**
+     * Class name applied to the text content.
+     */
     textClassName?: string;
+    /**
+     * The text displayed when the type is set to `text`.
+     */
     text?: string;
 }
 export declare const AvatarContent: React.FC<AvatarContentProps> & {

package/dist/components/AvatarGroup/AvatarGroup.d.ts

@@ -5,28 +5,40 @@ import { AvatarSize, AvatarType } from "../Avatar/Avatar.types";
 import { TooltipProps } from "../Tooltip/Tooltip";
 import { AvatarGroupCounterVisualProps } from "./AvatarGroup.types";
 export interface AvatarGroupProps extends VibeComponentProps {
+    /**
+     * Class name applied to each avatar.
+     */
     avatarClassName?: string;
     /**
-     * Array of `Avatar` components
+     * The avatars displayed in the group.
      */
     children?: ReactElement<AvatarProps> | ReactElement<AvatarProps>[];
+    /**
+     * The size of the avatars in the group.
+     */
     size?: AvatarSize;
+    /**
+     * The type of the avatars in the group.
+     */
     type?: AvatarType;
+    /**
+     * The maximum number of avatars displayed before showing a counter.
+     */
     max?: number;
     /**
-     * 4 `Counter.props` for customization + ariaLabelItemsName for specifying the "items" name in aria label
+     * Props for customizing the counter display.
      */
     counterProps?: AvatarGroupCounterVisualProps;
     /**
-     * Props passed to the Tooltip component. See full options in the [Tooltip documentation](/?path=/docs/components-tooltip--docs).
+     * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).
      */
     counterTooltipCustomProps?: Partial<TooltipProps>;
     /**
-     * Using counter default tooltip virtualized list for rendering only visible items (performance optimization)
+     * If true, the counter tooltip uses a virtualized list for performance optimization.
      */
     counterTooltipIsVirtualizedList?: boolean;
     /**
-     * If true, the component will be disabled and non interactive
+     * If true, the component is disabled and non-interactive.
      */
     disabled?: boolean;
 }

package/dist/components/AvatarGroup/AvatarGroupCounter.d.ts

@@ -6,18 +6,36 @@ import { AvatarGroupCounterVisualProps } from "./AvatarGroup.types";
 import { TooltipProps } from "../Tooltip/Tooltip";
 export interface AvatarGroupCounterProps extends VibeComponentProps {
     /**
-     * Array of Avatar elements
+     * The list of avatars hidden behind the counter.
      */
     counterTooltipAvatars?: ReactElement<AvatarProps>[];
     /**
-     * AvatarGroupCounterVisualProps: props for counter
+     * Props for customizing the counter appearance.
      */
     counterProps?: AvatarGroupCounterVisualProps;
+    /**
+     * Props for customizing the counter tooltip.
+     */
     counterTooltipCustomProps?: Partial<TooltipProps>;
+    /**
+     * If true, the counter tooltip uses a virtualized list for performance optimization.
+     */
     counterTooltipIsVirtualizedList?: boolean;
+    /**
+     * The size of the counter.
+     */
     size?: AvatarSize;
+    /**
+     * The type of the avatars in the counter.
+     */
     type?: AvatarType;
+    /**
+     * The label of the counter for accessibility.
+     */
     counterAriaLabel?: string;
+    /**
+     * If true, the counter is disabled and non-interactive.
+     */
     disabled?: boolean;
 }
 declare const AvatarGroupCounter: React.FC<AvatarGroupCounterProps>;

package/dist/components/AvatarGroup/AvatarGroupCounterTooltipContainer.d.ts

@@ -4,20 +4,37 @@ import { AvatarProps } from "../Avatar/Avatar";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { AvatarType } from "../Avatar/Avatar.types";
 export interface AvatarGroupCounterTooltipContainerProps extends VibeComponentProps {
-    className?: string;
+    /**
+     * The type of avatars displayed in the tooltip.
+     */
     type?: AvatarType;
     /**
-     * Counter element & focus placeholders
+     * The counter element and focus placeholders.
      */
     children?: ReactElement[];
     /**
-     * Array of Avatar elements
+     * The list of avatars displayed inside the tooltip.
      */
     avatars?: ReactElement<AvatarProps>[];
+    /**
+     * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).
+     */
     counterTooltipCustomProps?: Partial<TooltipProps>;
+    /**
+     * If true, the tooltip uses a virtualized list for performance optimization.
+     */
     counterTooltipIsVirtualizedList?: boolean;
+    /**
+     * Ref for the element before the tooltip content, used for keyboard navigation.
+     */
     focusPrevPlaceholderRef?: RefObject<HTMLDivElement>;
+    /**
+     * Ref for the element after the tooltip content, used for keyboard navigation.
+     */
     focusNextPlaceholderRef?: RefObject<HTMLDivElement>;
+    /**
+     * Ref for the counter container element.
+     */
     counterContainerRef?: RefObject<HTMLDivElement>;
 }
 declare const AvatarGroupCounterTooltipContainer: React.FC<AvatarGroupCounterTooltipContainerProps>;

package/dist/components/AvatarGroup/AvatarGroupCounterTooltipContent.d.ts

@@ -3,13 +3,21 @@ import { AvatarProps } from "../Avatar/Avatar";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { AvatarType } from "../Avatar/Avatar.types";
 export interface AvatarGroupCounterTooltipContentProps extends VibeComponentProps {
-    className?: string;
+    /**
+     * The type of avatars displayed inside the tooltip.
+     */
     type?: AvatarType;
     /**
-     * Array of Avatar components
+     * The avatars shown in the tooltip.
      */
     avatars?: ReactElement<AvatarProps>[];
+    /**
+     * If true, the tooltip uses a virtualized list for performance optimization.
+     */
     isVirtualizedList?: boolean;
+    /**
+     * Ref for the tooltip content container.
+     */
     tooltipContentContainerRef?: Ref<HTMLDivElement>;
 }
 declare const AvatarGroupCounterTooltipContent: React.FC<AvatarGroupCounterTooltipContentProps>;

package/dist/components/AvatarGroup/AvatarGroupCounterTooltipContentVirtualizedList.d.ts

@@ -10,12 +10,24 @@ export type AvatarItem = {
 };
 export interface AvatarGroupCounterTooltipContentVirtualizedListProps extends VibeComponentProps {
     /**
-     * Array of Avatar components
+     * The list of avatars displayed in the virtualized tooltip.
      */
     avatarItems?: AvatarItem[];
+    /**
+     * Function to render each avatar item.
+     */
     avatarRenderer?: (item: AvatarItem, index: number, style: CSSProperties, type: AvatarType, displayAsGrid: boolean) => ReactElement;
+    /**
+     * The ARIA label of the tooltip container.
+     */
     tooltipContainerAriaLabel?: string;
+    /**
+     * Ref for the tooltip content container.
+     */
     tooltipContentContainerRef?: Ref<HTMLDivElement>;
+    /**
+     * The type of avatars in the tooltip.
+     */
     type?: AvatarType;
 }
 declare const AvatarGroupCounterTooltipContentVirtualizedList: React.FC<AvatarGroupCounterTooltipContentVirtualizedListProps>;

package/dist/components/Badge/Badge.d.ts

@@ -6,14 +6,29 @@ import { BadgeAlignments, BadgeAnchor, BadgeType } from "./Badge.types";
 import { IndicatorProps } from "./Indicator/Indicator";
 import { CounterProps } from "../Counter/Counter";
 export interface BadgeBaseProps extends VibeComponentProps {
+    /**
+     * The position of the badge relative to its parent.
+     */
     anchor?: BadgeAnchor;
+    /**
+     * The alignment style of the badge.
+     */
     alignment?: BadgeAlignments;
+    /**
+     * The content the badge is attached to.
+     */
     children: React.ReactNode;
 }
 interface CounterBadgeProps extends CounterProps {
+    /**
+     * The type of badge, set to `"counter"` for numeric values.
+     */
     type: Extract<BadgeType, "counter">;
 }
 interface IndicatorBadgeProps extends IndicatorProps {
+    /**
+     * The type of badge, set to `"indicator"` for a simple dot.
+     */
     type?: Extract<BadgeType, "indicator">;
 }
 export type BadgeProps = BadgeBaseProps & (CounterBadgeProps | IndicatorBadgeProps);

package/dist/components/Badge/Indicator/Indicator.d.ts

@@ -3,6 +3,9 @@ import { IndicatorColor as IndicatorColorEnum } from "./IndicatorConstants";
 import { IndicatorColor } from "./Indicator.types";
 import { VibeComponentProps } from "../../../types";
 export interface IndicatorProps extends VibeComponentProps {
+    /**
+     * The color of the indicator.
+     */
     color?: IndicatorColor;
 }
 declare const Indicator: React.FC<IndicatorProps> & {

package/dist/components/BaseInput/BaseInput.types.d.ts

@@ -6,42 +6,35 @@ type BaseInputNativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "si
 type Renderer = ReactNode | ReactNode[];
 export interface BaseInputProps extends BaseInputNativeInputProps, VibeComponentProps {
     /**
-     * Size of the input element. Will influence also padding and font size.
+     * The size of the input.
      */
     size?: InputSize;
     /**
-     * A render prop function for adding a component or element to the left side of the input.
-     * This could be an icon, text, or any custom element that fits within the input's design.
+     * Element or component rendered on the left side of the input.
      */
     renderLeft?: Renderer;
     /**
-     * Similar to renderLeft, but for adding an element to the right side of the input.
-     * Useful for clear buttons, password visibility toggles, or custom validation icons.
+     * Element or component rendered on the right side of the input.
      */
     renderRight?: Renderer;
     /**
-     * When true, indicates that the input has successfully passed validation or meets some criteria.
-     * This control the visual styling of the input to convey success to the user.
+     * If true, applies success styling to the input.
      */
     success?: boolean;
     /**
-     * When true, indicates that there is an error with the input's current value.
-     * This control the visual styling of the input to convey error to the user.
+     * If true, applies error styling to the input.
      */
     error?: boolean;
     /**
-     * ARIA role for the input wrapper. This can be used to improve accessibility by
-     * giving screen readers more context about the input's purpose.
+     * The ARIA role of the input wrapper.
      */
     wrapperRole?: AriaRole;
     /**
-     * ARIA role for the input. Setting this helps in making the input more
-     * accessible by providing additional semantic information to assistive technologies.
+     * The ARIA role of the input element.
      */
     inputRole?: AriaRole;
     /**
-     * Additional CSS class names to be applied to the input element. This allows for custom
-     * styling on top of the default styles provided by the component.
+     * Class name applied to the input element.
      */
     inputClassName?: string;
 }