@momentum-design/components 0.36.2 → 0.36.3

package/dist/index.d.ts

@@ -1,15 +1,19 @@
+import AlertChip from './components/alertchip';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import Checkbox from './components/checkbox';
+import Chip from './components/chip';
 import Coachmark from './components/coachmark';
 import Divider from './components/divider';
+import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
 import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
 import Input from './components/input';
+import InputChip from './components/inputchip';
 import Link from './components/link';
 import List from './components/list';
 import ListItem from './components/listitem';
@@ -31,6 +35,6 @@ import OptGroup from './components/optgroup';
 import Textarea from './components/textarea';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
-export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Coachmark, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Textarea, Tooltip, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Textarea, Tooltip, };
 export type { TextType, SpinnerSize, SpinnerVariant, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/index.js

@@ -1,15 +1,19 @@
+import AlertChip from './components/alertchip';
 import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import Checkbox from './components/checkbox';
+import Chip from './components/chip';
 import Coachmark from './components/coachmark';
 import Divider from './components/divider';
+import FilterChip from './components/filterchip';
 import FormfieldGroup from './components/formfieldgroup';
 import Icon from './components/icon';
 import IconProvider from './components/iconprovider';
 import Input from './components/input';
+import InputChip from './components/inputchip';
 import Link from './components/link';
 import List from './components/list';
 import ListItem from './components/listitem';
@@ -29,5 +33,5 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import Option from './components/option';
 import OptGroup from './components/optgroup';
 import Textarea from './components/textarea';
-export { Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Coachmark, Divider, FormfieldGroup, Icon, IconProvider, Input, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Textarea, Tooltip, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Textarea, Tooltip, };
 export { inMemoryCache, webAPIIconsCache };

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

@@ -0,0 +1,27 @@
+import Component from '../../components/alertchip';
+/**
+ * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-alertchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the label text
+ * @cssproperty --mdc-chip-icon-color - The color of the icon
+ * @cssproperty --mdc-chip-border-color - The border color of the alertchip
+ * @cssproperty --mdc-chip-background-color - The background color of the alertchip
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/alertchip/index.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/alertchip';
+import { TAG_NAME } from '../../components/alertchip/alertchip.constants';
+/**
+ * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports 5 variants of alerts - neutral, warning, error, success, and informational
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-alertchip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the label text
+ * @cssproperty --mdc-chip-icon-color - The color of the icon
+ * @cssproperty --mdc-chip-border-color - The border color of the alertchip
+ * @cssproperty --mdc-chip-background-color - The background color of the alertchip
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'AlertChip',
+});
+export default reactWrapper;

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

@@ -0,0 +1,28 @@
+import Component from '../../components/chip';
+/**
+ * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
+ * Consumers can wrap this component around a tooltip to provide additional context.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+ * including empty spaces to split words.
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-chip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/chip/index.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/chip';
+import { TAG_NAME } from '../../components/chip/chip.constants';
+/**
+ * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.
+ * Consumers can wrap this component around a tooltip to provide additional context.
+ *
+ * It is recommended to keep the label text for the chip component concise and compact.
+ * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,
+ * including empty spaces to split words.
+ *
+ * This component is built by extending Buttonsimple.
+ *
+ * @tagname mdc-chip
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'Chip',
+});
+export default reactWrapper;

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

@@ -0,0 +1,17 @@
+import Component from '../../components/filterchip';
+/**
+ * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.
+ * They can be found with lists or tables as quick filters.
+ *
+ * This component is built on top of the mdc-chip component.
+ *
+ * @tagname mdc-filterchip
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/filterchip/index.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/filterchip';
+import { TAG_NAME } from '../../components/filterchip/filterchip.constants';
+/**
+ * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.
+ * They can be found with lists or tables as quick filters.
+ *
+ * This component is built on top of the mdc-chip component.
+ *
+ * @tagname mdc-filterchip
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'FilterChip',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -1,17 +1,21 @@
-export { default as Avatar } from './avatar';
+export { default as AlertChip } from './alertchip';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
+export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
+export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
+export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';

package/dist/react/index.js

@@ -1,17 +1,21 @@
-export { default as Avatar } from './avatar';
+export { default as AlertChip } from './alertchip';
 export { default as AvatarButton } from './avatarbutton';
+export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
+export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
+export { default as FilterChip } from './filterchip';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
+export { default as InputChip } from './inputchip';
 export { default as Link } from './link';
 export { default as List } from './list';
 export { default as ListItem } from './listitem';

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

@@ -0,0 +1,32 @@
+import Component from '../../components/inputchip';
+/**
+ * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports an error state for validation.
+ * - It supports a close button to remove the chip.
+ *
+ * @tagname mdc-inputchip
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @event click - (React: onClick) This event is dispatched when the close button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the close button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the close button.
+ * @event focus - (React: onFocus) This event is dispatched when the close button receives focus.
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    undefined: string;
+    onClick: string;
+    onKeyDown: string;
+    onKeyUp: string;
+    onFocus: string;
+}>;
+export default reactWrapper;

package/dist/react/inputchip/index.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/inputchip';
+import { TAG_NAME } from '../../components/inputchip/inputchip.constants';
+/**
+ * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
+ *
+ * - It supports a leading icon along with label.
+ * - It supports an error state for validation.
+ * - It supports a close button to remove the chip.
+ *
+ * @tagname mdc-inputchip
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @event click - (React: onClick) This event is dispatched when the close button is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the close button.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the close button.
+ * @event focus - (React: onFocus) This event is dispatched when the close button receives focus.
+ *
+ * @cssproperty --mdc-chip-color - The color of the chip.
+ * @cssproperty --mdc-chip-border-color - The border color of the chip.
+ * @cssproperty --mdc-chip-background-color - The background color of the chip.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        undefined: 'undefined',
+        onClick: 'click',
+        onKeyDown: 'keydown',
+        onKeyUp: 'keyup',
+        onFocus: 'focus',
+    },
+    displayName: 'InputChip',
+});
+export default reactWrapper;

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.36.2"
+  "version": "0.36.3"
 }