@muraldevkit/ui-toolkit 1.3.3 → 1.5.0

package/dist/components/button/MrlButton/MrlButton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { MrlButtonKind, MrlButtonSize, MrlButtonState, ToggleAria, ToggleStyle, IconPosition } from '../constants';
 import { AttrsObject } from '../../../utils';
-import './MrlButton.scss';
+import './MrlButton.global.scss';
 interface MrlButtonProps {
     /**
      * Allow developers to add badge to buttons.

package/dist/components/svg/MrlSvgAnimate/MrlSvgAnimate.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { AnimatedState } from '../constants';
+/**
+ * Props for MrlSvgAnimate component
+ */
+export interface MrlSvgAnimateProps {
+    /**
+     * JSON file contents used by Lottie to generate an animated SVG to render.
+     * This attribute is mutually exclusive with fullPath and cdnFile.
+     * Note: When dynamically changing the svgData, if a configuration change
+     * is required be sure to set any new values before changing the svgData.
+     */
+    svgData?: string;
+    /**
+     * Path to a JSON file used by Lottie to generate an animated SVG to render.
+     * This attribute is mutually exclusive with svgData and cdnFile.
+     * Note: When dynamically changing the fullPath, if a configuration change
+     * is required be sure to set any new values before changing the fullPath.
+     */
+    fullPath?: string;
+    /**
+     * File name of an animation hosted on Mural's CDN used by Lottie to generate
+     * an animated SVG to render. This is the preferred usage of this component
+     * in terms of performance. It supports any file located at `static/animations`.
+     * This attribute is mutually exclusive with fullPath and svgData.
+     * Note: When dynamically changing the cdnFile, if a configuration change
+     * is required be sure to set any new values before changing the cdnFile.
+     */
+    cdnFile?: string;
+    /** Icon animation state. */
+    state?: AnimatedState;
+    /** Delay (in ms) before animation begins. */
+    delay?: number;
+    /**
+     * Optional [Lottie configuration object](http://airbnb.io/lottie/#/web) for the
+     * loadAnimation method
+     */
+    config?: string;
+}
+/**
+ * MrlSvgAnimate
+ *
+ * This is a React functional component used for SVGs with robust After Effects animations.
+ *
+ * @param {MrlSvgAnimateProps} props - The properties for the MrlSvgAnimate component.
+ * @returns {React.ReactElement} - The rendered MrlSvgAnimate component.
+ */
+export declare const MrlSvgAnimate: React.FC<MrlSvgAnimateProps>;
+export default MrlSvgAnimate;

package/dist/components/svg/config.d.ts

@@ -112,3 +112,36 @@ export declare const colorPictoStoryData: {
     name: string;
     title: string;
 };
+export declare const animateStoryData: {
+    args: {
+        delay: number;
+        state: "stop" | "play";
+    };
+    argTypes: {
+        delay: {
+            max: number;
+            min: number;
+            name: string;
+            step: number;
+            type: string;
+        };
+        state: {
+            control: {
+                options: readonly ["stop", "play"];
+                type: string;
+            };
+        };
+    };
+    manifest: {
+        exclude: {
+            default: string[];
+        };
+    };
+    name: string;
+    title: string;
+};
+export declare const animateContainerStyles: {
+    backgroundColor: string;
+    height: string;
+    width: string;
+};

package/dist/components/svg/constants.d.ts

@@ -1,4 +1,5 @@
 import { AttrsObject } from '../../utils';
+import { AnimationConfigWithData } from 'lottie-web';
 export type SVGSize = 'small' | 'medium' | 'large' | 'auto';
 export interface SVGDefaults {
     attrs: AttrsObject;
@@ -20,4 +21,18 @@ export declare const allowedSvgValues: AllowedValues;
  */
 export declare const svgDefaults: SVGDefaults;
 export type SVGObject = Record<string, any>;
+export type LottieConfig = Omit<AnimationConfigWithPath, 'container'>;
+export declare const baseLottieConfig: LottieConfig;
+interface AnimationConfigWithPath extends AnimationConfigWithData<'svg'> {
+    path?: string;
+}
+export declare const allowedAnimatedValues: {
+    states: readonly ["stop", "play"];
+};
+export type AnimatedState = typeof allowedAnimatedValues.states[number];
+export interface AnimatedDefaults {
+    delay: number;
+    state: AnimatedState;
+}
+export declare const animatedDefaults: AnimatedDefaults;
 export {};

package/dist/components/svg/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./MrlSvg/MrlSvg";
+export * from "./MrlSvgAnimate/MrlSvgAnimate";
 export * from './constants';