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

package/dist/mocked_classnames/components/Box/Box.d.ts

@@ -3,30 +3,105 @@ import { BackgroundColor as BackgroundColorEnum, BorderColor as BorderColorEnum,
 import { BackgroundColor, BorderColor, BaseBoxSize, BoxSize, BoxTextColor, RoundedSize, Shadow } from "./Box.types";
 import { VibeComponent, VibeComponentProps, ElementContent } from "../../types";
 export interface BoxProps extends VibeComponentProps {
+    /**
+     * The HTML element or custom component used as the root.
+     */
     elementType?: keyof JSX.IntrinsicElements | string;
+    /**
+     * The content inside the box.
+     */
     children?: ElementContent;
+    /**
+     * If true, the box is disabled.
+     */
     disabled?: boolean;
+    /**
+     * If true, applies a border to the box.
+     */
     border?: boolean;
+    /**
+     * The color of the border.
+     */
     borderColor?: BorderColor;
+    /**
+     * The border radius of the box.
+     */
     rounded?: RoundedSize;
+    /**
+     * The shadow style applied to the box.
+     */
     shadow?: Shadow;
+    /**
+     * The margin applied to all sides.
+     */
     margin?: BoxSize;
+    /**
+     * The horizontal margin.
+     */
     marginX?: BoxSize;
+    /**
+     * The vertical margin.
+     */
     marginY?: BoxSize;
+    /**
+     * The top margin.
+     */
     marginTop?: BoxSize;
+    /**
+     * The end (right in LTR, left in RTL) margin.
+     */
     marginEnd?: BoxSize;
+    /**
+     * The bottom margin.
+     */
     marginBottom?: BaseBoxSize;
+    /**
+     * The start (left in LTR, right in RTL) margin.
+     */
     marginStart?: BaseBoxSize;
+    /**
+     * The padding applied to all sides.
+     */
     padding?: BaseBoxSize;
+    /**
+     * The horizontal padding.
+     */
     paddingX?: BaseBoxSize;
+    /**
+     * The vertical padding.
+     */
     paddingY?: BaseBoxSize;
+    /**
+     * The top padding.
+     */
     paddingTop?: BaseBoxSize;
+    /**
+     * The end (right in LTR, left in RTL) padding.
+     */
     paddingEnd?: BaseBoxSize;
+    /**
+     * The bottom padding.
+     */
     paddingBottom?: BaseBoxSize;
+    /**
+     * The start (left in LTR, right in RTL) padding.
+     */
     paddingStart?: BaseBoxSize;
+    /**
+     * The background color of the box.
+     */
     backgroundColor?: BackgroundColor;
+    /**
+     * The text color inside the box.
+     */
     textColor?: BoxTextColor;
+    /**
+     * If true, the box content is scrollable.
+     */
     scrollable?: boolean;
+    /**
+     * Inline styles applied to the box.
+     */
     style?: React.CSSProperties;
 }
 declare const _default: ((VibeComponent<BoxProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{

package/dist/mocked_classnames/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.d.ts

@@ -1,13 +1,37 @@
 import React from "react";
 import { SubIcon, VibeComponentProps } from "../../../../types";
 export interface BreadcrumbContentProps extends VibeComponentProps {
+    /**
+     * If true, the breadcrumb is clickable.
+     */
     isClickable?: boolean;
+    /**
+     * The URL the breadcrumb links to.
+     */
     link?: string;
+    /**
+     * Callback fired when the breadcrumb is clicked.
+     */
     onClick?: () => void;
+    /**
+     * The text displayed inside the breadcrumb.
+     */
     text?: string;
+    /**
+     * The icon displayed next to the text.
+     */
     icon?: SubIcon;
+    /**
+     * If true, the breadcrumb represents the current page.
+     */
     isCurrent?: boolean;
+    /**
+     * If true, the breadcrumb is disabled.
+     */
     disabled?: boolean;
+    /**
+     * If true, the breadcrumb text is shown.
+     */
     showText?: boolean;
 }
 export declare const BreadcrumbContent: React.ForwardRefExoticComponent<BreadcrumbContentProps & React.RefAttributes<unknown>>;

package/dist/mocked_classnames/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem.d.ts

@@ -1,20 +1,37 @@
 import React from "react";
 import { SubIcon, VibeComponentProps } from "../../../types";
 export interface BreadcrumbItemProps extends VibeComponentProps {
-    /** The display text. */
+    /**
+     * The display text of the breadcrumb item.
+     */
     text?: string;
-    /** Should item be disabled. */
+    /**
+     * If true, the item is disabled.
+     */
     disabled?: boolean;
-    /** Should item be clickable - this should be recieved from the breadcrumbsBar ( Navigation/Indication bar ). */
+    /**
+     * If true, the item is clickable.
+     */
     isClickable?: boolean;
-    /** If the item is clickable and the type of navigation is a link, this is the link */
+    /**
+     * The URL the item links to if navigation is handled via a link.
+     */
     link?: string;
-    /** If the item is clickable and the type of navigation is a function, this is the function */
+    /**
+     * Callback fired when the item is clicked.
+     */
     onClick?: () => void;
-    /** Should be the current Item - mainly effects the item`s style. */
+    /**
+     * If true, applies styling for the current page.
+     */
     isCurrent?: boolean;
-    /** An Icon - If no icon needed then should be left empty. */
+    /**
+     * The icon displayed next to the text.
+     */
     icon?: SubIcon;
+    /**
+     * If true, the breadcrumb text is shown.
+     */
     showText?: boolean;
 }
 declare const BreadcrumbItem: React.FC<BreadcrumbItemProps>;

package/dist/mocked_classnames/components/BreadcrumbsBar/BreadcrumbsBar.d.ts

@@ -4,8 +4,13 @@ import { BreadcrumbsBarType } from "./Breadcrumbs.types";
 import { BreadcrumbItemProps } from "./BreadcrumbItem/BreadcrumbItem";
 import { VibeComponentProps } from "../../types";
 export interface BreadcrumbBarProps extends VibeComponentProps {
-    /** The type of the bar is responsible for whether it will be navigational or for indication only  */
+    /**
+     * The type of the breadcrumb bar, determining if it is navigational or for indication only.
+     */
     type: BreadcrumbsBarType;
+    /**
+     * The breadcrumb items displayed in the bar.
+     */
     children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
 }
 declare const _default: ((import("../../types/VibeComponent").default<BreadcrumbBarProps, unknown> & Partial<{

package/dist/mocked_classnames/components/ButtonGroup/ButtonGroup.d.ts

@@ -16,24 +16,69 @@ type ButtonGroupOption = {
     tooltipContent?: string;
 };
 export interface ButtonGroupProps extends VibeComponentProps {
+    /**
+     * The list of button options.
+     */
     options: Array<ButtonGroupOption>;
+    /**
+     * The currently selected button value.
+     */
     value?: ButtonValue;
+    /**
+     * Callback fired when a button is selected.
+     */
     onSelect?: (value: ButtonValue, name: string) => void;
+    /**
+     * The size of the buttons.
+     */
     size?: ButtonSize;
+    /**
+     * The style variant of the buttons.
+     */
     kind?: Extract<ButtonType, "secondary" | "tertiary">;
+    /**
+     * The name of the button group.
+     */
     name?: string;
+    /**
+     * If true, disables all buttons in the group.
+     */
     disabled?: boolean;
+    /**
+     * The label of the button group for accessibility.
+     */
     groupAriaLabel?: string;
     /**
-     * Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...
+     * The position of the tooltip relative to the button.
      */
     tooltipPosition?: TooltipPositions;
+    /**
+     * The delay in milliseconds before the tooltip hides.
+     */
     tooltipHideDelay?: number;
+    /**
+     * The delay in milliseconds before the tooltip shows.
+     */
     tooltipShowDelay?: number;
+    /**
+     * CSS selector for the tooltip container.
+     */
     tooltipContainerSelector?: string;
+    /**
+     * Adjusts the tooltip position.
+     */
     tooltipMoveBy?: MoveBy;
+    /**
+     * The content inside the button group.
+     */
     children?: React.ReactNode;
+    /**
+     * If true, makes the button group take the full width of its container.
+     */
     fullWidth?: boolean;
+    /**
+     * If true, removes focus from the button after clicking.
+     */
     blurOnMouseUp?: boolean;
 }
 declare const _default: ((VibeComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>, HTMLDivElement> & Partial<{

package/dist/mocked_classnames/components/ButtonGroup/ButtonWrapper.d.ts

@@ -3,14 +3,29 @@ import { ButtonProps } from "../Button/Button";
 import { MoveBy } from "../../types/MoveBy";
 import { TooltipPositions } from "../Tooltip/Tooltip.types";
 export interface ButtonWrapperProps extends ButtonProps {
+    /**
+     * The content of the tooltip.
+     */
     tooltipContent?: string;
     /**
-     * Where the tooltip should be in reference to the children: Top, Left, Right, Bottom ...
+     * The position of the tooltip relative to the button.
      */
     tooltipPosition?: TooltipPositions;
+    /**
+     * The delay in milliseconds before the tooltip hides.
+     */
     tooltipHideDelay?: number;
+    /**
+     * The delay in milliseconds before the tooltip shows.
+     */
     tooltipShowDelay?: number;
+    /**
+     * CSS selector for the tooltip container.
+     */
     tooltipContainerSelector?: string;
+    /**
+     * Adjusts the tooltip position.
+     */
     tooltipMoveBy?: MoveBy;
 }
 export declare const ButtonWrapper: ({ tooltipContent, tooltipPosition, tooltipHideDelay, tooltipShowDelay, tooltipContainerSelector, tooltipMoveBy, ...otherProps }: ButtonWrapperProps) => React.JSX.Element;

package/dist/mocked_classnames/components/Checkbox/Checkbox.d.ts

@@ -1,37 +1,61 @@
 import React from "react";
 import { VibeComponent, VibeComponentProps } from "../../types";
 export interface CheckBoxProps extends VibeComponentProps {
-    /** A classname to be added to the wrapping element */
-    className?: string;
-    /** A classname to be added to the checkbox element label */
+    /**
+     * Class name applied to the checkbox element.
+     */
     checkboxClassName?: string;
-    /** A classname to be added to the label element */
+    /**
+     * Class name applied to the label element.
+     */
     labelClassName?: string;
-    /** A11y prop to describe the content for screen readers */
+    /**
+     * The label of the checkbox for accessibility.
+     */
     ariaLabel?: string;
-    /** The content to be rendered within the option */
+    /**
+     * The content displayed next to the checkbox.
+     */
     label?: React.ReactNode | Array<React.ReactNode>;
-    /** A11y prop - An Id of an element which describes this option  */
+    /**
+     * The ID of an element describing the checkbox.
+     */
     ariaLabelledBy?: string;
-    /** callback function when the value changes */
+    /**
+     * Callback fired when the checkbox value changes.
+     */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Use this when you want to control the component, this will set the state of the component  */
+    /**
+     * If true, controls the checked state of the checkbox.
+     */
     checked?: boolean;
-    /** An in between state to display a non selected */
+    /**
+     * If true, displays an indeterminate state.
+     */
     indeterminate?: boolean;
-    /** is autoFocus */
+    /**
+     * If true, the checkbox automatically receives focus.
+     */
     autoFocus?: boolean;
-    /** Set the option to be disabled */
+    /**
+     * If true, the checkbox is disabled.
+     */
     disabled?: boolean;
-    /** the default value which the checkbox will start from  */
+    /**
+     * The initial checked state of the checkbox.
+     */
     defaultChecked?: boolean;
-    /** The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective HTMLInputElement object's value property. The value attribute is always optional, though should be considered mandatory for checkbox, radio, and hidden.l */
+    /**
+     * The value submitted with the form when checked.
+     */
     value?: string;
-    /** A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. */
+    /**
+     * The name of the checkbox, used for form submission.
+     */
     name?: string;
-    /** An id to be added the input element */
-    id?: string;
-    /** Specifies the tab order of the input element */
+    /**
+     * The tab order of the checkbox.
+     */
     tabIndex?: number;
 }
 declare const Checkbox: VibeComponent<CheckBoxProps, HTMLInputElement>;

package/dist/mocked_classnames/components/Chips/Chips.d.ts

@@ -4,67 +4,101 @@ import { AvatarType as AvatarTypeEnum } from "../Avatar/AvatarConstants";
 import { AvatarType } from "../Avatar/Avatar.types";
 import { ElementContent, SubIcon, VibeComponent, VibeComponentProps } from "../../types";
 export interface ChipsProps extends VibeComponentProps {
+    /**
+     * The text or content displayed inside the chip.
+     */
     label?: ElementContent;
+    /**
+     * If true, the chip is disabled.
+     */
     disabled?: boolean;
+    /**
+     * If true, the chip is read-only and cannot be deleted.
+     */
     readOnly?: boolean;
-    "data-testid"?: string;
     /**
-     * A React element that is positioned to the right of the text
+     * A React element displayed on the right side.
      */
     rightRenderer?: ElementContent;
     /**
-     * A React element that is positioned to the left of the text
+     * A React element displayed on the left side.
      */
     leftRenderer?: ElementContent;
-    /** Icon to place on the right */
+    /**
+     * Icon displayed on the right side.
+     */
     rightIcon?: SubIcon;
-    /** Icon to place on the left */
+    /**
+     * Icon displayed on the left side.
+     */
     leftIcon?: SubIcon;
-    /** Img to place as avatar on the right */
+    /**
+     * Image URL or text for an avatar displayed on the right.
+     */
     rightAvatar?: string;
-    /** the type of right avatar */
+    /**
+     * The type of avatar displayed on the right.
+     */
     rightAvatarType?: AvatarType;
-    /** Img to place as avatar on the left */
+    /**
+     * Image URL or text for an avatar displayed on the left.
+     */
     leftAvatar?: string;
-    /** the type of left avatar */
+    /**
+     * The type of avatar displayed on the left.
+     */
     leftAvatarType?: AvatarType;
-    /** ClassName for left or right icon */
+    /**
+     * Class name applied to left or right icons.
+     */
     iconClassName?: string;
-    /** ClassName for left or right avatar */
+    /**
+     * Class name applied to left or right avatars.
+     */
     avatarClassName?: string;
+    /**
+     * The background color of the chip.
+     */
     color?: Exclude<ElementAllowedColor, "dark_indigo" | "blackish">;
-    /** Size for font icon */
+    /**
+     * The size of the icons inside the chip.
+     */
     iconSize?: number | string;
+    /**
+     * Callback fired when the chip is deleted.
+     */
     onDelete?: (id: string, event: React.MouseEvent<HTMLSpanElement>) => void;
     /**
-     * Disables the Chip's entry animation
+     * If true, disables the chip's entry animation.
      */
     noAnimation?: boolean;
     /**
-     * Allow user to select text
+     * If true, allows the user to select text inside the chip.
      */
     allowTextSelection?: boolean;
     /**
-     * Callback function to be called when the user clicks the component.
+     * Callback fired when the mouse button is pressed on the chip.
      */
     onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
-     * Callback function to be called when the user clicks the component.
+     * Callback fired when the chip is clicked.
      */
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
-     * Applies when element has onClick or onMouseDown props
+     * The label of the chip for accessibility.
      */
     ariaLabel?: string;
     /**
-     * Disable click behaviors
+     * If true, disables all click behaviors.
      */
     disableClickableBehavior?: boolean;
     /**
-     * Show border, the border color is `--text-color-on-primary`, should be when the chip is a colored background like
-     * selected-color
+     * If true, displays a border around the chip.
      */
     showBorder?: boolean;
+    /**
+     * The label for the close button.
+     */
     closeButtonAriaLabel?: string;
 }
 declare const _default: ((VibeComponent<ChipsProps & React.RefAttributes<HTMLDivElement>, HTMLDivElement> & Partial<{

package/dist/mocked_classnames/components/Clickable/Clickable.d.ts

@@ -3,29 +3,65 @@ import VibeComponentProps from "../../types/VibeComponentProps";
 import VibeComponent from "../../types/VibeComponent";
 export interface ClickableProps extends VibeComponentProps {
     /**
-     * The type of the clickable element wrapper (for example div or span)
+     * The HTML element or custom component used as the root.
      */
     elementType?: keyof JSX.IntrinsicElements | string;
-    className?: string;
-    id?: string;
+    /**
+     * The content inside the clickable element.
+     */
     children?: React.ReactNode;
+    /**
+     * The ARIA role of the element.
+     */
     role?: AriaRole;
+    /**
+     * Callback fired when the element is clicked.
+     */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * If true, allows text selection inside the element.
+     */
     enableTextSelection?: boolean;
+    /**
+     * Callback fired when the mouse button is pressed down on the element.
+     */
     onMouseDown?: (event: React.MouseEvent) => void;
+    /**
+     * Callback fired when the mouse enters the element.
+     */
     onMouseEnter?: (event: React.MouseEvent) => void;
+    /**
+     * Callback fired when the mouse leaves the element.
+     */
     onMouseLeave?: (event: React.MouseEvent) => void;
+    /**
+     * The label of the element for accessibility.
+     */
     ariaLabel?: string;
     /**
-     * Is the element and its content should be hidden from screen readers and other assistive technologies
+     * If true, hides the element from assistive technologies.
      */
     ariaHidden?: boolean;
+    /**
+     * Indicates the presence of a popup associated with the element.
+     */
     ariaHasPopup?: boolean | string;
+    /**
+     * If true, indicates that the associated popup is open.
+     */
     ariaExpanded?: boolean;
+    /**
+     * The tab order of the element.
+     */
     tabIndex?: string | number;
+    /**
+     * If true, the element is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Inline styles applied to the element.
+     */
     style?: React.CSSProperties;
-    "data-testid"?: string;
 }
 declare const Clickable: VibeComponent<ClickableProps, HTMLElement>;
 export default Clickable;

package/dist/mocked_classnames/components/Clickable/ClickableWrapper.d.ts

@@ -3,8 +3,17 @@ import VibeComponentProps from "../../types/VibeComponentProps";
 import VibeComponent from "../../types/VibeComponent";
 import { ClickableProps } from "../Clickable/Clickable";
 export interface ClickableWrapperProps extends VibeComponentProps {
+    /**
+     * The content inside the wrapper.
+     */
     children: React.ReactNode;
+    /**
+     * If true, wraps the content in a `Clickable` component.
+     */
     isClickable: boolean;
+    /**
+     * Props passed to the `Clickable` component.
+     */
     clickableProps: ClickableProps;
 }
 declare const ClickableWrapper: VibeComponent<ClickableWrapperProps, HTMLElement>;

package/dist/mocked_classnames/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/mocked_classnames/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>;