@momentum-design/components 0.18.6 → 0.19.0

package/dist/index.d.ts

@@ -12,7 +12,8 @@ import Divider from './components/divider';
 import AvatarButton from './components/avatarbutton';
 import Input from './components/input';
 import Link from './components/link';
+import Toggle from './components/toggle';
 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, Input, Link, Checkbox, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, };
 export type { TextType, };

package/dist/index.js

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

package/dist/react/index.d.ts

@@ -1,9 +1,9 @@
 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';
@@ -12,7 +12,8 @@ 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 Presence } from './presence';
 export { default as Modalcontainer } from './modalcontainer';
+export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';
+export { default as Toggle } from './toggle';

package/dist/react/index.js

@@ -1,9 +1,9 @@
 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';
@@ -12,7 +12,8 @@ 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 Presence } from './presence';
 export { default as Modalcontainer } from './modalcontainer';
+export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';
+export { default as Toggle } from './toggle';

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

@@ -0,0 +1,34 @@
+import Component from '../../components/toggle';
+/**
+ * Toggle Component is an interactive control used to switch between two mutually exclusive options,
+ * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
+ * where users need to enable or disable a feature.
+ * It contains an optional label and an optional helper text.
+ *
+ * Note: It internally renders a checkbox styled as a toggle switch.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-toggle
+ *
+ * @cssproperty --mdc-toggle-width - width of the toggle
+ * @cssproperty --mdc-toggle-height - height of the toggle
+ * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-border-radius - border radius of the toggle
+ * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-border - border of the toggle
+ * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state
+ * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state
+ * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state
+ * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
+ * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state
+ * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state
+ * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state
+ * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
+ * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/toggle/index.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toggle';
+import { TAG_NAME } from '../../components/toggle/toggle.constants';
+/**
+ * Toggle Component is an interactive control used to switch between two mutually exclusive options,
+ * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections
+ * where users need to enable or disable a feature.
+ * It contains an optional label and an optional helper text.
+ *
+ * Note: It internally renders a checkbox styled as a toggle switch.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-toggle
+ *
+ * @cssproperty --mdc-toggle-width - width of the toggle
+ * @cssproperty --mdc-toggle-height - height of the toggle
+ * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-border-radius - border radius of the toggle
+ * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact
+ * @cssproperty --mdc-toggle-border - border of the toggle
+ * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state
+ * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state
+ * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state
+ * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state
+ * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state
+ * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state
+ * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state
+ * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state
+ * @cssproperty --mdc-toggle-help-text-color -  color of the help text label
+ * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Toggle',
+});
+export default reactWrapper;

package/package.json

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