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

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

@@ -1,20 +1,65 @@
 import React from "react";
 import { IComboboxCategoryMap, IComboboxItem, IComboboxOption, IComboboxOptionEvents } from "../ComboboxConstants";
 export interface ComboboxItemsProps extends IComboboxOptionEvents {
+    /**
+     * Class name applied to the options container.
+     */
     className?: string;
+    /**
+     * Class name applied to individual options.
+     */
     optionClassName?: string;
+    /**
+     * The categories available in the combobox.
+     */
     categories?: IComboboxCategoryMap;
+    /**
+     * The list of options displayed in the combobox.
+     */
     options?: IComboboxItem[];
+    /**
+     * Custom renderer for an option.
+     */
     optionRenderer?: (option: IComboboxOption) => JSX.Element;
+    /**
+     * The index of the currently active item.
+     */
     activeItemIndex?: number;
+    /**
+     * The index of the item with visual focus.
+     */
     visualFocusItemIndex?: number;
+    /**
+     * The height of each option item.
+     */
     optionLineHeight?: number;
+    /**
+     * If true, the list scrolls to the selected item when opened.
+     */
     shouldScrollToSelectedItem?: boolean;
+    /**
+     * If true, only renders visible options (optimization for large lists).
+     */
     renderOnlyVisibleOptions?: boolean;
+    /**
+     * Callback fired when the active category changes.
+     */
     onActiveCategoryChanged?: (category: IComboboxItem) => void;
+    /**
+     * The maximum number of options displayed without scrolling.
+     */
     maxOptionsWithoutScroll?: number;
+    /**
+     * A map of item IDs to item data.
+     */
     itemsMap?: Map<string, IComboboxItem>;
+    /**
+     * If true, categories remain visible when scrolling.
+     */
     stickyCategories?: boolean;
+    /**
+     * The ID of the options container.
+     */
     id?: string;
 }
 export declare const ComboboxItems: React.FC<ComboboxItemsProps>;

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

@@ -1,15 +1,45 @@
 import React, { RefObject } from "react";
 import { ComboboxOptionIconType as ComboboxOptionIconTypeEnum, IComboboxOption, IComboboxOptionEvents } from "../ComboboxConstants";
 export interface ComboboxOptionProps extends IComboboxOptionEvents {
+    /**
+     * The index of the option in the list.
+     */
     index?: number;
+    /**
+     * The option data containing label, icons, and other properties.
+     */
     option?: IComboboxOption;
+    /**
+     * Class name applied to the option element.
+     */
     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?: RefObject<HTMLElement>;
+    /**
+     * The amount of offset when scrolling to the active item.
+     */
     scrollOffset?: number;
+    /**
+     * The height of each option.
+     */
     optionLineHeight?: number;
+    /**
+     * If true, scrolls to the active option when it is selected.
+     */
     shouldScrollWhenActive?: boolean;
+    /**
+     * Custom renderer for the option content.
+     */
     optionRenderer?: (option: IComboboxOption) => JSX.Element;
 }
 declare const _default: ((import("../../../../types/VibeComponent").default<ComboboxOptionProps, unknown> & Partial<{

package/dist/components/Counter/Counter.d.ts

@@ -3,30 +3,49 @@ import VibeComponentProps from "../../types/VibeComponentProps";
 import { CounterColor as CounterColorEnum, CounterSize as CounterSizeEnum, CounterType as CounterTypeEnum } from "./CounterConstants";
 import { CounterColor, CounterSize, CounterType } from "./Counter.types";
 export interface CounterProps extends VibeComponentProps {
-    /** id to pass to the element */
-    id?: string;
-    /** element id to describe the counter accordingly */
+    /**
+     * The ID of the element describing the counter.
+     */
     ariaLabeledBy?: string;
-    /** Custom class names to pass to the component wrapper */
-    className?: string;
-    /** Custom class names to pass to the component */
+    /**
+     * Class name applied to the counter element.
+     */
     counterClassName?: string;
-    /** The numeric value of the counter */
+    /**
+     * The numeric value displayed in the counter.
+     */
     count?: number;
-    /** Counter description */
+    /**
+     * The label of the counter for accessibility.
+     */
     ariaLabel?: string;
-    /** The size of the counter */
+    /**
+     * The size of the counter.
+     */
     size?: CounterSize;
+    /**
+     * The visual style of the counter.
+     */
     kind?: CounterType;
-    /** The color of the counter */
+    /**
+     * The color of the counter.
+     */
     color?: CounterColor;
-    /** maximum number of digits to display (see relevant story) */
+    /**
+     * The maximum number of digits displayed before truncation.
+     */
     maxDigits?: number;
-    /** Text prepended to counter value */
+    /**
+     * Text prepended to the counter value.
+     */
     prefix?: string;
-    /** Callback to be called when the counter is clicked. */
+    /**
+     * Callback fired when the counter is clicked.
+     */
     onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;
-    /** Disables the component's animation */
+    /**
+     * If true, disables counter animations.
+     */
     noAnimation?: boolean;
 }
 declare const _default: ((import("../../types/VibeComponent").default<CounterProps, unknown> & Partial<{

package/dist/components/DatePicker/DateNavigationItem/DateNavigationItem.d.ts

@@ -4,7 +4,13 @@ declare const ICONS: {
     next: React.FC<import("@vibe/icons/dist/react/MoveArrowRight").MoveArrowRightProps>;
 };
 export interface DateNavigationItemProps {
+    /**
+     * The type of navigation button.
+     */
     kind: keyof typeof ICONS;
+    /**
+     * Callback fired when the button is clicked.
+     */
     onClick?: () => void;
 }
 declare const DateNavigationItem: ({ kind, onClick }: DateNavigationItemProps) => React.JSX.Element;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -5,31 +5,57 @@ import VibeComponentProps from "../../types/VibeComponentProps";
 import VibeComponent from "../../types/VibeComponent";
 import "./external_datepicker.scss";
 export interface DatePickerProps extends VibeComponentProps {
-    /** set the first day of the week to display */
+    /**
+     * The first day of the week to display.
+     */
     firstDayOfWeek?: DayOfWeekShape;
-    /** current start date */
+    /**
+     * The currently selected date.
+     */
     date?: Moment;
-    /** current end date */
+    /**
+     * The end date for range selection mode.
+     */
     endDate?: Moment;
-    /** on date selected callback */
+    /**
+     * Callback fired when a date is selected.
+     */
     onPickDate?: (date: Moment | RangeDate) => void;
-    /** hide the month navigations keys */
+    /**
+     * If true, hides the navigation buttons.
+     */
     hideNavigationKeys?: boolean;
-    /** show days outside the cuurent month view */
+    /**
+     * If true, allows selecting days outside the current month.
+     */
     enableOutsideDays?: boolean;
-    /** show week number column */
+    /**
+     * If true, displays a column with week numbers.
+     */
     showWeekNumber?: boolean;
-    /** set the size of single day element */
+    /**
+     * The size of a single day cell.
+     */
     daySize?: number;
-    /** determine if day should be disabled */
+    /**
+     * Function to determine if a specific day should be disabled.
+     */
     shouldBlockDay?: (date: Moment) => boolean;
-    /** date range mode*/
+    /**
+     * If true, enables date range selection mode.
+     */
     range?: boolean;
-    /** number of month to display*/
+    /**
+     * The number of months displayed in the calendar.
+     */
     numberOfMonths?: number;
-    /** determine if year should be disabled */
+    /**
+     * Function to determine if a specific year should be disabled.
+     */
     shouldBlockYear?: (year: number) => boolean;
-    /** determine if date range should be disabled */
+    /**
+     * Function to determine if a specific date range should be disabled.
+     */
     shouldBlockRange?: (date: Moment) => boolean;
 }
 declare const DatePicker: VibeComponent<DatePickerProps, HTMLElement>;

package/dist/components/DatePicker/DatePickerHeader/DatePickerHeader.d.ts

@@ -1,11 +1,29 @@
 import React from "react";
 import { Moment } from "../types";
 export interface DatePickerHeaderProps {
+    /**
+     * The currently shown date.
+     */
     currentDate: Moment;
+    /**
+     * If true, the month and year selection view is active.
+     */
     isMonthYearSelection: boolean;
+    /**
+     * Callback fired when toggling the month and year picker.
+     */
     onToggleMonthYearPicker: () => void;
+    /**
+     * If true, hides the navigation buttons.
+     */
     hideNavigationKeys: boolean;
+    /**
+     * Test ID for testing purposes.
+     */
     "data-testid"?: string;
+    /**
+     * The ARIA label for the toggle button.
+     */
     ariaLabel?: string;
 }
 declare const DatePickerHeader: (props: DatePickerHeaderProps) => React.JSX.Element;

package/dist/components/DatePicker/YearPicker/YearPicker.d.ts

@@ -1,9 +1,21 @@
 import React from "react";
 import { Moment } from "../types";
 export interface YearPickerProps {
+    /**
+     * The currently selected date.
+     */
     selectedDate?: Moment;
+    /**
+     * Function to determine if a year should be blocked.
+     */
     isYearBlocked?: (year: number) => boolean;
+    /**
+     * Callback fired when changing the selected year.
+     */
     changeCurrentDate: (date: Moment) => void;
+    /**
+     * Test ID for testing purposes.
+     */
     "data-testid"?: string;
 }
 declare const YearPicker: ({ selectedDate, isYearBlocked, changeCurrentDate, "data-testid": dateTestId }: YearPickerProps) => React.JSX.Element;

package/dist/components/DatePicker/YearPicker/YearsList.d.ts

@@ -1,8 +1,20 @@
 import React from "react";
 export interface YearsListProps {
+    /**
+     * The list of years to display.
+     */
     yearsItems: number[];
+    /**
+     * Function to determine if a year should be blocked.
+     */
     isYearBlocked?: (year: number) => boolean;
+    /**
+     * Callback fired when a year is selected.
+     */
     onSelect: (year: number) => void;
+    /**
+     * The currently selected year.
+     */
     selectedYear: string;
 }
 declare const YearsList: ({ yearsItems, isYearBlocked, onSelect, selectedYear }: YearsListProps) => React.JSX.Element;

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

@@ -9,6 +9,12 @@ export declare enum Direction {
     prev = "prev"
 }
 export interface RangeDate {
+    /**
+     * The start date of the range.
+     */
     startDate: Moment | null;
+    /**
+     * The end date of the range.
+     */
     endDate: Moment | null;
 }

package/dist/components/Dialog/Dialog.d.ts

@@ -8,142 +8,156 @@ import { DialogAnimationType, DialogPosition, DialogTriggerEvent } from "./Dialo
 import LayerContext from "../LayerProvider/LayerContext";
 export interface DialogProps extends VibeComponentProps {
     /**
-     * A Classname to be added to <span> element which wraps the children
+     * Class name applied to the reference wrapper element.
      */
     referenceWrapperClassName?: string;
     /**
-     * Where the dialog should be in reference to the children,
-     * Top, Left, Right, Bottom ...
+     * The placement of the dialog relative to the reference element.
      */
     position?: DialogPosition;
     /**
-     * PopperJS Modifiers type
+     * Custom Popper.js modifiers.
      * https://popper.js.org/docs/v2/modifiers/
      */
     modifiers?: Modifier<any>[];
+    /**
+     * The starting edge of the dialog.
+     */
     startingEdge?: string;
     /**
-     * How much to move the dialog in relative to children
-     * main is the axis in which the position is aligned to
-     * secondary is the vertical axes to the position
+     * Offset values for positioning adjustments.
+     * `main` - horizontal offset
+     * `secondary` - vertical offset
      */
     moveBy?: {
         main?: number;
         secondary?: number;
     };
     /**
-     * how much delay should the Dialog wait until it should trigger the show in MS
+     * Delay in milliseconds before showing the dialog.
      */
     showDelay?: number;
     /**
-     * how much delay should the Dialog wait until it should trigger the hide in MS
+     * Delay in milliseconds before hiding the dialog.
      */
     hideDelay?: number;
     /**
-     * an array of hide/show trigger -
+     * Events that trigger showing the dialog.
      */
     showTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
     /**
-     * an array of hide/show trigger -
+     * Events that trigger hiding the dialog.
      */
     hideTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
     /**
-     * If true, prevents opened Dialog from closing on mouseEnter, and closes Dialog when mouse leaves it
+     * If true, prevents closing the dialog when the mouse enters it.
      */
     showOnDialogEnter?: boolean;
     /**
-     * Show the Dialog when the children are mounting
+     * If true, shows the dialog when the component mounts.
      */
     shouldShowOnMount?: boolean;
     /**
-     * disable the opening of the dialog
+     * If true, disables opening the dialog.
      */
     disable?: boolean;
     /**
-     * open is a controlled prop to open the dialog
+     * Controls the open state of the dialog.
      */
     open?: boolean;
     /**
-     * used when state is derived from props
+     * Derived state control for managing dialog visibility.
      */
     isOpen?: boolean;
     /**
-     * if this class exists on the children the show trigger will be ignored
+     * Classes that prevent showing the dialog when present.
      */
     showTriggerIgnoreClass?: string | Array<string>;
     /**
-     * if this class exists on the children the hide trigger will be ignored
+     * Classes that prevent hiding the dialog when present.
      */
     hideTriggerIgnoreClass?: string | Array<string>;
     /**
-     * Dialog animation type
+     * The animation type used for the dialog.
      */
     animationType?: DialogAnimationType;
     /**
-     * Classname to be added to the content container
+     * Class name applied to the dialog content container.
      */
     wrapperClassName?: string;
     /**
-     * Prevent Animation
+     * If true, prevents animation when mounting.
      */
     preventAnimationOnMount?: boolean;
     /**
-     * the container selector in which to append the dialog
-     * for examples: "body" , ".my-class", "#my-id"
+     * The CSS selector of the container where the dialog is rendered.
      */
     containerSelector?: string;
     /**
-     * should position the tooltip element
-     * https://popper.js.org/docs/v2/modifiers/arrow/
+     * If true, positions the tooltip element.
      */
     tooltip?: boolean;
     /**
-     * class name to add to the tooltip element
+     * Class name applied to the tooltip element.
      */
     tooltipClassName?: string;
     /**
-     * callback to be called when the dialog is shown
+     * Callback fired when the dialog is shown.
      */
     onDialogDidShow?: (event?: DialogEvent, eventName?: DialogTriggerEvent | string) => void;
     /**
-     * callback to be called when the dialog is hidden
+     * Callback fired when the dialog is hidden.
      */
     onDialogDidHide?: (event: DialogEvent, eventName: DialogTriggerEvent | string) => void;
     /**
-     * callback to be called when click outside is being triggered
+     * Callback fired when clicking outside the dialog.
      */
     onClickOutside?: (event: React.MouseEvent) => void;
     /**
-     * callback to be called when click on the content is being triggered
+     * Callback fired when clicking inside the dialog content.
      */
     onContentClick?: (event: React.MouseEvent) => void;
     /**
-     * z-index to add to the dialog
+     * The z-index applied to the dialog.
      */
     zIndex?: number;
+    /**
+     * If true, uses derived state from props.
+     */
     useDerivedStateFromProps?: boolean;
     /**
-     * Make the dialog disappear when the element it is attached to becomes hidden
+     * If true, makes the dialog disappear when the reference element is hidden.
      */
     hideWhenReferenceHidden?: boolean;
+    /**
+     * If true, triggers the callback when the dialog mounts.
+     */
     shouldCallbackOnMount?: boolean;
+    /**
+     * If true, instantly shows and hides the dialog without delay.
+     */
     instantShowAndHide?: boolean;
+    /**
+     * Callback to dynamically adjust show delay and animation behavior.
+     */
     getDynamicShowDelay?: () => {
         showDelay: number;
         preventAnimation: boolean;
     };
+    /**
+     * The content displayed inside the dialog.
+     */
     content?: (() => JSX.Element) | JSX.Element;
     /**
-     * The element where we will position the dialog beside.
+     * The element to position the dialog beside.
      */
     children?: ReactElement | ReactElement[] | string;
     /**
-     * Treats keyboard focus/blur events as mouse-enter/mouse-leave events
+     * If true, keyboard focus/blur events behave like mouse enter/leave.
      */
     addKeyboardHideShowTriggersByDefault?: boolean;
     /**
-     * If true disable the scroll for the containerSelector element.
-     * If string use it as selector to prevent scroll.
+     * If true, disables scrolling for the container element.
      */
     disableContainerScroll?: boolean | string;
     /**
@@ -157,8 +171,17 @@ export interface DialogProps extends VibeComponentProps {
     observeContentResize?: boolean;
 }
 export interface DialogState {
+    /**
+     * If true, the dialog is open.
+     */
     isOpen?: boolean;
+    /**
+     * If true, the dialog state is derived from props.
+     */
     shouldUseDerivedStateFromProps?: boolean;
+    /**
+     * If true, prevents animation when opening or closing the dialog.
+     */
     preventAnimation?: boolean;
 }
 export type DialogEvent = React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent;

package/dist/components/Dialog/DialogContent/DialogContent.d.ts

@@ -3,28 +3,77 @@ import { VibeComponent, VibeComponentProps } from "../../../types";
 import { DialogAnimationType, DialogTriggerEvent } from "../Dialog.types";
 import * as PopperJS from "@popperjs/core";
 export interface DialogContentProps extends VibeComponentProps {
+    /**
+     * The content inside the dialog.
+     */
     children?: ReactElement | ReactElement[];
+    /**
+     * The placement of the dialog relative to the reference element.
+     */
     position?: PopperJS.Placement;
+    /**
+     * Class name applied to the dialog wrapper.
+     */
     wrapperClassName?: string;
+    /**
+     * If true, the dialog is open.
+     */
     isOpen?: boolean;
+    /**
+     * The starting edge of the dialog.
+     */
     startingEdge?: any;
+    /**
+     * The animation type used for showing/hiding the dialog.
+     */
     animationType?: DialogAnimationType;
+    /**
+     * Callback fired when the Escape key is pressed.
+     */
     onEsc?: (event: React.KeyboardEvent) => void;
+    /**
+     * Callback fired when the mouse enters the dialog.
+     */
     onMouseEnter?: (event: React.MouseEvent) => void;
+    /**
+     * Callback fired when the mouse leaves the dialog.
+     */
     onMouseLeave?: (event: React.MouseEvent) => void;
+    /**
+     * Callback fired when clicking outside the dialog.
+     */
     onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;
+    /**
+     * Callback fired when clicking inside the dialog.
+     */
     onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Delay before showing the dialog.
+     */
     showDelay?: number;
+    /**
+     * Inline styles applied to the dialog.
+     */
     styleObject?: CSSProperties;
+    /**
+     * If true, hides the reference element when the dialog is shown.
+     */
     isReferenceHidden?: boolean;
+    /**
+     * If true, applies tooltip arrow to the dialog.
+     */
     hasTooltip?: boolean;
+    /**
+     * The CSS selector of the container where the dialog should be rendered.
+     */
     containerSelector?: string;
+    /**
+     * If true, disables scrolling in the container when the dialog is open.
+     */
     disableContainerScroll?: boolean | string;
     /**
-     * On context menu event (right click) outside of the dialog
-     * @param e
+     * Callback fired when the context menu (right-click) event occurs outside the dialog.
      */
     onContextMenu?: (e: React.MouseEvent) => void;
-    "data-testid"?: string;
 }
 export declare const DialogContent: VibeComponent<DialogContentProps>;

package/dist/components/DialogContentContainer/DialogContentContainer.d.ts

@@ -3,11 +3,29 @@ import { DialogSize as DialogSizeEnum, DialogType as DialogTypeEnum } from "../D
 import { DialogSize, DialogType } from "../Dialog/Dialog.types";
 import { VibeComponentProps, VibeComponent } from "../../types";
 export interface DialogContentContainerProps extends VibeComponentProps {
+    /**
+     * The content inside the dialog container.
+     */
     children?: React.ReactNode;
+    /**
+     * The ID of the element that labels this dialog.
+     */
     ariaLabelledby?: string;
+    /**
+     * The ID of the element that describes this dialog.
+     */
     ariaDescribedby?: string;
+    /**
+     * The type of dialog.
+     */
     type?: DialogType;
+    /**
+     * The size of the dialog.
+     */
     size?: DialogSize;
+    /**
+     * Custom styles applied to the dialog container.
+     */
     style?: React.CSSProperties;
 }
 declare const _default: ((VibeComponent<DialogContentContainerProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{