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

package/dist/components/RadioButton/RadioButton.d.ts

@@ -2,36 +2,65 @@ import React from "react";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import VibeComponent from "../../types/VibeComponent";
 export interface RadioButtonProps extends VibeComponentProps {
-    /**  class to be added to wrapping component */
-    className?: string;
-    /** class to add to the  text/label */
+    /**
+     * Class name applied to the label text.
+     */
     labelClassName?: string;
-    /** class to be added to the radiobutton */
+    /**
+     * Class name applied to the radio button element.
+     */
     radioButtonClassName?: string;
-    /** text value */
+    /**
+     * The label text displayed next to the radio button.
+     */
     text?: string;
-    /** 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 associated with the radio button.
+     */
     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 radio button group.
+     */
     name?: string;
-    /** is autoFocus */
+    /**
+     * If true, the radio button automatically receives focus on mount.
+     */
     autoFocus?: boolean;
-    /** is disabled */
+    /**
+     * If true, the radio button is disabled.
+     */
     disabled?: boolean;
-    /** why the input is disabled */
+    /**
+     * The reason why the radio button is disabled, displayed in a tooltip.
+     */
     disabledReason?: string;
-    /** default checked value*/
+    /**
+     * If true, the radio button is checked by default.
+     */
     defaultChecked?: boolean;
+    /**
+     * The child elements inside the radio button.
+     */
     children?: React.ReactNode;
-    /** callback function when value changed */
+    /**
+     * Callback fired when the radio button selection changes.
+     */
     onSelect?: (event: React.ChangeEvent<HTMLInputElement | null>) => void;
-    /** controlled the radio button state */
+    /**
+     * If provided, controls the checked state of the radio button.
+     */
     checked?: boolean;
-    /** react to click on children */
+    /**
+     * If true, clicking on children will trigger selection.
+     */
     retainChildClick?: boolean;
-    /** add tab index to the children */
+    /**
+     * The tab index applied to the children.
+     */
     childrenTabIndex?: string;
-    /** disabled animation */
+    /**
+     * If true, disables the label animation.
+     */
     noLabelAnimation?: boolean;
 }
 declare const RadioButton: VibeComponent<RadioButtonProps, HTMLElement> & object;

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

@@ -5,99 +5,99 @@ import IconButton from "../IconButton/IconButton";
 import MenuButton from "../MenuButton/MenuButton";
 export interface SearchProps extends VibeComponentProps {
     /**
-     * Name of the icon used for the search button.
+     * The icon used for the search button.
      */
     searchIconName?: SubIcon;
     /**
-     * Name of the icon used for the clear button.
+     * The icon used for the clear button.
      */
     clearIconName?: SubIcon;
     /**
-     * Label for the clear icon button, for accessibility purposes.
+     * The label for the clear button, for accessibility purposes.
      */
     clearIconLabel?: string;
     /**
-     * Render additional action within the right section of search component.
+     * Renders an additional action button in the search input.
      */
     renderAction?: React.ReactElement<typeof IconButton | typeof MenuButton>;
     /**
-     * If true, hides the additional action when the user types in the search input.
+     * If true, hides the additional action button when input has text.
      */
     hideRenderActionOnInput?: boolean;
     /**
-     * The value of the search input.
+     * The current value of the search input.
      */
     value?: HTMLInputElement["value"];
     /**
-     * Placeholder text for the search input when it's empty.
+     * The placeholder text displayed when the input is empty.
      */
     placeholder?: HTMLInputElement["placeholder"];
     /**
-     * Size of the input element. Will influence also padding and font size.
+     * The size of the search input, affecting padding and font size.
      */
     size?: InputSize;
     /**
-     * If true, the search input is disabled and cannot be interacted with.
+     * If true, disables the search input.
      */
     disabled?: HTMLInputElement["disabled"];
     /**
-     * Shows a loading indicator in the search component, typically used while fetching results.
+     * If true, displays a loading indicator inside the input.
      */
     loading?: boolean;
     /**
-     * If true, the search input is automatically focused when the component mounts.
+     * If true, automatically focuses the search input on mount.
      */
     autoFocus?: HTMLInputElement["autofocus"];
     /**
-     * Configures the browser's autocomplete feature for the search input.
+     * Configures the browser's autocomplete behavior.
      */
     autoComplete?: HTMLInputElement["autocomplete"];
     /**
-     * Aria-label for the search input, important for accessibility.
+     * The ARIA label for the search input.
      */
     inputAriaLabel?: React.AriaAttributes["aria-label"];
     /**
-     * aria to be set if the popup is open.
+     * If true, indicates that a popup is open.
      */
     ariaExpanded?: React.AriaAttributes["aria-expanded"];
     /**
-     * aria to be set the sarch result popup's type.
+     * Specifies the type of popup associated with the search input.
      */
     ariaHasPopup?: React.AriaAttributes["aria-haspopup"];
     /**
-     * Rate at which search input changes are debounced.
+     * The debounce rate for input value changes.
      */
     debounceRate?: number;
     /**
-     * The id of the container element where search results are to be displayed.
+     * The ID of the container where search results are displayed.
      */
     searchResultsContainerId?: string;
     /**
-     * ARIA property that identifies the currently active item within the search results.
+     * ARIA property indicating the currently active search result.
      */
     currentAriaResultId?: React.AriaAttributes["aria-activedescendant"];
     /**
-     * Callback function that is called whenever the value of the search input changes.
+     * Callback fired when the search input value changes.
      */
     onChange?: (value: string) => void;
     /**
-     * Callback function that is called when the search input loses focus.
+     * Callback fired when the search input loses focus.
      */
     onBlur?: (event: React.FocusEvent) => void;
     /**
-     * Callback function that is called when the search input gains focus.
+     * Callback fired when the search input gains focus.
      */
     onFocus?: (event: React.FocusEvent) => void;
     /**
-     * Callback function that is called when the clear button is clicked.
+     * Callback fired when the clear button is clicked.
      */
     onClear?: () => void;
     /**
-     * Callback function that is called when a keyboard key is down.
+     * Callback fired when a key is pressed inside the input.
      */
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
-     * Controls the visibility of the clear icon.
+     * If true, displays a clear button inside the search input.
      */
     showClearIcon?: boolean;
 }

package/dist/components/Skeleton/Skeleton.d.ts

@@ -3,13 +3,28 @@ import { SkeletonType as SkeletonTypeEnum, TextSkeletonSize as TextSkeletonSizeE
 import { SkeletonType, SkeletonSizeType } from "./Skelton.types";
 import { VibeComponentProps } from "../../types";
 export interface SkeletonProps extends VibeComponentProps {
+    /**
+     * The type of skeleton.
+     */
     type?: SkeletonType;
+    /**
+     * The predefined size of the skeleton.
+     */
     size?: SkeletonSizeType;
+    /**
+     * The width of the skeleton in pixels.
+     */
     width?: number;
+    /**
+     * The height of the skeleton in pixels.
+     */
     height?: number;
+    /**
+     * Class name applied to the wrapper element.
+     */
     wrapperClassName?: string;
     /**
-     * Is the skeleton wrapper width equal to its container
+     * If true, the skeleton will take up the full width of its container.
      */
     fullWidth?: boolean;
 }

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

@@ -1,8 +1,20 @@
 import React from "react";
 import { VibeComponentProps } from "../../types";
 export interface SlideTransitionProps extends VibeComponentProps {
+    /**
+     * The direction of the slide transition.
+     */
     direction: SlideDirection;
+    /**
+     * Custom inline styles applied to the transition container.
+     */
     style?: React.CSSProperties;
+    /**
+     * The content inside the transition container.
+     */
     children: React.ReactNode;
 }
+/**
+ * Defines the possible slide transition directions.
+ */
 export type SlideDirection = "forward" | "backward";

package/dist/components/Slider/SelectionIndicator.d.ts

@@ -2,7 +2,13 @@ import React from "react";
 import { InfixKind } from "./Slider.types";
 import VibeComponentProps from "../../types/VibeComponentProps";
 export interface SelectionIndicatorProps extends VibeComponentProps {
+    /**
+     * Determines whether the selection indicator is a prefix or postfix.
+     */
     kind?: InfixKind;
+    /**
+     * The key for the selection indicator (used for React key uniqueness).
+     */
     key?: InfixKind;
 }
 declare const SelectionIndicator: React.FC<SelectionIndicatorProps>;

package/dist/components/Slider/SliderBase/SliderFilledTrack.d.ts

@@ -3,22 +3,20 @@ import VibeComponentProps from "../../../types/VibeComponentProps";
 import { SliderColor } from "../Slider.types";
 export interface SliderFilledTrackProps extends VibeComponentProps {
     /**
-     * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node
-     */
-    className?: string;
-    /**
-     * Size of filled track, according to selected value of component (Slider)
+     * The size of the filled track, based on the selected value.
      */
     dimension?: number;
     /**
-     * Offset from start of track
+     * The offset from the start of the track.
      */
     offset?: number;
     /**
-     * Start Filled Track from the end of the track
-     * (`right` for LTR and `left` for RTL, `bottom` for vertical)
+     * If true, the filled track starts from the end instead of the beginning.
      */
     reverse?: boolean;
+    /**
+     * The color of the filled track.
+     */
     color: SliderColor;
 }
 declare const SliderFilledTrack: FC<SliderFilledTrackProps>;

package/dist/components/Slider/SliderBase/SliderRail.d.ts

@@ -4,14 +4,16 @@ import { VibeComponent } from "../../../types";
 import { SliderSize } from "../Slider.types";
 export interface SliderRailProps extends VibeComponentProps {
     /**
-     * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node
+     * Callback fired when the rail is clicked.
      */
-    className?: string;
+    onClick?: (event: React.MouseEvent) => void;
     /**
-     * onClick callback function
+     * The child elements inside the slider rail.
      */
-    onClick?: (event: React.MouseEvent) => void;
     children?: ReactElement | ReactElement[];
+    /**
+     * The size of the slider rail.
+     */
     size: SliderSize;
 }
 declare const SliderRail: VibeComponent<SliderRailProps, unknown>;

package/dist/components/Slider/SliderBase/SliderThumb.d.ts

@@ -3,22 +3,24 @@ import VibeComponentProps from "../../../types/VibeComponentProps";
 import { SliderColor, SliderSize } from "../Slider.types";
 export interface SliderThumbProps extends VibeComponentProps {
     /**
-     * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node
-     */
-    className?: string;
-    /**
-     * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node
+     * The index of the thumb (used in range sliders).
      */
     index?: number;
     /**
-     * On SliderThumb move callback
+     * Callback fired when the thumb is moved.
      */
     onMove?: (event: PointerEvent) => void;
     /**
-     * Position (i.e. offset) from start of track/rail, according to value
+     * The position of the thumb, represented as an offset percentage from the start of the track.
      */
     position?: number;
+    /**
+     * The size of the slider thumb.
+     */
     size: SliderSize;
+    /**
+     * The color theme of the slider thumb.
+     */
     color: SliderColor;
 }
 declare const SliderThumb: FC<SliderThumbProps>;

package/dist/components/Slider/SliderBase/SliderTrack.d.ts

@@ -3,9 +3,8 @@ import VibeComponentProps from "../../../types/VibeComponentProps";
 import { SliderColor } from "../Slider.types";
 export interface SliderTrackProps extends VibeComponentProps {
     /**
-     * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node
+     * The color of the slider track.
      */
-    className?: string;
     color: SliderColor;
 }
 declare const SliderTrack: FC<SliderTrackProps>;

package/dist/components/Slider/SliderContext.d.ts

@@ -3,30 +3,35 @@ import { SliderProps } from "./Slider";
 import { SliderContextActions, SliderContextInfix, SliderContextSelection, SliderContextUI } from "./SliderConstants";
 import { IconType } from "../Icon";
 export interface SliderProviderProps extends SliderProps {
+    /**
+     * The child elements inside the slider provider.
+     */
     children?: ReactElement | ReactElement[];
+    /**
+     * Configuration options for prefix, postfix, and selection indicator.
+     */
     infixOptions?: {
         /**
-         * Show selected from Slider range value
+         * If true, displays the selected value from the slider range.
          */
         indicateSelection?: boolean;
         /**
-         * Options for initial/start/prefix element, it can be one of:
-         *  - Any Component (react component, node, text, number etc.)
-         *  - Or it can be an object of options for Icons component (see Icon components props)
-         *  - Or it can be an object for Label (Icon, Heading - and other components)
-         *  - Or it can be Render Props Function witch are getting value and valueText
+         * Configuration for the prefix (start) element, which can be:
+         * - A React component, text, number, or node.
+         * - An object with an icon.
+         * - A function that receives the value and valueText.
          */
         prefix?: {
             icon: IconType;
         } | string | ((value: number, valueText: string) => void) | ReactElement;
         /**
-         * Options for postfix/end/finishing element. Same as prefix element.
+         * Configuration for the postfix (end) element, similar to prefix.
          */
         postfix?: {
             icon: IconType;
         } | string | ((value: number, valueText: string) => void) | ReactElement;
         /**
-         * Width of SelectionIndicator (i.e. TextField)
+         * The width of the selection indicator.
          */
         selectionIndicatorWidth?: string;
     };

package/dist/components/Slider/SliderInfix.d.ts

@@ -4,8 +4,7 @@ import { VibeComponentProps } from "../../types";
 import { InfixKind } from "./Slider.types";
 export interface SliderInfixProps extends VibeComponentProps {
     /**
-     * kind (type/mode) of Infix prefix/postfix
-     * Infix - additional inserted by Consumer - component/string/number etc.
+     * Specifies the type of infix (prefix or postfix).
      */
     kind?: InfixKind;
 }

package/dist/components/SplitButton/SplitButton.d.ts

@@ -3,18 +3,41 @@ import { SplitButtonSecondaryContentPositionType } from "./SplitButtonConstants"
 import { ButtonProps } from "../Button/Button";
 import { DialogSize } from "../Dialog";
 export interface SplitButtonProps extends ButtonProps {
+    /**
+     * The element or renderer that is displayed inside the dialog opened by clicking the secondary button.
+     */
     secondaryDialogContent?: ReactElement | (() => string | ReactElement);
+    /**
+     * Callback fired when the secondary dialog is shown.
+     */
     onSecondaryDialogDidShow?: () => void;
+    /**
+     * Callback fired when the secondary dialog is hidden.
+     */
     onSecondaryDialogDidHide?: () => void;
+    /**
+     * The z-index applied to the secondary dialog.
+     */
     zIndex?: number;
+    /**
+     * Class name applied to the wrapper of the secondary dialog.
+     */
     secondaryDialogClassName?: string;
+    /**
+     * The position of the secondary dialog.
+     */
     secondaryDialogPosition?: SplitButtonSecondaryContentPositionType;
+    /**
+     * The padding size inside the secondary dialog.
+     */
     dialogPaddingSize?: DialogSize;
     /**
-     * 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 should be rendered.
      */
     dialogContainerSelector?: string;
+    /**
+     * If true, clicking inside the dialog will close it.
+     */
     shouldCloseOnClickInsideDialog?: boolean;
 }
 declare const _default: ((import("../../types/VibeComponent").default<SplitButtonProps, unknown> & Partial<{

package/dist/components/Steps/Steps.d.ts

@@ -5,22 +5,52 @@ import { ButtonProps } from "../Button/Button";
 import { VibeComponent, VibeComponentProps } from "../../types";
 export interface StepsProps extends VibeComponentProps {
     /**
-     * The index of the current displayed step
+     * The index of the currently active step.
      */
     activeStepIndex?: number;
     /**
-     * A callback which called when the active step is changed
+     * Callback fired when the active step changes.
      */
     onChangeActiveStep?: (e: React.MouseEvent, stepIndex: number) => void;
+    /**
+     * If true, hides the navigation buttons.
+     */
     areNavigationButtonsHidden?: boolean;
+    /**
+     * The list of steps in the steps component.
+     */
     steps?: ReactElement[];
+    /**
+     * The visual style of the steps component.
+     */
     type?: StepsType;
+    /**
+     * The color theme of the steps component.
+     */
     color?: StepsColor;
+    /**
+     * If true, the content is displayed above the step navigation.
+     */
     isContentOnTop?: boolean;
+    /**
+     * If true, hides the icons in the navigation buttons.
+     */
     areButtonsIconsHidden?: boolean;
+    /**
+     * Props applied to the back button.
+     */
     backButtonProps?: Partial<ButtonProps>;
+    /**
+     * Props applied to the next button.
+     */
     nextButtonProps?: Partial<ButtonProps>;
+    /**
+     * Props applied to the finish button.
+     */
     finishButtonProps?: Partial<ButtonProps>;
+    /**
+     * Callback fired when the finish button is clicked.
+     */
     onFinish?: (e: React.MouseEvent | React.KeyboardEvent) => void;
 }
 declare const _default: ((VibeComponent<StepsProps & React.RefAttributes<HTMLElement>, HTMLElement> & Partial<{

package/dist/components/Steps/StepsCommand.d.ts

@@ -3,12 +3,33 @@ import { ButtonProps } from "../../components/Button/Button";
 import { StepsColor } from "./Steps.types";
 import VibeComponentProps from "../../types/VibeComponentProps";
 export interface StepsCommandProps extends VibeComponentProps {
+    /**
+     * If true, this button is for moving to the next step.
+     */
     isNext?: boolean;
+    /**
+     * Callback fired when the active step changes.
+     */
     onChangeActiveStep?: (e: React.MouseEvent, newStepIndex: number) => void;
+    /**
+     * The index of the currently active step.
+     */
     activeStepIndex: number;
+    /**
+     * The total number of steps.
+     */
     stepsCount: number;
+    /**
+     * If true, hides the navigation icon.
+     */
     isIconHidden?: boolean;
+    /**
+     * Props applied to the button.
+     */
     buttonProps?: Partial<ButtonProps>;
+    /**
+     * The color theme of the button.
+     */
     color?: StepsColor;
 }
 export declare const StepsCommand: FC<StepsCommandProps>;

package/dist/components/Steps/StepsDot.d.ts

@@ -2,10 +2,25 @@ import { StepsColor, StepsDotAriaCurrent } from "./Steps.types";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import React, { FC } from "react";
 export interface StepsDotProps extends VibeComponentProps {
+    /**
+     * Callback fired when the dot is clicked.
+     */
     onClick?: (e: React.MouseEvent) => void;
+    /**
+     * ARIA attribute to indicate the current step.
+     */
     ariaCurrent?: StepsDotAriaCurrent | boolean;
+    /**
+     * If true, marks the dot as active.
+     */
     isActive?: boolean;
+    /**
+     * The ARIA label for the dot.
+     */
     ariaLabel?: string;
+    /**
+     * The color theme of the dot.
+     */
     color?: StepsColor;
 }
 export declare const StepsDot: FC<StepsDotProps>;

package/dist/components/Steps/StepsGalleryHeader.d.ts

@@ -2,10 +2,25 @@ import React, { FC } from "react";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { StepsColor } from "./Steps.types";
 export interface StepsGalleryHeaderProps extends VibeComponentProps {
+    /**
+     * The index of the currently active step.
+     */
     activeStepIndex: number;
+    /**
+     * The total number of steps.
+     */
     stepsCount: number;
+    /**
+     * Callback fired when the active step changes.
+     */
     onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;
+    /**
+     * A function to generate step descriptions for accessibility.
+     */
     stepDescriptionFunc?: (stepIndex: number) => string;
+    /**
+     * The color theme of the gallery header.
+     */
     color?: StepsColor;
 }
 export declare const StepsGalleryHeader: FC<StepsGalleryHeaderProps>;

package/dist/components/Steps/StepsHeader.d.ts

@@ -3,16 +3,49 @@ import { StepsType, StepsColor } from "./Steps.types";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import { ButtonProps } from "../Button/Button";
 export interface StepsHeaderProps extends VibeComponentProps {
+    /**
+     * The type of steps header.
+     */
     type: StepsType;
+    /**
+     * The index of the currently active step.
+     */
     activeStepIndex: number;
+    /**
+     * Callback fired when the active step changes.
+     */
     onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;
+    /**
+     * The total number of steps.
+     */
     stepsCount: number;
+    /**
+     * If true, hides the navigation buttons.
+     */
     areNavigationButtonsHidden: boolean;
+    /**
+     * Props applied to the back button.
+     */
     backButtonProps: Partial<ButtonProps>;
+    /**
+     * Props applied to the next button.
+     */
     nextButtonProps: Partial<ButtonProps>;
+    /**
+     * Props applied to the finish button.
+     */
     finishButtonProps: Partial<ButtonProps>;
+    /**
+     * If true, hides the icons in the navigation buttons.
+     */
     areButtonsIconsHidden: boolean;
+    /**
+     * The color theme of the steps header.
+     */
     color?: StepsColor;
+    /**
+     * Callback fired when the finish button is clicked.
+     */
     onFinish?: (e: React.MouseEvent) => void;
 }
 export declare const StepsHeader: FC<StepsHeaderProps>;