@sellmate/design-system-react 1.0.26 → 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

@@ -10,7 +10,6 @@ export const serializeShadowRoot = { default: "declarative-shadow-dom" };
 export const SdBadge = /*@__PURE__*/ createComponent({
     tagName: 'sd-badge',
     properties: {
-        size: 'size',
         color: 'color',
         label: 'label'
     },
@@ -553,7 +552,6 @@ export const SdToast = /*@__PURE__*/ createComponent({
         message: 'message',
         link: 'link',
         linkLabel: 'link-label',
-        buttonLabel: 'button-label',
         useClose: 'use-close',
         type: 'type'
     },
@@ -561,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: {
@@ -589,14 +600,13 @@ export const SdTooltip = /*@__PURE__*/ createComponent({
         trigger: 'trigger',
         placement: 'placement',
         color: 'color',
-        type: 'type',
+        tooltipType: 'tooltip-type',
         icon: 'icon',
         iconSize: 'icon-size',
         label: 'label',
         buttonSize: 'button-size',
         buttonVariant: 'button-variant',
-        noHover: 'no-hover',
-        useClose: 'use-close'
+        noHover: 'no-hover'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdTooltip,

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";
@@ -59,7 +60,6 @@ export type SdBadgeEvents = NonNullable<unknown>;
 export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents> = /*@__PURE__*/ createComponent<SdBadgeElement, SdBadgeEvents>({
     tagName: 'sd-badge',
     properties: {
-        size: 'size',
         color: 'color',
         label: 'label'
     },
@@ -758,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',
@@ -770,7 +767,6 @@ export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@
         message: 'message',
         link: 'link',
         linkLabel: 'link-label',
-        buttonLabel: 'button-label',
         useClose: 'use-close',
         type: 'type'
     },
@@ -779,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>({
@@ -815,14 +830,13 @@ export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents>
         trigger: 'trigger',
         placement: 'placement',
         color: 'color',
-        type: 'type',
+        tooltipType: 'tooltip-type',
         icon: 'icon',
         iconSize: 'icon-size',
         label: 'label',
         buttonSize: 'button-size',
         buttonVariant: 'button-variant',
-        noHover: 'no-hover',
-        useClose: 'use-close'
+        noHover: 'no-hover'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdTooltip as ReactWebComponent<SdTooltipElement, SdTooltipEvents>,

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.26",
+ "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.26",
+  "@sellmate/design-system": "^1.0.28",
   "@stencil/react-output-target": "^1.2.0"
  },
  "peerDependencies": {