@progress/kendo-react-animation 10.2.0-develop.5 → 10.2.0-develop.7

package/index.d.mts

@@ -54,35 +54,61 @@ export declare interface AnimationChildProps extends AnimationInterface {
      */
     in?: boolean;
     /**
-     * @hidden
+     * Custom inline styles to apply to the Animation container.
+     *
+     * @example
+     * <AnimationChild style={{ backgroundColor: "red" }} />
      */
     style?: any;
     /**
-     * @hidden
+     * Custom CSS class to apply to the Animation container.
+     *
+     * @example
+     * <AnimationChild className="custom-animation-class" />
      */
     className?: string;
     /**
-     * Specifies the transition class which will be applied on the appear, enter, and exit transition.
+     * Specifies the base class name for the transition. This class will be used
+     * to generate the `appear`, `enter`, and `exit` transition classes.
+     *
+     * @example
+     * <AnimationChild transitionName="fade" />
      */
     transitionName: string;
     /**
      * Specifies the style which will be applied when the Animation reaches its entering state.
+     *
+     * @example
+     * <AnimationChild animationEnteringStyle={{ opacity: 0.5 }} />
      */
     animationEnteringStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entered state.
+     * Inline styles applied when the Animation has entered.
+     *
+     * @example
+     * <AnimationChild animationEnteredStyle={{ opacity: 1 }} />
      */
     animationEnteredStyle?: any;
     /**
      * Specifies the style which will be applied when the Animation reaches its exiting state.
+     *
+     * @example
+     * <AnimationChild animationExitingStyle={{ opacity: 0.5 }} />
      */
     animationExitingStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exited state.
+     * Inline styles applied when the Animation has exited.
+     *
+     * @example
+     * <AnimationChild animationExitedStyle={{ opacity: 0 }} />
      */
     animationExitedStyle?: any;
     /**
-     * The unstyled option classes.
+     * Provides unstyled options for the Animation. Accepts an object
+     * implementing the `AnimationsClassStructure` interface.
+     *
+     * @example
+     * <AnimationChild unstyled={{ appear: "custom-appear-class" }} />
      */
     unstyled?: AnimationsClassStructure;
 }
@@ -191,51 +217,87 @@ declare interface AnimationInterface {
  */
 export declare interface AnimationProps extends AnimationInterface {
     /**
-     * When the element reaches its exit state, it is no longer available in the DOM ([see example]({% slug exitingchildcomponents_animation %})).
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Animation childFactory={(child) => React.cloneElement(child, { ariaHidden: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies the name of the CSS class which is set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Animation className="animation-container" />
      */
     className?: string;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Animation component="main" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Animation id="animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Animation style={{ width: "100%" }} />
      */
     style?: any;
     /**
-     * Specifies whether the Animation children will stack on top of each other without interfering ([see example]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation.
+     *
+     * @example
+     * <Animation stackChildren={true} />
      */
     stackChildren?: boolean;
     /**
-     * Specifies the `classNames` which will be applied during the transition ([see example]({% slug customizing_animation %})).
+     * Specifies the base class name for the transition.
+     *
+     * @example
+     * <Animation transitionName="fade" />
      */
     transitionName: string;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entering state.
+     * Specifies the inline styles applied when the Animation is entering.
+     *
+     * @example
+     * <Animation animationEnteringStyle={{ opacity: 0.5 }} />
      */
     animationEnteringStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entered state.
+     * Specifies the inline styles applied when the Animation has entered.
+     *
+     * @example
+     * <Animation animationEnteredStyle={{ opacity: 1 }} />
      */
     animationEnteredStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exiting state.
+     * Specifies the inline styles applied when the Animation is exiting.
+     *
+     * @example
+     * <Animation animationExitingStyle={{ opacity: 0.5 }} />
      */
     animationExitingStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exited state.
+     * Specifies the inline styles applied when the Animation has exited.
+     *
+     * @example
+     * <Animation animationExitedStyle={{ opacity: 0 }} />
      */
     animationExitedStyle?: any;
     /**
-     * The unstyled option classes.
+     * Provides unstyled options for the Animation.
+     *
+     * @example
+     * <Animation unstyled={{ appear: "unstyled-appear" }} />
      */
     unstyled?: AnimationsClassStructure;
 }
@@ -274,27 +336,45 @@ export declare type ExpandDirection = 'horizontal' | 'vertical';
  */
 export declare interface ExpandProps extends AnimationInterface {
     /**
-     * After the element reached its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Expand childFactory={(child) => React.cloneElement(child, { role: "button" })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Expand className="expand-animation" />
      */
     className?: string;
     /**
      * Specifies the direction of the Expand Animation. Defaults to `vertical`.
+     *
+     * @example
+     * <Expand direction="horizontal" />
      */
     direction?: ExpandDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Expand component="nav" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Expand id="expand-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Expand style={{ display: "flex" }} />
      */
     style?: any;
 }
@@ -323,23 +403,38 @@ export declare const Fade: {
  */
 export declare interface FadeProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Fade childFactory={(child) => React.cloneElement(child, { draggable: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Fade className="fade-animation" />
      */
     className?: string;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Fade component="header" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Fade id="fade-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Fade style={{ color: "blue" }} />
      */
     style?: any;
 }
@@ -381,31 +476,52 @@ export declare type PushDirection = 'up' | 'down' | 'left' | 'right';
  */
 export declare interface PushProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Push childFactory={(child) => React.cloneElement(child, { tabIndex: 0 })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Push className="push-animation" />
      */
     className?: string;
     /**
-     * Specifies the direction of the Push Animation. Defaults to `out`.
+     * Specifies the direction of the Push Animation. Defaults to `right`.
+     *
+     * @example
+     * <Push direction="up" />
      */
     direction?: PushDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Push component="footer" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Push id="push-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Push style={{ border: "1px solid black" }} />
      */
     style?: any;
     /**
-     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation. Defaults to `false`.
+     *
+     * @example
+     * <Push stackChildren={true} />
      */
     stackChildren?: boolean;
 }
@@ -444,27 +560,45 @@ export declare type RevealDirection = 'horizontal' | 'vertical';
  */
 export declare interface RevealProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Reveal childFactory={(child) => React.cloneElement(child, { hidden: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Reveal className="reveal-animation" />
      */
     className?: string;
     /**
      * Specifies the direction of the Reveal Animation. Defaults to `vertical`.
+     *
+     * @example
+     * <Reveal direction="horizontal" />
      */
     direction?: RevealDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Reveal component="aside" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Reveal id="reveal-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Reveal style={{ padding: "20px" }} />
      */
     style?: any;
     /**
@@ -510,27 +644,45 @@ export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';
  */
 export declare interface SlideProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Slide childFactory={(child) => React.cloneElement(child, { style: { opacity: 0.5 } })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Slide className="slide-animation" />
      */
     className?: string;
     /**
      * Specifies the direction of the Slide Animation. Defaults to `down`.
+     *
+     * @example
+     * <Slide direction="left" />
      */
     direction?: SlideDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Slide component="article" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Slide id="slide-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Slide style={{ margin: "10px" }} />
      */
     style?: any;
 }
@@ -573,31 +725,52 @@ export declare type ZoomDirection = 'in' | 'out';
  */
 export declare interface ZoomProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Zoom childFactory={(child) => React.cloneElement(child, { className: 'custom-class' })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Zoom className="zoom-animation" />
      */
     className?: string;
     /**
-     * Specifies the direction of the Zoom Animation. Defaults to `down`.
+     * Specifies the direction of the Zoom Animation. Defaults to `out`.
+     *
+     * @example
+     * <Zoom direction="in" />
      */
     direction?: ZoomDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Zoom component="section" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Zoom id="zoom-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Zoom style={{ backgroundColor: "red" }} />
      */
     style?: any;
     /**
-     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation. Defaults to `false`.
+     *
+     * @example
+     * <Zoom stackChildren={true} />
      */
     stackChildren?: boolean;
 }

package/index.d.ts

@@ -54,35 +54,61 @@ export declare interface AnimationChildProps extends AnimationInterface {
      */
     in?: boolean;
     /**
-     * @hidden
+     * Custom inline styles to apply to the Animation container.
+     *
+     * @example
+     * <AnimationChild style={{ backgroundColor: "red" }} />
      */
     style?: any;
     /**
-     * @hidden
+     * Custom CSS class to apply to the Animation container.
+     *
+     * @example
+     * <AnimationChild className="custom-animation-class" />
      */
     className?: string;
     /**
-     * Specifies the transition class which will be applied on the appear, enter, and exit transition.
+     * Specifies the base class name for the transition. This class will be used
+     * to generate the `appear`, `enter`, and `exit` transition classes.
+     *
+     * @example
+     * <AnimationChild transitionName="fade" />
      */
     transitionName: string;
     /**
      * Specifies the style which will be applied when the Animation reaches its entering state.
+     *
+     * @example
+     * <AnimationChild animationEnteringStyle={{ opacity: 0.5 }} />
      */
     animationEnteringStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entered state.
+     * Inline styles applied when the Animation has entered.
+     *
+     * @example
+     * <AnimationChild animationEnteredStyle={{ opacity: 1 }} />
      */
     animationEnteredStyle?: any;
     /**
      * Specifies the style which will be applied when the Animation reaches its exiting state.
+     *
+     * @example
+     * <AnimationChild animationExitingStyle={{ opacity: 0.5 }} />
      */
     animationExitingStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exited state.
+     * Inline styles applied when the Animation has exited.
+     *
+     * @example
+     * <AnimationChild animationExitedStyle={{ opacity: 0 }} />
      */
     animationExitedStyle?: any;
     /**
-     * The unstyled option classes.
+     * Provides unstyled options for the Animation. Accepts an object
+     * implementing the `AnimationsClassStructure` interface.
+     *
+     * @example
+     * <AnimationChild unstyled={{ appear: "custom-appear-class" }} />
      */
     unstyled?: AnimationsClassStructure;
 }
@@ -191,51 +217,87 @@ declare interface AnimationInterface {
  */
 export declare interface AnimationProps extends AnimationInterface {
     /**
-     * When the element reaches its exit state, it is no longer available in the DOM ([see example]({% slug exitingchildcomponents_animation %})).
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Animation childFactory={(child) => React.cloneElement(child, { ariaHidden: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies the name of the CSS class which is set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Animation className="animation-container" />
      */
     className?: string;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Animation component="main" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Animation id="animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Animation style={{ width: "100%" }} />
      */
     style?: any;
     /**
-     * Specifies whether the Animation children will stack on top of each other without interfering ([see example]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation.
+     *
+     * @example
+     * <Animation stackChildren={true} />
      */
     stackChildren?: boolean;
     /**
-     * Specifies the `classNames` which will be applied during the transition ([see example]({% slug customizing_animation %})).
+     * Specifies the base class name for the transition.
+     *
+     * @example
+     * <Animation transitionName="fade" />
      */
     transitionName: string;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entering state.
+     * Specifies the inline styles applied when the Animation is entering.
+     *
+     * @example
+     * <Animation animationEnteringStyle={{ opacity: 0.5 }} />
      */
     animationEnteringStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entered state.
+     * Specifies the inline styles applied when the Animation has entered.
+     *
+     * @example
+     * <Animation animationEnteredStyle={{ opacity: 1 }} />
      */
     animationEnteredStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exiting state.
+     * Specifies the inline styles applied when the Animation is exiting.
+     *
+     * @example
+     * <Animation animationExitingStyle={{ opacity: 0.5 }} />
      */
     animationExitingStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exited state.
+     * Specifies the inline styles applied when the Animation has exited.
+     *
+     * @example
+     * <Animation animationExitedStyle={{ opacity: 0 }} />
      */
     animationExitedStyle?: any;
     /**
-     * The unstyled option classes.
+     * Provides unstyled options for the Animation.
+     *
+     * @example
+     * <Animation unstyled={{ appear: "unstyled-appear" }} />
      */
     unstyled?: AnimationsClassStructure;
 }
@@ -274,27 +336,45 @@ export declare type ExpandDirection = 'horizontal' | 'vertical';
  */
 export declare interface ExpandProps extends AnimationInterface {
     /**
-     * After the element reached its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Expand childFactory={(child) => React.cloneElement(child, { role: "button" })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Expand className="expand-animation" />
      */
     className?: string;
     /**
      * Specifies the direction of the Expand Animation. Defaults to `vertical`.
+     *
+     * @example
+     * <Expand direction="horizontal" />
      */
     direction?: ExpandDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Expand component="nav" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Expand id="expand-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Expand style={{ display: "flex" }} />
      */
     style?: any;
 }
@@ -323,23 +403,38 @@ export declare const Fade: {
  */
 export declare interface FadeProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Fade childFactory={(child) => React.cloneElement(child, { draggable: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Fade className="fade-animation" />
      */
     className?: string;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Fade component="header" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Fade id="fade-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Fade style={{ color: "blue" }} />
      */
     style?: any;
 }
@@ -381,31 +476,52 @@ export declare type PushDirection = 'up' | 'down' | 'left' | 'right';
  */
 export declare interface PushProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Push childFactory={(child) => React.cloneElement(child, { tabIndex: 0 })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Push className="push-animation" />
      */
     className?: string;
     /**
-     * Specifies the direction of the Push Animation. Defaults to `out`.
+     * Specifies the direction of the Push Animation. Defaults to `right`.
+     *
+     * @example
+     * <Push direction="up" />
      */
     direction?: PushDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Push component="footer" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Push id="push-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Push style={{ border: "1px solid black" }} />
      */
     style?: any;
     /**
-     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation. Defaults to `false`.
+     *
+     * @example
+     * <Push stackChildren={true} />
      */
     stackChildren?: boolean;
 }
@@ -444,27 +560,45 @@ export declare type RevealDirection = 'horizontal' | 'vertical';
  */
 export declare interface RevealProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Reveal childFactory={(child) => React.cloneElement(child, { hidden: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Reveal className="reveal-animation" />
      */
     className?: string;
     /**
      * Specifies the direction of the Reveal Animation. Defaults to `vertical`.
+     *
+     * @example
+     * <Reveal direction="horizontal" />
      */
     direction?: RevealDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Reveal component="aside" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Reveal id="reveal-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Reveal style={{ padding: "20px" }} />
      */
     style?: any;
     /**
@@ -510,27 +644,45 @@ export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';
  */
 export declare interface SlideProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Slide childFactory={(child) => React.cloneElement(child, { style: { opacity: 0.5 } })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Slide className="slide-animation" />
      */
     className?: string;
     /**
      * Specifies the direction of the Slide Animation. Defaults to `down`.
+     *
+     * @example
+     * <Slide direction="left" />
      */
     direction?: SlideDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Slide component="article" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Slide id="slide-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Slide style={{ margin: "10px" }} />
      */
     style?: any;
 }
@@ -573,31 +725,52 @@ export declare type ZoomDirection = 'in' | 'out';
  */
 export declare interface ZoomProps extends AnimationInterface {
     /**
-     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Zoom childFactory={(child) => React.cloneElement(child, { className: 'custom-class' })} />
      */
     childFactory?: any;
     /**
-     * Specifies the CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Zoom className="zoom-animation" />
      */
     className?: string;
     /**
-     * Specifies the direction of the Zoom Animation. Defaults to `down`.
+     * Specifies the direction of the Zoom Animation. Defaults to `out`.
+     *
+     * @example
+     * <Zoom direction="in" />
      */
     direction?: ZoomDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Zoom component="section" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Zoom id="zoom-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Zoom style={{ backgroundColor: "red" }} />
      */
     style?: any;
     /**
-     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation. Defaults to `false`.
+     *
+     * @example
+     * <Zoom stackChildren={true} />
      */
     stackChildren?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-animation",
-  "version": "10.2.0-develop.5",
+  "version": "10.2.0-develop.7",
   "description": "React Animation component assists with animating HTML elements. KendoReact Animation package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-common": "10.2.0-develop.5",
+    "@progress/kendo-react-common": "10.2.0-develop.7",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",