@sellmate/design-system-react 1.0.27 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/components.d.ts +22 -2
  2. package/dist/components/components.js +33 -3
  3. package/dist/components/components.server.d.ts +22 -2
  4. package/dist/components/components.server.js +44 -1
  5. package/lib/components/components.server.ts +64 -6
  6. package/lib/components/components.ts +51 -9
  7. package/package.json +2 -2
package/dist/components/components.d.ts CHANGED
@@ -2,10 +2,11 @@
2
2
  * This file was automatically generated by the Stencil React Output Target.
3
3
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
4
4
  */
5
- import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
5
+ import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
6
6
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
7
7
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
8
8
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
9
+ import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
9
10
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
10
11
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
11
12
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
@@ -30,6 +31,7 @@ import { SdRadioButtonGroup as SdRadioButtonGroupElement } from "@sellmate/desig
30
31
  import { SdRadioGroup as SdRadioGroupElement } from "@sellmate/design-system/dist/components/sd-radio-group.js";
31
32
  import { SdRadio as SdRadioElement } from "@sellmate/design-system/dist/components/sd-radio.js";
32
33
  import { SdSelectDropdown as SdSelectDropdownElement } from "@sellmate/design-system/dist/components/sd-select-dropdown.js";
34
+ import { SdSelectGroup as SdSelectGroupElement } from "@sellmate/design-system/dist/components/sd-select-group.js";
33
35
  import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate/design-system/dist/components/sd-select-multiple-group.js";
34
36
  import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
35
37
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
@@ -39,6 +41,7 @@ import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/compon
39
41
  import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
40
42
  import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
41
43
  import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
44
+ import { SdToastContainer as SdToastContainerElement } from "@sellmate/design-system/dist/components/sd-toast-container.js";
42
45
  import { SdToast as SdToastElement } from "@sellmate/design-system/dist/components/sd-toast.js";
43
46
  import { SdToggleButton as SdToggleButtonElement } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
44
47
  import { SdToggle as SdToggleElement } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -54,6 +57,10 @@ export type SdButtonV2Events = {
54
57
  onSdClick: EventName<SdButtonV2CustomEvent<MouseEvent>>;
55
58
  };
56
59
  export declare const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Events>;
60
+ export type SdCalendarEvents = {
61
+ onSdSelect: EventName<CustomEvent<string>>;
62
+ };
63
+ export declare const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents>;
57
64
  export type SdCardEvents = NonNullable<unknown>;
58
65
  export declare const SdCard: StencilReactComponent<SdCardElement, SdCardEvents>;
59
66
  export type SdCheckboxEvents = {
@@ -157,6 +164,11 @@ export type SdSelectDropdownEvents = {
157
164
  onSdScroll: EventName<SdSelectDropdownCustomEvent<Event>>;
158
165
  };
159
166
  export declare const SdSelectDropdown: StencilReactComponent<SdSelectDropdownElement, SdSelectDropdownEvents>;
167
+ export type SdSelectGroupEvents = {
168
+ onSdUpdate: EventName<SdSelectGroupCustomEvent<SelectEvents['sdUpdate']>>;
169
+ onSdDropDownShow: EventName<SdSelectGroupCustomEvent<SelectEvents['dropDownShow']>>;
170
+ };
171
+ export declare const SdSelectGroup: StencilReactComponent<SdSelectGroupElement, SdSelectGroupEvents>;
160
172
  export type SdSelectMultipleEvents = {
161
173
  onSdUpdate: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['sdUpdate']>>;
162
174
  onSdDropDownShow: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['dropDownShow']>>;
@@ -203,9 +215,17 @@ export type SdTextareaEvents = {
203
215
  export declare const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEvents>;
204
216
  export type SdToastEvents = {
205
217
  onSdClose: EventName<CustomEvent<void>>;
206
- onSdButtonClick: EventName<CustomEvent<void>>;
207
218
  };
208
219
  export declare const SdToast: StencilReactComponent<SdToastElement, SdToastEvents>;
220
+ export type SdToastContainerEvents = {
221
+ onSdToastShow: EventName<CustomEvent<{
222
+ id: string;
223
+ }>>;
224
+ onSdToastDismiss: EventName<CustomEvent<{
225
+ id: string;
226
+ }>>;
227
+ };
228
+ export declare const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents>;
209
229
  export type SdToggleEvents = {
210
230
  onSdUpdate: EventName<CustomEvent<boolean>>;
211
231
  };
package/dist/components/components.js CHANGED
@@ -2,6 +2,7 @@
2
2
  import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
3
3
  import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
4
4
  import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
5
+ import { SdCalendar as SdCalendarElement, defineCustomElement as defineSdCalendar } from "@sellmate/design-system/dist/components/sd-calendar.js";
5
6
  import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
6
7
  import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
7
8
  import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
@@ -26,6 +27,7 @@ import { SdRadioButtonGroup as SdRadioButtonGroupElement, defineCustomElement as
26
27
  import { SdRadioGroup as SdRadioGroupElement, defineCustomElement as defineSdRadioGroup } from "@sellmate/design-system/dist/components/sd-radio-group.js";
27
28
  import { SdRadio as SdRadioElement, defineCustomElement as defineSdRadio } from "@sellmate/design-system/dist/components/sd-radio.js";
28
29
  import { SdSelectDropdown as SdSelectDropdownElement, defineCustomElement as defineSdSelectDropdown } from "@sellmate/design-system/dist/components/sd-select-dropdown.js";
30
+ import { SdSelectGroup as SdSelectGroupElement, defineCustomElement as defineSdSelectGroup } from "@sellmate/design-system/dist/components/sd-select-group.js";
29
31
  import { SdSelectMultipleGroup as SdSelectMultipleGroupElement, defineCustomElement as defineSdSelectMultipleGroup } from "@sellmate/design-system/dist/components/sd-select-multiple-group.js";
30
32
  import { SdSelectMultiple as SdSelectMultipleElement, defineCustomElement as defineSdSelectMultiple } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
31
33
  import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement as defineSdSelectOptionGroup } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
@@ -35,6 +37,7 @@ import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } fr
35
37
  import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
36
38
  import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
37
39
  import { SdTextarea as SdTextareaElement, defineCustomElement as defineSdTextarea } from "@sellmate/design-system/dist/components/sd-textarea.js";
40
+ import { SdToastContainer as SdToastContainerElement, defineCustomElement as defineSdToastContainer } from "@sellmate/design-system/dist/components/sd-toast-container.js";
38
41
  import { SdToast as SdToastElement, defineCustomElement as defineSdToast } from "@sellmate/design-system/dist/components/sd-toast.js";
39
42
  import { SdToggleButton as SdToggleButtonElement, defineCustomElement as defineSdToggleButton } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
40
43
  import { SdToggle as SdToggleElement, defineCustomElement as defineSdToggle } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -65,6 +68,14 @@ export const SdButtonV2 = /*@__PURE__*/ createComponent({
65
68
  events: { onSdClick: 'sdClick' },
66
69
  defineCustomElement: defineSdButtonV2
67
70
  });
71
+ export const SdCalendar = /*@__PURE__*/ createComponent({
72
+ tagName: 'sd-calendar',
73
+ elementClass: SdCalendarElement,
74
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
75
+ react: React,
76
+ events: { onSdSelect: 'sdSelect' },
77
+ defineCustomElement: defineSdCalendar
78
+ });
68
79
  export const SdCard = /*@__PURE__*/ createComponent({
69
80
  tagName: 'sd-card',
70
81
  elementClass: SdCardElement,
@@ -292,6 +303,17 @@ export const SdSelectDropdown = /*@__PURE__*/ createComponent({
292
303
  },
293
304
  defineCustomElement: defineSdSelectDropdown
294
305
  });
306
+ export const SdSelectGroup = /*@__PURE__*/ createComponent({
307
+ tagName: 'sd-select-group',
308
+ elementClass: SdSelectGroupElement,
309
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
310
+ react: React,
311
+ events: {
312
+ onSdUpdate: 'sdUpdate',
313
+ onSdDropDownShow: 'sdDropDownShow'
314
+ },
315
+ defineCustomElement: defineSdSelectGroup
316
+ });
295
317
  export const SdSelectMultiple = /*@__PURE__*/ createComponent({
296
318
  tagName: 'sd-select-multiple',
297
319
  elementClass: SdSelectMultipleElement,
@@ -374,11 +396,19 @@ export const SdToast = /*@__PURE__*/ createComponent({
374
396
  elementClass: SdToastElement,
375
397
  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
376
398
  react: React,
399
+ events: { onSdClose: 'sdClose' },
400
+ defineCustomElement: defineSdToast
401
+ });
402
+ export const SdToastContainer = /*@__PURE__*/ createComponent({
403
+ tagName: 'sd-toast-container',
404
+ elementClass: SdToastContainerElement,
405
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
406
+ react: React,
377
407
  events: {
378
- onSdClose: 'sdClose',
379
- onSdButtonClick: 'sdButtonClick'
408
+ onSdToastShow: 'sdToastShow',
409
+ onSdToastDismiss: 'sdToastDismiss'
380
410
  },
381
- defineCustomElement: defineSdToast
411
+ defineCustomElement: defineSdToastContainer
382
412
  });
383
413
  export const SdToggle = /*@__PURE__*/ createComponent({
384
414
  tagName: 'sd-toggle',
package/dist/components/components.server.d.ts CHANGED
@@ -2,10 +2,11 @@
2
2
  * This file was automatically generated by the Stencil React Output Target.
3
3
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
4
4
  */
5
- import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
5
+ import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
6
6
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
7
7
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
8
8
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
9
+ import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
9
10
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
10
11
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
11
12
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
@@ -30,6 +31,7 @@ import { SdRadioButtonGroup as SdRadioButtonGroupElement } from "@sellmate/desig
30
31
  import { SdRadioGroup as SdRadioGroupElement } from "@sellmate/design-system/dist/components/sd-radio-group.js";
31
32
  import { SdRadio as SdRadioElement } from "@sellmate/design-system/dist/components/sd-radio.js";
32
33
  import { SdSelectDropdown as SdSelectDropdownElement } from "@sellmate/design-system/dist/components/sd-select-dropdown.js";
34
+ import { SdSelectGroup as SdSelectGroupElement } from "@sellmate/design-system/dist/components/sd-select-group.js";
33
35
  import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate/design-system/dist/components/sd-select-multiple-group.js";
34
36
  import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
35
37
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
@@ -39,6 +41,7 @@ import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/compon
39
41
  import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
40
42
  import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
41
43
  import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
44
+ import { SdToastContainer as SdToastContainerElement } from "@sellmate/design-system/dist/components/sd-toast-container.js";
42
45
  import { SdToast as SdToastElement } from "@sellmate/design-system/dist/components/sd-toast.js";
43
46
  import { SdToggleButton as SdToggleButtonElement } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
44
47
  import { SdToggle as SdToggleElement } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -56,6 +59,10 @@ export type SdButtonV2Events = {
56
59
  onSdClick: EventName<SdButtonV2CustomEvent<MouseEvent>>;
57
60
  };
58
61
  export declare const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Events>;
62
+ export type SdCalendarEvents = {
63
+ onSdSelect: EventName<CustomEvent<string>>;
64
+ };
65
+ export declare const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents>;
59
66
  export type SdCardEvents = NonNullable<unknown>;
60
67
  export declare const SdCard: StencilReactComponent<SdCardElement, SdCardEvents>;
61
68
  export type SdCheckboxEvents = {
@@ -159,6 +166,11 @@ export type SdSelectDropdownEvents = {
159
166
  onSdScroll: EventName<SdSelectDropdownCustomEvent<Event>>;
160
167
  };
161
168
  export declare const SdSelectDropdown: StencilReactComponent<SdSelectDropdownElement, SdSelectDropdownEvents>;
169
+ export type SdSelectGroupEvents = {
170
+ onSdUpdate: EventName<SdSelectGroupCustomEvent<SelectEvents['sdUpdate']>>;
171
+ onSdDropDownShow: EventName<SdSelectGroupCustomEvent<SelectEvents['dropDownShow']>>;
172
+ };
173
+ export declare const SdSelectGroup: StencilReactComponent<SdSelectGroupElement, SdSelectGroupEvents>;
162
174
  export type SdSelectMultipleEvents = {
163
175
  onSdUpdate: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['sdUpdate']>>;
164
176
  onSdDropDownShow: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['dropDownShow']>>;
@@ -205,9 +217,17 @@ export type SdTextareaEvents = {
205
217
  export declare const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEvents>;
206
218
  export type SdToastEvents = {
207
219
  onSdClose: EventName<CustomEvent<void>>;
208
- onSdButtonClick: EventName<CustomEvent<void>>;
209
220
  };
210
221
  export declare const SdToast: StencilReactComponent<SdToastElement, SdToastEvents>;
222
+ export type SdToastContainerEvents = {
223
+ onSdToastShow: EventName<CustomEvent<{
224
+ id: string;
225
+ }>>;
226
+ onSdToastDismiss: EventName<CustomEvent<{
227
+ id: string;
228
+ }>>;
229
+ };
230
+ export declare const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents>;
211
231
  export type SdToggleEvents = {
212
232
  onSdUpdate: EventName<CustomEvent<boolean>>;
213
233
  };
package/dist/components/components.server.js CHANGED
@@ -51,6 +51,13 @@ export const SdButtonV2 = /*@__PURE__*/ createComponent({
51
51
  clientModule: clientComponents.SdButtonV2,
52
52
  serializeShadowRoot,
53
53
  });
54
+ export const SdCalendar = /*@__PURE__*/ createComponent({
55
+ tagName: 'sd-calendar',
56
+ properties: { value: 'value' },
57
+ hydrateModule: import('@sellmate/design-system/hydrate'),
58
+ clientModule: clientComponents.SdCalendar,
59
+ serializeShadowRoot,
60
+ });
54
61
  export const SdCard = /*@__PURE__*/ createComponent({
55
62
  tagName: 'sd-card',
56
63
  properties: {
@@ -417,6 +424,30 @@ export const SdSelectDropdown = /*@__PURE__*/ createComponent({
417
424
  clientModule: clientComponents.SdSelectDropdown,
418
425
  serializeShadowRoot,
419
426
  });
427
+ export const SdSelectGroup = /*@__PURE__*/ createComponent({
428
+ tagName: 'sd-select-group',
429
+ properties: {
430
+ value: 'value',
431
+ placeholder: 'placeholder',
432
+ optionPlaceholder: 'option-placeholder',
433
+ width: 'width',
434
+ dropdownHeight: 'dropdown-height',
435
+ autoFocus: 'auto-focus',
436
+ disabled: 'disabled',
437
+ clearable: 'clearable',
438
+ searchable: 'searchable',
439
+ label: 'label',
440
+ insideLabel: 'inside-label',
441
+ useLabelRequired: 'use-label-required',
442
+ labelTooltip: 'label-tooltip',
443
+ error: 'error',
444
+ options: 'options',
445
+ rules: 'rules'
446
+ },
447
+ hydrateModule: import('@sellmate/design-system/hydrate'),
448
+ clientModule: clientComponents.SdSelectGroup,
449
+ serializeShadowRoot,
450
+ });
420
451
  export const SdSelectMultiple = /*@__PURE__*/ createComponent({
421
452
  tagName: 'sd-select-multiple',
422
453
  properties: {
@@ -552,7 +583,6 @@ export const SdToast = /*@__PURE__*/ createComponent({
552
583
  message: 'message',
553
584
  link: 'link',
554
585
  linkLabel: 'link-label',
555
- buttonLabel: 'button-label',
556
586
  useClose: 'use-close',
557
587
  type: 'type'
558
588
  },
@@ -560,6 +590,19 @@ export const SdToast = /*@__PURE__*/ createComponent({
560
590
  clientModule: clientComponents.SdToast,
561
591
  serializeShadowRoot,
562
592
  });
593
+ export const SdToastContainer = /*@__PURE__*/ createComponent({
594
+ tagName: 'sd-toast-container',
595
+ properties: {
596
+ position: 'position',
597
+ maxVisible: 'max-visible',
598
+ defaultDuration: 'default-duration',
599
+ gap: 'gap',
600
+ zIndex: 'z-index'
601
+ },
602
+ hydrateModule: import('@sellmate/design-system/hydrate'),
603
+ clientModule: clientComponents.SdToastContainer,
604
+ serializeShadowRoot,
605
+ });
563
606
  export const SdToggle = /*@__PURE__*/ createComponent({
564
607
  tagName: 'sd-toggle',
565
608
  properties: {
package/lib/components/components.server.ts CHANGED
@@ -8,10 +8,11 @@
8
8
  // @ts-ignore - ignore potential type issues as the project is importing itself
9
9
  import * as clientComponents from '@sellmate/design-system-react';
10
10
 
11
- import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
11
+ import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
12
12
  import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
13
13
  import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
14
14
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
15
+ import { SdCalendar as SdCalendarElement } from "@sellmate/design-system/dist/components/sd-calendar.js";
15
16
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
16
17
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
17
18
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
@@ -36,6 +37,7 @@ import { SdRadioButtonGroup as SdRadioButtonGroupElement } from "@sellmate/desig
36
37
  import { SdRadioGroup as SdRadioGroupElement } from "@sellmate/design-system/dist/components/sd-radio-group.js";
37
38
  import { SdRadio as SdRadioElement } from "@sellmate/design-system/dist/components/sd-radio.js";
38
39
  import { SdSelectDropdown as SdSelectDropdownElement } from "@sellmate/design-system/dist/components/sd-select-dropdown.js";
40
+ import { SdSelectGroup as SdSelectGroupElement } from "@sellmate/design-system/dist/components/sd-select-group.js";
39
41
  import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate/design-system/dist/components/sd-select-multiple-group.js";
40
42
  import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
41
43
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
@@ -45,6 +47,7 @@ import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/compon
45
47
  import { SdTabs as SdTabsElement } from "@sellmate/design-system/dist/components/sd-tabs.js";
46
48
  import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
47
49
  import { SdTextarea as SdTextareaElement } from "@sellmate/design-system/dist/components/sd-textarea.js";
50
+ import { SdToastContainer as SdToastContainerElement } from "@sellmate/design-system/dist/components/sd-toast-container.js";
48
51
  import { SdToast as SdToastElement } from "@sellmate/design-system/dist/components/sd-toast.js";
49
52
  import { SdToggleButton as SdToggleButtonElement } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
50
53
  import { SdToggle as SdToggleElement } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -107,6 +110,16 @@ export const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Even
107
110
  serializeShadowRoot,
108
111
  });
109
112
 
113
+ export type SdCalendarEvents = { onSdSelect: EventName<CustomEvent<string>> };
114
+
115
+ export const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents> = /*@__PURE__*/ createComponent<SdCalendarElement, SdCalendarEvents>({
116
+ tagName: 'sd-calendar',
117
+ properties: { value: 'value' },
118
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
119
+ clientModule: clientComponents.SdCalendar as ReactWebComponent<SdCalendarElement, SdCalendarEvents>,
120
+ serializeShadowRoot,
121
+ });
122
+
110
123
  export type SdCardEvents = NonNullable<unknown>;
111
124
 
112
125
  export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents>({
@@ -579,6 +592,36 @@ export const SdSelectDropdown: StencilReactComponent<SdSelectDropdownElement, Sd
579
592
  serializeShadowRoot,
580
593
  });
581
594
 
595
+ export type SdSelectGroupEvents = {
596
+ onSdUpdate: EventName<SdSelectGroupCustomEvent<SelectEvents['sdUpdate']>>,
597
+ onSdDropDownShow: EventName<SdSelectGroupCustomEvent<SelectEvents['dropDownShow']>>
598
+ };
599
+
600
+ export const SdSelectGroup: StencilReactComponent<SdSelectGroupElement, SdSelectGroupEvents> = /*@__PURE__*/ createComponent<SdSelectGroupElement, SdSelectGroupEvents>({
601
+ tagName: 'sd-select-group',
602
+ properties: {
603
+ value: 'value',
604
+ placeholder: 'placeholder',
605
+ optionPlaceholder: 'option-placeholder',
606
+ width: 'width',
607
+ dropdownHeight: 'dropdown-height',
608
+ autoFocus: 'auto-focus',
609
+ disabled: 'disabled',
610
+ clearable: 'clearable',
611
+ searchable: 'searchable',
612
+ label: 'label',
613
+ insideLabel: 'inside-label',
614
+ useLabelRequired: 'use-label-required',
615
+ labelTooltip: 'label-tooltip',
616
+ error: 'error',
617
+ options: 'options',
618
+ rules: 'rules'
619
+ },
620
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
621
+ clientModule: clientComponents.SdSelectGroup as ReactWebComponent<SdSelectGroupElement, SdSelectGroupEvents>,
622
+ serializeShadowRoot,
623
+ });
624
+
582
625
  export type SdSelectMultipleEvents = {
583
626
  onSdUpdate: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['sdUpdate']>>,
584
627
  onSdDropDownShow: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['dropDownShow']>>
@@ -757,10 +800,7 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
757
800
  serializeShadowRoot,
758
801
  });
759
802
 
760
- export type SdToastEvents = {
761
- onSdClose: EventName<CustomEvent<void>>,
762
- onSdButtonClick: EventName<CustomEvent<void>>
763
- };
803
+ export type SdToastEvents = { onSdClose: EventName<CustomEvent<void>> };
764
804
 
765
805
  export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@__PURE__*/ createComponent<SdToastElement, SdToastEvents>({
766
806
  tagName: 'sd-toast',
@@ -769,7 +809,6 @@ export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@
769
809
  message: 'message',
770
810
  link: 'link',
771
811
  linkLabel: 'link-label',
772
- buttonLabel: 'button-label',
773
812
  useClose: 'use-close',
774
813
  type: 'type'
775
814
  },
@@ -778,6 +817,25 @@ export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@
778
817
  serializeShadowRoot,
779
818
  });
780
819
 
820
+ export type SdToastContainerEvents = {
821
+ onSdToastShow: EventName<CustomEvent<{ id: string }>>,
822
+ onSdToastDismiss: EventName<CustomEvent<{ id: string }>>
823
+ };
824
+
825
+ export const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents> = /*@__PURE__*/ createComponent<SdToastContainerElement, SdToastContainerEvents>({
826
+ tagName: 'sd-toast-container',
827
+ properties: {
828
+ position: 'position',
829
+ maxVisible: 'max-visible',
830
+ defaultDuration: 'default-duration',
831
+ gap: 'gap',
832
+ zIndex: 'z-index'
833
+ },
834
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
835
+ clientModule: clientComponents.SdToastContainer as ReactWebComponent<SdToastContainerElement, SdToastContainerEvents>,
836
+ serializeShadowRoot,
837
+ });
838
+
781
839
  export type SdToggleEvents = { onSdUpdate: EventName<CustomEvent<boolean>> };
782
840
 
783
841
  export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents> = /*@__PURE__*/ createComponent<SdToggleElement, SdToggleEvents>({
package/lib/components/components.ts CHANGED
@@ -7,10 +7,11 @@
7
7
 
8
8
  /* eslint-disable */
9
9
 
10
- import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
10
+ import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
11
11
  import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
12
12
  import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
13
13
  import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
14
+ import { SdCalendar as SdCalendarElement, defineCustomElement as defineSdCalendar } from "@sellmate/design-system/dist/components/sd-calendar.js";
14
15
  import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
15
16
  import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
16
17
  import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
@@ -35,6 +36,7 @@ import { SdRadioButtonGroup as SdRadioButtonGroupElement, defineCustomElement as
35
36
  import { SdRadioGroup as SdRadioGroupElement, defineCustomElement as defineSdRadioGroup } from "@sellmate/design-system/dist/components/sd-radio-group.js";
36
37
  import { SdRadio as SdRadioElement, defineCustomElement as defineSdRadio } from "@sellmate/design-system/dist/components/sd-radio.js";
37
38
  import { SdSelectDropdown as SdSelectDropdownElement, defineCustomElement as defineSdSelectDropdown } from "@sellmate/design-system/dist/components/sd-select-dropdown.js";
39
+ import { SdSelectGroup as SdSelectGroupElement, defineCustomElement as defineSdSelectGroup } from "@sellmate/design-system/dist/components/sd-select-group.js";
38
40
  import { SdSelectMultipleGroup as SdSelectMultipleGroupElement, defineCustomElement as defineSdSelectMultipleGroup } from "@sellmate/design-system/dist/components/sd-select-multiple-group.js";
39
41
  import { SdSelectMultiple as SdSelectMultipleElement, defineCustomElement as defineSdSelectMultiple } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
40
42
  import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement as defineSdSelectOptionGroup } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
@@ -44,6 +46,7 @@ import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } fr
44
46
  import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
45
47
  import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
46
48
  import { SdTextarea as SdTextareaElement, defineCustomElement as defineSdTextarea } from "@sellmate/design-system/dist/components/sd-textarea.js";
49
+ import { SdToastContainer as SdToastContainerElement, defineCustomElement as defineSdToastContainer } from "@sellmate/design-system/dist/components/sd-toast-container.js";
47
50
  import { SdToast as SdToastElement, defineCustomElement as defineSdToast } from "@sellmate/design-system/dist/components/sd-toast.js";
48
51
  import { SdToggleButton as SdToggleButtonElement, defineCustomElement as defineSdToggleButton } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
49
52
  import { SdToggle as SdToggleElement, defineCustomElement as defineSdToggle } from "@sellmate/design-system/dist/components/sd-toggle.js";
@@ -85,6 +88,17 @@ export const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Even
85
88
  defineCustomElement: defineSdButtonV2
86
89
  });
87
90
 
91
+ export type SdCalendarEvents = { onSdSelect: EventName<CustomEvent<string>> };
92
+
93
+ export const SdCalendar: StencilReactComponent<SdCalendarElement, SdCalendarEvents> = /*@__PURE__*/ createComponent<SdCalendarElement, SdCalendarEvents>({
94
+ tagName: 'sd-calendar',
95
+ elementClass: SdCalendarElement,
96
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
97
+ react: React,
98
+ events: { onSdSelect: 'sdSelect' } as SdCalendarEvents,
99
+ defineCustomElement: defineSdCalendar
100
+ });
101
+
88
102
  export type SdCardEvents = NonNullable<unknown>;
89
103
 
90
104
  export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents>({
@@ -418,6 +432,23 @@ export const SdSelectDropdown: StencilReactComponent<SdSelectDropdownElement, Sd
418
432
  defineCustomElement: defineSdSelectDropdown
419
433
  });
420
434
 
435
+ export type SdSelectGroupEvents = {
436
+ onSdUpdate: EventName<SdSelectGroupCustomEvent<SelectEvents['sdUpdate']>>,
437
+ onSdDropDownShow: EventName<SdSelectGroupCustomEvent<SelectEvents['dropDownShow']>>
438
+ };
439
+
440
+ export const SdSelectGroup: StencilReactComponent<SdSelectGroupElement, SdSelectGroupEvents> = /*@__PURE__*/ createComponent<SdSelectGroupElement, SdSelectGroupEvents>({
441
+ tagName: 'sd-select-group',
442
+ elementClass: SdSelectGroupElement,
443
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
444
+ react: React,
445
+ events: {
446
+ onSdUpdate: 'sdUpdate',
447
+ onSdDropDownShow: 'sdDropDownShow'
448
+ } as SdSelectGroupEvents,
449
+ defineCustomElement: defineSdSelectGroup
450
+ });
451
+
421
452
  export type SdSelectMultipleEvents = {
422
453
  onSdUpdate: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['sdUpdate']>>,
423
454
  onSdDropDownShow: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['dropDownShow']>>
@@ -545,23 +576,34 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
545
576
  defineCustomElement: defineSdTextarea
546
577
  });
547
578
 
548
- export type SdToastEvents = {
549
- onSdClose: EventName<CustomEvent<void>>,
550
- onSdButtonClick: EventName<CustomEvent<void>>
551
- };
579
+ export type SdToastEvents = { onSdClose: EventName<CustomEvent<void>> };
552
580
 
553
581
  export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@__PURE__*/ createComponent<SdToastElement, SdToastEvents>({
554
582
  tagName: 'sd-toast',
555
583
  elementClass: SdToastElement,
556
584
  // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
557
585
  react: React,
558
- events: {
559
- onSdClose: 'sdClose',
560
- onSdButtonClick: 'sdButtonClick'
561
- } as SdToastEvents,
586
+ events: { onSdClose: 'sdClose' } as SdToastEvents,
562
587
  defineCustomElement: defineSdToast
563
588
  });
564
589
 
590
+ export type SdToastContainerEvents = {
591
+ onSdToastShow: EventName<CustomEvent<{ id: string }>>,
592
+ onSdToastDismiss: EventName<CustomEvent<{ id: string }>>
593
+ };
594
+
595
+ export const SdToastContainer: StencilReactComponent<SdToastContainerElement, SdToastContainerEvents> = /*@__PURE__*/ createComponent<SdToastContainerElement, SdToastContainerEvents>({
596
+ tagName: 'sd-toast-container',
597
+ elementClass: SdToastContainerElement,
598
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
599
+ react: React,
600
+ events: {
601
+ onSdToastShow: 'sdToastShow',
602
+ onSdToastDismiss: 'sdToastDismiss'
603
+ } as SdToastContainerEvents,
604
+ defineCustomElement: defineSdToastContainer
605
+ });
606
+
565
607
  export type SdToggleEvents = { onSdUpdate: EventName<CustomEvent<boolean>> };
566
608
 
567
609
  export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents> = /*@__PURE__*/ createComponent<SdToggleElement, SdToggleEvents>({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellmate/design-system-react",
3
- "version": "1.0.27",
3
+ "version": "1.0.29",
4
4
  "description": "Design System - React Component Wrappers",
5
5
  "keywords": [
6
6
  "react",
@@ -54,7 +54,7 @@
54
54
  "dev": "tsc --watch"
55
55
  },
56
56
  "dependencies": {
57
- "@sellmate/design-system": "^1.0.27",
57
+ "@sellmate/design-system": "^1.0.29",
58
58
  "@stencil/react-output-target": "^1.2.0"
59
59
  },
60
60
  "peerDependencies": {