@momentum-design/components 0.71.2 → 0.73.0

package/dist/index.d.ts

@@ -54,6 +54,7 @@ import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import MenuItemRadio from './components/menuitemradio';
 import MenuItemCheckbox from './components/menuitemcheckbox';
+import Animation from './components/animation';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -61,6 +62,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -55,10 +55,11 @@ import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import MenuItemRadio from './components/menuitemradio';
 import MenuItemCheckbox from './components/menuitemcheckbox';
+import Animation from './components/animation';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, Linksimple, List, ListItem, Marker, MenuItem, OptGroup, Option, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, Spinner, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, VirtualizedList, StaticCheckbox, StaticRadio, StaticToggle, ToggleTip, Tooltip, MenuItemRadio, MenuItemCheckbox, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/animation/index.d.ts

@@ -0,0 +1,20 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/animation';
+/**
+ * The `mdc-animation` component is a wrapper around the Lottie animation library.
+ * It fetches the animation data dynamically based on the provided name and renders it.
+ * This is a display only component that does not have any interactive functionality.
+ * From accessibility perspective, (by default) it is a decorative image component.
+ *
+ * @tagname mdc-animation
+ *
+ * @event load - (React: onLoad) This event is dispatched when the animation is loaded
+ * @event complete - (React: onComplete) This event is dispatched when all animation loops completed
+ * @event error - (React: onError) This event is dispatched when animation loading failed
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onLoad: EventName<Event>;
+    onComplete: EventName<Event>;
+    onError: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/animation/index.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/animation';
+import { TAG_NAME } from '../../components/animation/animation.constants';
+/**
+ * The `mdc-animation` component is a wrapper around the Lottie animation library.
+ * It fetches the animation data dynamically based on the provided name and renders it.
+ * This is a display only component that does not have any interactive functionality.
+ * From accessibility perspective, (by default) it is a decorative image component.
+ *
+ * @tagname mdc-animation
+ *
+ * @event load - (React: onLoad) This event is dispatched when the animation is loaded
+ * @event complete - (React: onComplete) This event is dispatched when all animation loops completed
+ * @event error - (React: onError) This event is dispatched when animation loading failed
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onLoad: 'load',
+        onComplete: 'complete',
+        onError: 'error',
+    },
+    displayName: 'Animation',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,12 +1,13 @@
 export { default as AlertChip } from './alertchip';
-export { default as Avatar } from './avatar';
+export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
+export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as ButtonLink } from './buttonlink';
 export { default as Button } from './button';
+export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';

package/dist/react/index.js

@@ -1,12 +1,13 @@
 export { default as AlertChip } from './alertchip';
-export { default as Avatar } from './avatar';
+export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';
+export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
-export { default as ButtonLink } from './buttonlink';
 export { default as Button } from './button';
+export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';

package/package.json

@@ -31,13 +31,15 @@
     "@floating-ui/dom": "^1.6.12",
     "@lit/context": "^1.1.2",
     "@lit/react": "^1.0.5",
+    "@momentum-design/animations": "*",
     "@momentum-design/brand-visuals": "*",
     "@momentum-design/fonts": "*",
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*",
     "@tanstack/lit-virtual": "^3.11.3",
     "lit": "^3.2.0",
+    "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.71.2"
+  "version": "0.73.0"
 }