@momentum-design/components 0.18.5 → 0.18.6

package/dist/index.d.ts

@@ -10,8 +10,9 @@ import Bullet from './components/bullet';
 import Marker from './components/marker';
 import Divider from './components/divider';
 import AvatarButton from './components/avatarbutton';
+import Input from './components/input';
 import Link from './components/link';
 import Checkbox from './components/checkbox';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Link, Checkbox, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Checkbox, };
 export type { TextType, };

package/dist/index.js

@@ -10,6 +10,7 @@ import Bullet from './components/bullet';
 import Marker from './components/marker';
 import Divider from './components/divider';
 import AvatarButton from './components/avatarbutton';
+import Input from './components/input';
 import Link from './components/link';
 import Checkbox from './components/checkbox';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Link, Checkbox, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Checkbox, };

package/dist/react/index.d.ts

@@ -1,17 +1,18 @@
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 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 Bullet } from './bullet';
 export { default as Checkbox } from './checkbox';
 export { default as Divider } from './divider';
 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 Link } from './link';
 export { default as Marker } from './marker';
-export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
+export { default as Modalcontainer } from './modalcontainer';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/dist/react/index.js

@@ -1,17 +1,18 @@
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 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 Bullet } from './bullet';
 export { default as Checkbox } from './checkbox';
 export { default as Divider } from './divider';
 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 Link } from './link';
 export { default as Marker } from './marker';
-export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
+export { default as Modalcontainer } from './modalcontainer';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

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

@@ -0,0 +1,39 @@
+import Component from '../../components/input';
+/**
+ * mdc-input is a component that allows users to input text.
+ *  It contains:
+ * - label field - describe the input field.
+ * - input field - contains the value
+ * - help text or validation message - displayed below the input field.
+ * - trailing button - it displays a clear the input field.
+ * - prefix text - displayed before the input field.
+ * - leading icon - displayed before the input field.
+ * - clear-aria-label - aria label for the trailing button.
+ * - all the attributes of the input field.
+ *
+ * @tagname mdc-input
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/input/index.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/input';
+import { TAG_NAME } from '../../components/input/input.constants';
+/**
+ * mdc-input is a component that allows users to input text.
+ *  It contains:
+ * - label field - describe the input field.
+ * - input field - contains the value
+ * - help text or validation message - displayed below the input field.
+ * - trailing button - it displays a clear the input field.
+ * - prefix text - displayed before the input field.
+ * - leading icon - displayed before the input field.
+ * - clear-aria-label - aria label for the trailing button.
+ * - all the attributes of the input field.
+ *
+ * @tagname mdc-input
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ *
+ * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled
+ * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled
+ * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-support-text-color - Text color for the help text
+ * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered
+ * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused
+ * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused
+ * @cssproperty --mdc-input-error-border-color - Border color for the input container when error
+ * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning
+ * @cssproperty --mdc-input-success-border-color - Border color for the input container when success
+ * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Input',
+});
+export default reactWrapper;

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.18.5"
+  "version": "0.18.6"
 }