@sellmate/design-system-react 1.0.27 → 1.0.28

package/dist/components/components.d.ts

@@ -39,6 +39,7 @@ import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/compon
 import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
 import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
 import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
+import { SdToastContainer as SdToastContainerElement } from "@sellmate/design-system/dist/components/sd-toast-container.js";
 import { SdToast as SdToastElement } from "@sellmate/design-system/dist/components/sd-toast.js";
 import { SdToggleButton as SdToggleButtonElement } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
 import { SdToggle as SdToggleElement } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -203,9 +204,17 @@ export type SdTextareaEvents = {
 export declare const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEvents>;
 export type SdToastEvents = {
     onSdClose: EventName<CustomEvent<void>>;
-    onSdButtonClick: EventName<CustomEvent<void>>;
 };
 export declare const SdToast: StencilReactComponent<SdToastElement, SdToastEvents>;
+export type SdToastContainerEvents = {
+    onSdToastShow: EventName<CustomEvent<{
+        id: string;
+    }>>;
+    onSdToastDismiss: EventName<CustomEvent<{
+        id: string;
+    }>>;
+};
+export declare const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents>;
 export type SdToggleEvents = {
     onSdUpdate: EventName<CustomEvent<boolean>>;
 };

package/dist/components/components.js

@@ -35,6 +35,7 @@ import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } fr
 import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
 import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
 import { SdTextarea as SdTextareaElement, defineCustomElement as defineSdTextarea } from "@sellmate/design-system/dist/components/sd-textarea.js";
+import { SdToastContainer as SdToastContainerElement, defineCustomElement as defineSdToastContainer } from "@sellmate/design-system/dist/components/sd-toast-container.js";
 import { SdToast as SdToastElement, defineCustomElement as defineSdToast } from "@sellmate/design-system/dist/components/sd-toast.js";
 import { SdToggleButton as SdToggleButtonElement, defineCustomElement as defineSdToggleButton } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
 import { SdToggle as SdToggleElement, defineCustomElement as defineSdToggle } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -374,11 +375,19 @@ export const SdToast = /*@__PURE__*/ createComponent({
     elementClass: SdToastElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
+    events: { onSdClose: 'sdClose' },
+    defineCustomElement: defineSdToast
+});
+export const SdToastContainer = /*@__PURE__*/ createComponent({
+    tagName: 'sd-toast-container',
+    elementClass: SdToastContainerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
     events: {
-        onSdClose: 'sdClose',
-        onSdButtonClick: 'sdButtonClick'
+        onSdToastShow: 'sdToastShow',
+        onSdToastDismiss: 'sdToastDismiss'
     },
-    defineCustomElement: defineSdToast
+    defineCustomElement: defineSdToastContainer
 });
 export const SdToggle = /*@__PURE__*/ createComponent({
     tagName: 'sd-toggle',

package/dist/components/components.server.d.ts

@@ -39,6 +39,7 @@ import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/compon
 import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
 import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
 import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
+import { SdToastContainer as SdToastContainerElement } from "@sellmate/design-system/dist/components/sd-toast-container.js";
 import { SdToast as SdToastElement } from "@sellmate/design-system/dist/components/sd-toast.js";
 import { SdToggleButton as SdToggleButtonElement } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
 import { SdToggle as SdToggleElement } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -205,9 +206,17 @@ export type SdTextareaEvents = {
 export declare const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEvents>;
 export type SdToastEvents = {
     onSdClose: EventName<CustomEvent<void>>;
-    onSdButtonClick: EventName<CustomEvent<void>>;
 };
 export declare const SdToast: StencilReactComponent<SdToastElement, SdToastEvents>;
+export type SdToastContainerEvents = {
+    onSdToastShow: EventName<CustomEvent<{
+        id: string;
+    }>>;
+    onSdToastDismiss: EventName<CustomEvent<{
+        id: string;
+    }>>;
+};
+export declare const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents>;
 export type SdToggleEvents = {
     onSdUpdate: EventName<CustomEvent<boolean>>;
 };

package/dist/components/components.server.js

@@ -552,7 +552,6 @@ export const SdToast = /*@__PURE__*/ createComponent({
         message: 'message',
         link: 'link',
         linkLabel: 'link-label',
-        buttonLabel: 'button-label',
         useClose: 'use-close',
         type: 'type'
     },
@@ -560,6 +559,19 @@ export const SdToast = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdToast,
     serializeShadowRoot,
 });
+export const SdToastContainer = /*@__PURE__*/ createComponent({
+    tagName: 'sd-toast-container',
+    properties: {
+        position: 'position',
+        maxVisible: 'max-visible',
+        defaultDuration: 'default-duration',
+        gap: 'gap',
+        zIndex: 'z-index'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdToastContainer,
+    serializeShadowRoot,
+});
 export const SdToggle = /*@__PURE__*/ createComponent({
     tagName: 'sd-toggle',
     properties: {

package/lib/components/components.server.ts

@@ -45,6 +45,7 @@ import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/compon
 import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
 import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
 import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
+import { SdToastContainer as SdToastContainerElement } from "@sellmate/design-system/dist/components/sd-toast-container.js";
 import { SdToast as SdToastElement } from "@sellmate/design-system/dist/components/sd-toast.js";
 import { SdToggleButton as SdToggleButtonElement } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
 import { SdToggle as SdToggleElement } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -757,10 +758,7 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
     serializeShadowRoot,
 });
 
-export type SdToastEvents = {
-    onSdClose: EventName<CustomEvent<void>>,
-    onSdButtonClick: EventName<CustomEvent<void>>
-};
+export type SdToastEvents = { onSdClose: EventName<CustomEvent<void>> };
 
 export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@__PURE__*/ createComponent<SdToastElement, SdToastEvents>({
     tagName: 'sd-toast',
@@ -769,7 +767,6 @@ export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@
         message: 'message',
         link: 'link',
         linkLabel: 'link-label',
-        buttonLabel: 'button-label',
         useClose: 'use-close',
         type: 'type'
     },
@@ -778,6 +775,25 @@ export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@
     serializeShadowRoot,
 });
 
+export type SdToastContainerEvents = {
+    onSdToastShow: EventName<CustomEvent<{ id: string }>>,
+    onSdToastDismiss: EventName<CustomEvent<{ id: string }>>
+};
+
+export const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents> = /*@__PURE__*/ createComponent<SdToastContainerElement, SdToastContainerEvents>({
+    tagName: 'sd-toast-container',
+    properties: {
+        position: 'position',
+        maxVisible: 'max-visible',
+        defaultDuration: 'default-duration',
+        gap: 'gap',
+        zIndex: 'z-index'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdToastContainer as ReactWebComponent<SdToastContainerElement, SdToastContainerEvents>,
+    serializeShadowRoot,
+});
+
 export type SdToggleEvents = { onSdUpdate: EventName<CustomEvent<boolean>> };
 
 export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents> = /*@__PURE__*/ createComponent<SdToggleElement, SdToggleEvents>({

package/lib/components/components.ts

@@ -44,6 +44,7 @@ import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } fr
 import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
 import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
 import { SdTextarea as SdTextareaElement, defineCustomElement as defineSdTextarea } from "@sellmate/design-system/dist/components/sd-textarea.js";
+import { SdToastContainer as SdToastContainerElement, defineCustomElement as defineSdToastContainer } from "@sellmate/design-system/dist/components/sd-toast-container.js";
 import { SdToast as SdToastElement, defineCustomElement as defineSdToast } from "@sellmate/design-system/dist/components/sd-toast.js";
 import { SdToggleButton as SdToggleButtonElement, defineCustomElement as defineSdToggleButton } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
 import { SdToggle as SdToggleElement, defineCustomElement as defineSdToggle } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -545,23 +546,34 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
     defineCustomElement: defineSdTextarea
 });
 
-export type SdToastEvents = {
-    onSdClose: EventName<CustomEvent<void>>,
-    onSdButtonClick: EventName<CustomEvent<void>>
-};
+export type SdToastEvents = { onSdClose: EventName<CustomEvent<void>> };
 
 export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@__PURE__*/ createComponent<SdToastElement, SdToastEvents>({
     tagName: 'sd-toast',
     elementClass: SdToastElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {
-        onSdClose: 'sdClose',
-        onSdButtonClick: 'sdButtonClick'
-    } as SdToastEvents,
+    events: { onSdClose: 'sdClose' } as SdToastEvents,
     defineCustomElement: defineSdToast
 });
 
+export type SdToastContainerEvents = {
+    onSdToastShow: EventName<CustomEvent<{ id: string }>>,
+    onSdToastDismiss: EventName<CustomEvent<{ id: string }>>
+};
+
+export const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents> = /*@__PURE__*/ createComponent<SdToastContainerElement, SdToastContainerEvents>({
+    tagName: 'sd-toast-container',
+    elementClass: SdToastContainerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdToastShow: 'sdToastShow',
+        onSdToastDismiss: 'sdToastDismiss'
+    } as SdToastContainerEvents,
+    defineCustomElement: defineSdToastContainer
+});
+
 export type SdToggleEvents = { onSdUpdate: EventName<CustomEvent<boolean>> };
 
 export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents> = /*@__PURE__*/ createComponent<SdToggleElement, SdToggleEvents>({

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-react",
- "version": "1.0.27",
+ "version": "1.0.28",
  "description": "Design System - React Component Wrappers",
  "keywords": [
   "react",
@@ -54,7 +54,7 @@
   "dev": "tsc --watch"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.27",
+  "@sellmate/design-system": "^1.0.28",
   "@stencil/react-output-target": "^1.2.0"
  },
  "peerDependencies": {