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

package/dist/components/FormattedNumber/FormattedNumber.d.ts

@@ -3,35 +3,35 @@ import VibeComponentProps from "../../types/VibeComponentProps";
 import VibeComponent from "../../types/VibeComponent";
 export interface FormattedNumberProps extends VibeComponentProps {
     /**
-     * A numeric value to format.
+     * The numeric value to format.
      */
     value?: number | string;
     /**
-     * If included, will be added as a prefix to the number.
+     * The text displayed before the number.
      */
     prefix?: string;
     /**
-     * If included, will be added as a suffix to the number.
+     * The text displayed after the number.
      */
     suffix?: string;
     /**
-     * The text that will be shown if no value is provided.
+     * The text displayed when no value is provided.
      */
     emptyPlaceHolder?: string;
     /**
-     * Determines the number of decimal numbers (0 ~ 20).
+     * The number of decimal places to display (0 ~ 20).
      */
     decimalPrecision?: number;
     /**
-     * Format number into compact number and initial (if required).
+     * If true, formats the number into a compact notation.
      */
     compact?: boolean;
     /**
-     * Determines the number's local (Unicode BCP 47 locale identifier).
+     * The locale used for formatting (Unicode BCP 47 locale identifier).
      */
     local?: string;
     /**
-     * Determines suffix and prefix location
+     * If true, reverses the order of the prefix and suffix.
      */
     rtl?: boolean;
 }

package/dist/components/GridKeyboardNavigationContext/GridKeyboardNavigationContextConstants.d.ts

@@ -17,6 +17,9 @@ type HorizontalPosition = {
     rightElement?: GridElementRef;
 };
 export interface GridKeyboardNavigationContextType {
+    /**
+     * Callback fired when navigation moves beyond the bounds of the grid.
+     */
     onOutboundNavigation?: (ref: GridElementRef, direction: NavDirections) => void;
 }
 export {};

package/dist/components/Heading/Heading.d.ts

@@ -6,10 +6,25 @@ import { TypographyAlign as TypographyAlignEnum, TypographyColor as TypographyCo
 import { HeadingType, HeadingWeight } from "./Heading.types";
 import { TypographyAlign, TypographyColor } from "../Typography/Typography.types";
 export interface HeadingProps extends TypographyProps {
+    /**
+     * The heading type.
+     */
     type?: HeadingType;
+    /**
+     * The font weight of the heading.
+     */
     weight?: HeadingWeight;
+    /**
+     * The text alignment.
+     */
     align?: TypographyAlign;
+    /**
+     * The text color.
+     */
     color?: TypographyColor;
+    /**
+     * The content inside the heading.
+     */
     children: ReactNode;
 }
 declare const _default: ((VibeComponent<HeadingProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{

package/dist/components/HiddenText/HiddenText.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
 import VibeComponentProps from "../../types/VibeComponentProps";
 export interface HiddenTextProps extends VibeComponentProps {
+    /**
+     * The text content that is hidden but available for assistive technologies.
+     */
     text: string;
 }
 declare const HiddenText: React.ForwardRefExoticComponent<HiddenTextProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Icon/CustomSvgIcon/CustomSvgIcon.d.ts

@@ -1,15 +1,45 @@
 import React, { FunctionComponent, AriaRole, Ref } from "react";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 export interface CustomSvgIconProps extends VibeComponentProps {
+    /**
+     * Callback fired when the icon is clicked.
+     */
     onClick?: (event: React.MouseEvent) => void;
+    /**
+     * The source URL or object of the SVG icon.
+     */
     src: string | object;
+    /**
+     * The accessible label for the icon.
+     */
     ariaLabel?: string;
+    /**
+     * The tab index of the icon for keyboard navigation.
+     */
     tabIndex?: number;
+    /**
+     * The ARIA role of the icon.
+     */
     role?: AriaRole;
+    /**
+     * If true, hides the icon from screen readers.
+     */
     ariaHidden?: boolean;
+    /**
+     * If true, makes the icon clickable.
+     */
     clickable?: boolean;
+    /**
+     * If true, replaces the `fill` attribute in the SVG with `currentColor`.
+     */
     replaceToCurrentColor?: boolean;
+    /**
+     * Overrides the default color of the icon.
+     */
     customColor?: string;
+    /**
+     * Reference to the SVG element.
+     */
     ref?: Ref<SVGElement>;
 }
 declare const CustomSvgIcon: FunctionComponent<CustomSvgIconProps>;

package/dist/components/Icon/FontIcon/FontIcon.d.ts

@@ -1,11 +1,29 @@
 import React, { AriaRole } from "react";
 import { SubIcon, VibeComponent, VibeComponentProps } from "../../../types";
 export interface FontIconProps extends VibeComponentProps {
+    /**
+     * Callback fired when the icon is clicked.
+     */
     onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * The accessible label for the icon.
+     */
     "aria-label"?: string;
+    /**
+     * The tab index of the icon for keyboard navigation.
+     */
     tabIndex?: number;
+    /**
+     * The icon name or component.
+     */
     icon?: SubIcon;
+    /**
+     * The ARIA role of the icon.
+     */
     role?: AriaRole;
+    /**
+     * If true, hides the icon from screen readers.
+     */
     "aria-hidden"?: boolean;
 }
 declare const FontIcon: VibeComponent<FontIconProps, HTMLElement>;

package/dist/components/Icon/Icon.d.ts

@@ -3,46 +3,70 @@ import { IconType as IconTypeEnum } from "./IconConstants";
 import { IconType } from "./Icon.types";
 import { VibeComponentProps, VibeComponent, SubIcon } from "../../types";
 export interface IconSubComponentProps {
+    /**
+     * Ref for the icon component.
+     */
     ref?: Ref<HTMLElement>;
+    /**
+     * The ID of the icon component.
+     */
     id?: string;
+    /**
+     * The size of the icon.
+     */
     size?: string | number;
+    /**
+     * Class name applied to the icon.
+     */
     className?: string;
+    /**
+     * Inline styles applied to the icon.
+     */
     style?: CSSProperties;
+    /**
+     * Test ID for testing purposes.
+     */
     "data-testid"?: string;
 }
 export interface IconProps extends VibeComponentProps {
     /**
-     * We support three types of icons - SVG, FONT and SRC (classname) so this prop is either the name of the icon or the component
+     * The icon name, component, or source URL.
      */
     icon: SubIcon;
     /**
-     * Icon aria label [aria label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
+     * The accessible label for the icon.
      */
     iconLabel?: string;
     /**
-     *  The type of the component - svg, font or custom svg (using [`react-inlinesvg`](https://github.com/gilbarbara/react-inlinesvg#readme))
+     * The type of the icon: `svg`, `font`, or `src` (external source).
      */
     iconType?: IconType;
     /**
-     * Size for font icon
+     * The size of the icon.
      */
     iconSize?: number | string;
     /**
-     * Remove focus style
+     * If true, removes focus styles from the icon.
      */
     ignoreFocusStyle?: boolean;
+    /**
+     * The tab index of the icon for keyboard navigation.
+     */
     tabindex?: number | string;
     /**
-     * Hide icon asset from screen reader. No need to set value for this prop when `clickable` is false
+     * If true, hides the icon from screen readers.
      */
     ariaHidden?: boolean;
+    /**
+     * Inline styles applied to the icon.
+     */
     style?: React.CSSProperties;
     /**
-     * When using svg from src (Icon.type.SRC) this boolean will transform the "fill" property to "currentColor"
+     * If true, replaces `fill` property with `currentColor` when using an `src` icon.
      */
     useCurrentColor?: boolean;
     /**
-     * Override the default color with a custom one
+     * Overrides the default color with a custom color.
      */
     customColor?: string;
 }

package/dist/components/IconButton/IconButton.d.ts

@@ -5,90 +5,100 @@ import { SubIcon, VibeComponent, VibeComponentProps } from "../../types";
 import { ButtonColor, ButtonType } from "../Button/Button.types";
 export interface IconButtonProps extends VibeComponentProps {
     /**
-     * id to be added to the element
-     */
-    id?: string;
-    /**
-     * callback function when clicking the icon button
+     * Callback fired when the button is clicked.
      */
     onClick?: (event: React.MouseEvent) => void;
     /**
-     * the class name of the button wrapper
+     * Class name applied to the button wrapper.
      */
     wrapperClassName?: string;
     /**
-     * the class name of the button icon
+     * Class name applied to the icon.
      */
     iconClassName?: string;
     /**
-     * Icon to be rendered
+     * The icon displayed inside the button.
      */
     icon?: SubIcon;
     /**
-     * element id to describe the button accordingly
-     * */
+     * The ID of the element that labels this button.
+     */
     ariaLabeledBy?: string;
     /**
-     * a11y property to be added, used for screen reader to know what kind of button it is
+     * The ARIA label for accessibility.
      */
     ariaLabel?: string;
     /**
-     * aria for a button popup
+     * If true, indicates that the button controls a popup.
      */
     ariaHasPopup?: React.HTMLProps<HTMLButtonElement>["aria-haspopup"];
     /**
-     * a11y property to be added, used for screen reader to know if the button is expanded
+     * If true, indicates that the associated popup is open.
      */
     ariaExpanded?: boolean;
     /**
-     * aria controls - receives id for the controlled region
+     * The ID of the region controlled by the button.
      */
     ariaControls?: string;
+    /**
+     * ID of the element describing the button.
+     */
     "aria-describedby"?: AriaAttributes["aria-describedby"];
     /**
-     * a11y property to be added, used for screen reader to know if the button is hidden
+     * If true, hides the button from assistive technologies.
      */
     "aria-hidden"?: AriaAttributes["aria-hidden"];
     /**
-     * Indicates the current "pressed" state of toggle buttons
+     * Indicates the current "pressed" state of toggle buttons.
      */
     "aria-pressed"?: AriaAttributes["aria-pressed"];
     /**
-     * Size of the icon
+     * The size of the button.
      */
     size?: Size;
     /**
-     * Whether the tooltip should be displayed or not
+     * If true, hides the tooltip.
      */
     hideTooltip?: boolean;
     /**
-     * Props for Tooltip component
+     * Props for the Tooltip component.
      */
     tooltipProps?: Partial<TooltipProps>;
     /**
-     * Tooltip wraps the button icon, it will display in the tooltip, if not present the aria label will be shown
+     * Tooltip content displayed on hover.
      */
     tooltipContent?: string;
     /**
-     * Kind of button - like Button
+     * The button variant.
      */
     kind?: ButtonType;
+    /**
+     * If true, the button is in an active state.
+     */
     active?: boolean;
-    /** The button's color  */
+    /**
+     * The color of the button.
+     */
     color?: ButtonColor;
     /**
-     * disabled state
+     * If true, the button is disabled.
      */
     disabled?: boolean;
     /**
-     * if disabled - this will be shown in the tooltip
+     * If disabled, this message will be displayed in the tooltip.
      */
     disabledReason?: string;
-    /** Change the focus indicator from around the button to within it */
+    /**
+     * If true, the focus indicator is displayed inside the button instead of around it.
+     */
     insetFocus?: boolean;
-    /** Specifies the tab order of an element */
+    /**
+     * The tab order of the button.
+     */
     tabIndex?: number;
-    /** Show a loader instead of the icon  */
+    /**
+     * If true, a loader replaces the icon.
+     */
     loading?: boolean;
 }
 declare const _default: ((VibeComponent<IconButtonProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{

package/dist/components/Label/Label.d.ts

@@ -5,15 +5,36 @@ import { VibeComponent, VibeComponentProps } from "../../types";
 import { LabelSizes } from "./Label.types";
 export interface LabelProps extends VibeComponentProps {
     /**
-     * Class name for an inner text wrapper
+     * Class name applied to the inner text wrapper.
      */
     labelClassName?: string;
+    /**
+     * The visual style of the label.
+     */
     kind?: LabelKind;
+    /**
+     * The background color of the label.
+     */
     color?: LabelColor;
+    /**
+     * The text content of the label.
+     */
     text?: string;
+    /**
+     * If true, includes a leg (decorative extension).
+     */
     isLegIncluded?: boolean;
+    /**
+     * Callback fired when the label is clicked.
+     */
     onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    /**
+     * If true, triggers a celebration animation.
+     */
     celebrationAnimation?: boolean;
+    /**
+     * The size of the label.
+     */
     size?: LabelSizes;
 }
 declare const _default: ((VibeComponent<LabelProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{

package/dist/components/Label/LabelCelebrationAnimation.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
 export interface LabelCelebrationAnimationProps {
+    /**
+     * The child component that will be wrapped by the animation.
+     */
     children: React.ReactElement;
+    /**
+     * Callback fired when the celebration animation ends.
+     */
     onAnimationEnd: () => void;
 }
 declare function LabelCelebrationAnimation({ children, onAnimationEnd }: LabelCelebrationAnimationProps): React.JSX.Element;

package/dist/components/LayerProvider/LayerContext.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 export interface LayersContextType {
+    /**
+     * A reference to the layer container element.
+     */
     layerRef: React.RefObject<HTMLElement>;
 }
 declare const LayerContext: React.Context<LayersContextType>;

package/dist/components/LayerProvider/LayerProvider.d.ts

@@ -1,6 +1,12 @@
 import { FC, ReactNode, RefObject } from "react";
 export interface LayerProviderType {
-    children: ReactNode | ReactNode;
+    /**
+     * The child elements.
+     */
+    children: ReactNode | ReactNode[];
+    /**
+     * A reference to the layer container element.
+     */
     layerRef: RefObject<HTMLElement> | null;
 }
 declare const LayerProvider: FC<LayerProviderType>;

package/dist/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.d.ts

@@ -11,10 +11,6 @@ interface BaseLegacyModalHeaderProps extends VibeComponentProps {
      * Icon to be rendered before the title
      */
     icon?: SubIcon;
-    /**
-     * Class name for the wrapper
-     */
-    className?: string;
     /**
      * Class name for the title
      */
@@ -23,10 +19,6 @@ interface BaseLegacyModalHeaderProps extends VibeComponentProps {
      * closes the Modal. No need to provide it, it is being provided by the modal
      */
     closeModal?: () => void;
-    /**  /**
-     * ID for the title, needed for accessibility. No need to provide it, it is being provided by the modal
-     */
-    id?: string;
     /**
      * Class name for the description
      */

package/dist/components/Link/Link.d.ts

@@ -4,34 +4,60 @@ import { LinkColor, LinkIconPosition, LinkTarget } from "./Link.types";
 import { SubIcon, VibeComponent, VibeComponentProps } from "../../types";
 export interface LinkProps extends VibeComponentProps {
     /**
-     * Class name for overriding link text styles
+     * Class name applied to the link text.
      */
     textClassName?: string;
-    /** Specifies the location (URL) of the external resource */
+    /**
+     * The URL the link points to.
+     */
     href?: string;
-    /** The link text */
+    /**
+     * The text content of the link.
+     */
     text?: string;
-    /** Defines the relationship between a linked resource and the current document */
+    /**
+     * Specifies the relationship between the current document and the linked resource.
+     */
     rel?: string;
-    /** onClick function - MouseEvent */
+    /**
+     * Callback fired when the link is clicked.
+     */
     onClick?: (event: React.MouseEvent) => void;
-    /** Specifies where to open the linked document */
+    /**
+     * Specifies where to open the linked document.
+     */
     target?: LinkTarget;
-    /** Aria label description */
+    /**
+     * The ARIA label description for accessibility.
+     */
     ariaLabelDescription?: string;
-    /** Identifies the element (or elements) that describes the element on which the attribute is set. */
+    /**
+     * The ID of the element that describes this link.
+     */
     ariaDescribedby?: string;
-    /** element id to describe the counter accordingly */
+    /**
+     * The ID of the element labeling this link.
+     */
     ariaLabeledBy?: string;
-    /** Icon to add to the link element */
+    /**
+     * Icon displayed next to the link text.
+     */
     icon?: SubIcon;
-    /** the position of the icon in relation to the text */
+    /**
+     * The position of the icon relative to the text.
+     */
     iconPosition?: LinkIconPosition;
-    /** disable navigation */
+    /**
+     * If true, disables navigation when the link is clicked.
+     */
     disableNavigation?: boolean;
-    /** inherit text size */
+    /**
+     * If true, the link inherits the surrounding text's font size.
+     */
     inheritFontSize?: boolean;
-    /** if the link is in part of other text content */
+    /**
+     * If true, the link is styled to fit within inline text content.
+     */
     inlineText?: boolean;
     /** The link's color style */
     color?: LinkColor;

package/dist/components/List/List.d.ts

@@ -6,26 +6,35 @@ import { ListWrapperComponentType as ListWrapperComponentTypeEnum } from "./List
 import { ListElement } from "./List.types";
 export interface ListProps extends VibeComponentProps {
     /**
-     * the wrapping component to wrap the List Items [div, nav, ul, ol]
+     * The wrapping component for the list.
      */
     component?: ListElement;
     /**
-     * ARIA label string to describe to list
+     * The ARIA label describing the list.
      */
     ariaLabel?: string;
     /**
-     * ARIA described by string to reference an id to describe by
+     * The ID of an element that describes the list.
      */
     ariaDescribedBy?: string;
+    /**
+     * The ID of an element controlled by the list.
+     */
     "aria-controls"?: AriaAttributes["aria-controls"];
+    /**
+     * The child elements inside the list.
+     */
     children?: ReactElement<ListItemProps | ListTitleProps> | ReactElement<ListItemProps | ListTitleProps>[];
     /**
-     * Using virtualized list for rendering only the items which visible to the user in any given user (performance optimization)
+     * If true, uses a virtualized list to render only visible items for performance optimization.
      */
     renderOnlyVisibleItems?: boolean;
+    /**
+     * Custom inline styles applied to the list.
+     */
     style?: CSSProperties;
     /**
-     * ARIA role for the list.
+     * The ARIA role of the list.
      */
     role?: AriaRole;
 }

package/dist/components/List/VirtualizedListItems/VirtualizedListItems.d.ts

@@ -3,6 +3,9 @@ import { ListItemProps } from "../../../components/ListItem/ListItem";
 import { ListTitleProps } from "../../ListTitle/ListTitle";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 export interface VirtualizedListItemsProps extends VibeComponentProps {
+    /**
+     * The list of children.
+     */
     children?: React.ReactElement<ListItemProps | ListTitleProps> | React.ReactElement<ListItemProps | ListTitleProps>[];
 }
 export declare const VirtualizedListItems: React.FC<VirtualizedListItemsProps>;