@vibe/core 3.35.0 → 3.36.0

package/dist/components/MenuButton/MenuButton.d.ts

@@ -8,88 +8,136 @@ import { DialogOffset, DialogPosition, DialogSize, DialogTriggerEvent } from "..
 import { TooltipPositions } from "../Tooltip/Tooltip.types";
 export interface MenuButtonProps extends VibeComponentProps {
     /**
-     * Control the button's selected state
+     * If true, the button is in an active state.
      */
     active?: boolean;
     /**
-     *Class name to add to the button when the dialog is open
+     * Class name applied to the button when the dialog is open.
      */
     openDialogComponentClassName?: string;
     /**
-     * Receives React Component
+     * The component used as the button icon.
      */
     component?: (() => JSX.Element) | React.ElementType;
+    /**
+     * The size of the button.
+     */
     size?: MenuButtonSize;
+    /**
+     * If true, the menu is open.
+     */
     open?: boolean;
+    /**
+     * Callback fired when the button is clicked.
+     */
     onClick?: (event: React.MouseEvent) => void;
+    /**
+     * The z-index of the menu.
+     */
     zIndex?: number;
+    /**
+     * The label of the button for accessibility.
+     */
     ariaLabel?: string;
+    /**
+     * Class name applied to the menu dialog wrapper.
+     */
     dialogClassName?: string;
     /**
-     * main - `dialogOffset.main` - main axis offset; `dialogOffset.secondary` secondary axis offset
+     * The offset of the menu relative to the button.
      */
     dialogOffset?: DialogOffset;
+    /**
+     * The padding size inside the menu dialog.
+     */
     dialogPaddingSize?: DialogSize;
+    /**
+     * The position of the menu dialog relative to the button.
+     */
     dialogPosition?: DialogPosition;
+    /**
+     * Class name ignored for dialog show trigger.
+     */
     dialogShowTriggerIgnoreClass?: string;
+    /**
+     * Class name ignored for dialog hide trigger.
+     */
     dialogHideTriggerIgnoreClass?: string;
     /**
-     * the container selector in which to append the dialog
-     * for examples: "body" , ".my-class", "#my-id"
+     * The container selector in which to append the dialog.
      */
     dialogContainerSelector?: string;
     /**
-     * Dialog Alignment
+     * The starting edge alignment of the menu.
      */
     startingEdge?: string;
+    /**
+     * Callback fired when the menu is shown.
+     */
     onMenuShow?: () => void;
+    /**
+     * Callback fired when the menu is hidden.
+     */
     onMenuHide?: () => void;
     /**
-     * Text to be displayed after the icon
+     * The text displayed inside the button.
      */
     text?: string;
+    /**
+     * If true, the button is disabled.
+     */
     disabled?: boolean;
+    /**
+     * The tooltip content displayed when hovering over the button.
+     */
     tooltipContent?: string;
     /**
-     Remove "Tab" key from the hide trigger
+     * If true, removes the tab key from the hide trigger.
      */
     removeTabCloseTrigger?: boolean;
     /**
-     is an array with the content of types:
-     CLICK, CLICK_OUTSIDE, ESCAPE_KEY, TAB_KEY, MOUSE_ENTER, MOUSE_LEAVE,
-     ENTER, MOUSE_DOWN, FOCUS, BLUR, CONTENT_CLICK
+     * The triggers that cause the tooltip to show or hide.
      */
     tooltipTriggers?: DialogTriggerEvent | DialogTriggerEvent[];
     /**
-     * the disabled/tooltip position of the menu button - one of the MenuButton.dialogPositions
+     * The position of the tooltip.
      */
     tooltipPosition?: TooltipPositions;
     /**
-     * Tooltip Element Wrapper ClassName
+     * Class name applied to the tooltip reference wrapper.
      */
     tooltipReferenceClassName?: string;
+    /**
+     * Additional props for customizing the tooltip.
+     */
     tooltipProps?: Partial<TooltipProps>;
     /**
-     * When the MenuButton is hidden hide the dialog and tooltip as well
+     * If true, hides the menu and tooltip when the button is not visible.
      */
     hideWhenReferenceHidden?: boolean;
+    /**
+     * The content inside the menu button.
+     */
     children?: ElementContent;
     /**
-     * Specifies whether to render the component before or after the text
+     * The position of the component relative to the text.
      */
     componentPosition?: MenuButtonComponentPosition;
     /**
-     * Element to be used as the trigger element for the Menu - default is button
+     * The element used as the trigger for the menu.
      */
     triggerElement?: React.ElementType;
     /**
-     * Close the menu when an item is clicked
+     * If true, closes the menu when a menu item is clicked.
      */
     closeMenuOnItemClick?: boolean;
     /**
-     * Whether tooltip should appear only when the trigger element is hovered and not the menu dialog
+     * If true, the tooltip appears only when hovering over the trigger element, not the menu dialog.
      */
     showTooltipOnlyOnTriggerElement?: boolean;
+    /**
+     * If true, closes the menu when clicking inside the dialog.
+     */
     closeDialogOnContentClick?: boolean;
 }
 declare const _default: ((VibeComponent<MenuButtonProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{

package/dist/components/Modal/ModalContent/ModalContent.types.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { VibeComponentProps } from "../../../types";
 export interface ModalContentProps extends VibeComponentProps {
     /**
-     * Main content of the modal.
+     * The main content of the modal.
      */
     children?: React.ReactNode;
 }

package/dist/components/Modal/ModalMedia/ModalMedia.types.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { VibeComponentProps } from "../../../types";
 export interface ModalMediaProps extends VibeComponentProps {
     /**
-     * Media content to be displayed in the modal (image, video, Lottie, etc.).
+     * The media content displayed in the modal.
      */
     children: React.ReactNode;
 }

package/dist/components/Modal/ModalTopActions/ModalTopActions.types.d.ts

@@ -6,20 +6,20 @@ export type ModalTopActionsTheme = "light" | "dark";
 export type ModalTopActionsButtonColor = Extract<ButtonColor, "primary" | "fixed-light" | "fixed-dark">;
 export interface ModalTopActionsProps {
     /**
-     * Action element or render function for the top-right area.
-     * When provided as a function, receives the current button color theme
+     * The action element or a function that renders an action element in the top-right area.
+     * When provided as a function, it receives the current button color theme.
      */
     renderAction?: React.ReactElement<typeof MenuButton | typeof IconButton> | ((color?: ModalTopActionsButtonColor) => React.ReactElement<typeof MenuButton | typeof IconButton>);
     /**
-     * Color theme for the top actions
+     * The color theme for the top actions.
      */
     theme?: ModalTopActionsTheme;
     /**
-     * Accessibility label for the close button
+     * The label of the close button for accessibility.
      */
     closeButtonAriaLabel?: string;
     /**
-     * Callback fired when the close button is clicked
+     * Callback fired when the close button is clicked.
      */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }

package/dist/components/Modal/context/ModalContext.types.d.ts

@@ -3,7 +3,7 @@ export type ModalContextProps = ModalProviderValue;
 export type ModalProviderValue = {
     /**
      * Unique identifier for the modal.
-     * In use to set the modal title and description IDs to be unique.
+     * Used to ensure modal title and description IDs are unique.
      */
     modalId: string;
     /**
@@ -15,18 +15,18 @@ export type ModalProviderValue = {
      */
     setDescriptionId: (id: string) => void;
     /**
-     * Passed from the Modal component, `true` by default, `false` if set by user.
+     * If true, the modal automatically focuses on open.
      */
     autoFocus?: boolean;
 };
 export interface ModalProviderProps {
     /**
-     * Context value containing modal state and handlers.
+     * The context value containing modal state and handlers.
      */
     value: ModalProviderValue;
     /**
-     * Modal provider children.
-     * Should be the Modal root.
+     * The children of the modal provider.
+     * Should wrap the root of the Modal.
      */
     children: React.ReactNode;
 }

package/dist/components/Modal/footers/ModalFooter/ModalFooter.types.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
 export interface ModalFooterProps extends Omit<ModalFooterBaseProps, "renderAction"> {
     /**
-     * Optional content to render on the left side of the footer.
+     * Content displayed on the left side of the footer.
      */
     renderSideAction?: React.ReactNode;
 }

package/dist/components/Modal/footers/ModalFooterBase/ModalFooterBase.types.d.ts

@@ -4,11 +4,11 @@ import { VibeComponentProps } from "../../../../types";
 import { TooltipProps } from "../../../Tooltip";
 export interface ModalFooterActionProps extends Omit<ButtonProps, "children" | "kind" | "size"> {
     /**
-     * Text to display as the Button's content.
+     * The text displayed inside the button.
      */
     text: string;
     /**
-     * Use when there's a need to display a tooltip on the button (e.g., explain why disabled).
+     * Props for displaying a tooltip on the button.
      */
     tooltipProps?: Partial<TooltipProps>;
 }
@@ -22,7 +22,7 @@ export interface ModalFooterBaseProps extends VibeComponentProps {
      */
     secondaryButton?: ModalFooterActionProps;
     /**
-     * Additional content to render in the footer.
+     * Additional content rendered inside the footer.
      */
     renderAction?: React.ReactNode;
 }

package/dist/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.types.d.ts

@@ -2,13 +2,13 @@ import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
 import { VibeComponentProps } from "../../../../types";
 export interface ModalFooterWizardProps extends Required<Pick<ModalFooterBaseProps, "primaryButton" | "secondaryButton">>, VibeComponentProps {
     /**
-     * Total number of steps in the wizard.
-     * This would render the appropriate number of step indicators ("dots") in the footer.
+     * The total number of steps in the wizard.
+     * Renders the corresponding number of step indicators ("dots") in the footer.
      */
     stepCount: number;
     /**
-     * Current active step (0-based index).
-     * This would highlight the corresponding step indicator ("dot") in the footer.
+     * The current active step (0-based index).
+     * Highlights the corresponding step indicator ("dot") in the footer.
      */
     activeStep: number;
     /**

package/dist/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.types.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { VibeComponentProps } from "../../../../types";
 export interface ModalBasicLayoutProps extends VibeComponentProps {
     /**
-     * Layout children in the following order:
+     * The content of the layout, structured as:
      * 1. Header content
      * 2. Main content
      */

package/dist/components/Modal/layouts/ModalFooterShadow.types.d.ts

@@ -1,6 +1,6 @@
 export interface ModalFooterShadowProps {
     /**
-     * Controls the visibility of the shadow.
+     * If true, the shadow is visible.
      */
     show: boolean;
 }

package/dist/components/Modal/layouts/ModalLayoutScrollableContent.types.d.ts

@@ -5,11 +5,11 @@ export interface ModalLayoutScrollableContentProps {
      */
     onScroll?: UIEventHandler<HTMLDivElement>;
     /**
-     * Additional class name.
+     * Class name applied to the scrollable content container.
      */
     className?: string;
     /**
-     * Scrollable content.
+     * The scrollable content.
      */
     children: ReactNode;
 }

package/dist/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.types.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { VibeComponentProps } from "../../../../types";
 export interface ModalMediaLayoutProps extends VibeComponentProps {
     /**
-     * Layout children in the following order:
+     * The content of the layout, structured as:
      * 1. Media content
      * 2. Header content
      * 3. Main content

package/dist/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.d.ts

@@ -2,7 +2,7 @@ import { VibeComponentProps } from "../../../../types";
 import React from "react";
 export interface ModalSideBySideLayoutProps extends VibeComponentProps {
     /**
-     * Layout children in the following order:
+     * The content of the layout, structured as:
      * 1. Header content
      * 2. Main content
      * 3. Media content

package/dist/components/MultiStepIndicator/MultiStepIndicator.d.ts

@@ -3,15 +3,45 @@ import { MultiStepType as MultiStepTypeEnum, Size as SizeEnum, StepStatus as Ste
 import { MultiStepType, MultiStepSize, TextPlacement, Step } from "./MultiStep.types";
 import { SubIcon, VibeComponent, VibeComponentProps } from "../../types";
 export interface MultiStepIndicatorProps extends VibeComponentProps {
+    /**
+     * The list of steps in the multi-step indicator.
+     */
     steps?: Step[];
+    /**
+     * The visual style of the multi-step indicator.
+     */
     type?: MultiStepType;
+    /**
+     * Class name applied to each step component.
+     */
     stepComponentClassName?: string;
+    /**
+     * Class name applied to the divider between steps.
+     */
     dividerComponentClassName?: string;
+    /**
+     * The icon used for fulfilled steps.
+     */
     fulfilledStepIcon?: SubIcon;
+    /**
+     * The type of the fulfilled step icon.
+     */
     fulfilledStepIconType?: "svg" | "font";
+    /**
+     * If true, displays the step number instead of the fulfilled step icon.
+     */
     isFulfilledStepDisplayNumber?: boolean;
+    /**
+     * Callback fired when a step is clicked.
+     */
     onClick?: (stepNumber: number) => void;
+    /**
+     * The placement of the step text.
+     */
     textPlacement?: TextPlacement;
+    /**
+     * The size of the multi-step indicator.
+     */
     size?: MultiStepSize;
 }
 declare const _default: ((VibeComponent<MultiStepIndicatorProps & React.RefAttributes<HTMLOListElement>, HTMLOListElement> & Partial<{

package/dist/components/MultiStepIndicator/components/StepIndicator/StepIndicator.d.ts

@@ -2,26 +2,83 @@ import React from "react";
 import { MultiStepSize, MultiStepType, StepStatus } from "../../MultiStep.types";
 import { SubIcon, VibeComponentProps } from "../../../../types";
 export interface StepCircleDisplayProps {
+    /**
+     * The status of the step.
+     */
     status: StepStatus;
+    /**
+     * If true, displays the step number instead of the fulfilled step icon.
+     */
     isFulfilledStepDisplayNumber: boolean;
+    /**
+     * The icon displayed when the step is fulfilled.
+     */
     fulfilledStepIcon: SubIcon;
+    /**
+     * The type of icon used.
+     */
     fulfilledStepIconType: "svg" | "font";
+    /**
+     * The step number in the sequence.
+     */
     stepNumber: number;
 }
 export interface StepIndicatorProps extends VibeComponentProps {
+    /**
+     * The status of the step.
+     */
     status: StepStatus;
+    /**
+     * The main title text for the step.
+     */
     titleText: string;
+    /**
+     * The subtitle text for the step.
+     */
     subtitleText?: string;
+    /**
+     * The number of the step in the sequence.
+     */
     stepNumber?: number;
+    /**
+     * Class name applied to the step component.
+     */
     stepComponentClassName?: string;
+    /**
+     * The visual style of the step indicator.
+     */
     type?: MultiStepType;
+    /**
+     * The icon used for a fulfilled step.
+     */
     fulfilledStepIcon?: SubIcon;
+    /**
+     * The type of icon used.
+     */
     fulfilledStepIconType?: "svg" | "font";
+    /**
+     * If true, displays the step number instead of the fulfilled step icon.
+     */
     isFulfilledStepDisplayNumber?: boolean;
+    /**
+     * Callback fired when the step is clicked.
+     */
     onClick?: (stepNumber: number) => void;
+    /**
+     * If true, adds a divider after the step.
+     */
     isFollowedByDivider?: boolean;
+    /**
+     * Class name applied to the step divider.
+     */
     stepDividerClassName?: string;
+    /**
+     * If true, the step indicator is displayed vertically.
+     */
     isVertical?: boolean;
+    /**
+     * The size of the step indicator.
+     */
     size?: MultiStepSize;
 }
 declare const StepIndicator: React.FC<StepIndicatorProps>;

package/dist/components/ProgressBars/LinearProgressBar/Bar/Bar.d.ts

@@ -4,30 +4,41 @@ import { LinearProgressBarStyle } from "../LinearProgressBar.types";
 export type BarType = "primary" | "secondary";
 export interface BarProps extends VibeComponentProps {
     /**
-     * Determine the progress bar style.
+     * Determines the visual style of the progress bar.
      */
     barStyle?: LinearProgressBarStyle;
     /**
-     * The progress bar starting value.
+     * The minimum value of the progress bar.
      */
     min?: number;
     /**
-     * The progress bar ending value.
+     * The maximum value of the progress bar.
      */
     max?: number;
     /**
-     * The progress bar current value.
+     * The current progress value.
      */
     value?: number;
     /**
-     * If set to *true*, animations are used.
+     * If true, enables animation effects.
      */
     animated?: boolean;
+    /**
+     * Base class name for the bar.
+     */
     baseClass?: string;
+    /**
+     * The ARIA label describing the progress bar.
+     */
     barLabelName?: string;
+    /**
+     * Custom color for the progress bar.
+     */
     color?: string;
+    /**
+     * The type of the bar.
+     */
     type?: BarType;
-    className?: string;
 }
 declare const Bar: FC<BarProps>;
 export default Bar;

package/dist/components/ProgressBars/LinearProgressBar/LinearProgressBar.d.ts

@@ -4,65 +4,62 @@ import { LinearProgressBarSize, LinearProgressBarStyle } from "./LinearProgressB
 import { VibeComponent, VibeComponentProps } from "../../../types";
 export interface LinearProgressBarProps extends VibeComponentProps {
     /**
-     * Determine the progress bar style.
+     * Determines the visual style of the progress bar.
      */
     barStyle?: LinearProgressBarStyle;
     /**
-     * The progress bar starting value.
+     * The minimum value of the progress bar.
      */
     min?: number;
     /**
-     * The progress bar ending value.
+     * The maximum value of the progress bar.
      */
     max?: number;
     /**
-     * The progress bar current value.
+     * The current progress value.
      */
     value?: number;
     /**
-     * The progress bar secondary value.
+     * The secondary progress value.
      */
     valueSecondary?: number;
     /**
-     * If set to *true*, animations are used.
+     * If true, enables animation effects.
      */
     animated?: boolean;
     /**
-     * Set external styling to the progress bar.
-     */
-    className?: string;
-    /**
-     * Determine the progress bar height (Supported options exposed through
+     * The size of the progress bar.
      */
     size?: LinearProgressBarSize;
     /**
-     * Show progress bar progression in percentages
+     * If true, displays the progress percentage.
      */
     indicateProgress?: boolean;
     /**
-     * Use multiple bars.
-     * ***Note:*** `value`, `valueSecondary` & `barStyle` won't be used
+     * If true, enables multiple progress bars.
+     * **Note:** `value`, `valueSecondary`, and `barStyle` will not be used.
      */
     multi?: boolean;
     /**
-     * Array of bar value objects {
-     * `value` - The progress value,
-     * `color` - hex [`#000000` ~ `#ffffff`] of the current bar
-     * }
+     * An array of bar values and colors for multi-bar mode.
      */
     multiValues?: {
         /**
-         * The progress bar current value.
+         * The progress value for a bar.
          */
         value?: number;
         /**
-         * The bar color in hex - #000000 ~ #ffffff
+         * The bar color in hex format (`#000000` - `#ffffff`).
          */
         color?: string;
     }[];
-    /** ARIA description for the progress bar */
+    /**
+     * The ARIA label for the progress bar.
+     */
     ariaLabel?: string;
-    /** Is the progress bar spread across the entire container width (width: 100%) */
+    /**
+     * If true, makes the progress bar span the full container width.
+     */
     fullWidth?: boolean;
 }
 declare const _default: ((VibeComponent<LinearProgressBarProps & React.RefAttributes<HTMLDivElement>, HTMLDivElement> & Partial<{

package/dist/components/ProgressBars/PercentageLabel/PercentageLabel.d.ts

@@ -1,11 +1,11 @@
 import { FC } from "react";
 export interface PercentageLabelProps {
     /**
-     * Replacement to `htmlFor` | `for` attribute.
+     * The ID of the element this label is associated with.
      */
     forElement: string;
     /**
-     * Determine the displayed percentage.
+     * The percentage value to display.
      */
     value: number;
 }