@sellmate/design-system-react 1.0.22 → 1.0.23

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 (12) hide show
  1. package/dist/SdTable.js +1 -0
  2. package/dist/components/components.d.ts +14 -1
  3. package/dist/components/components.js +21 -0
  4. package/dist/components/components.server.d.ts +14 -1
  5. package/dist/components/components.server.js +26 -0
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.js +1 -1
  8. package/lib/SdTable.tsx +2 -0
  9. package/lib/components/components.server.ts +38 -1
  10. package/lib/components/components.ts +31 -1
  11. package/lib/index.ts +6 -1
  12. package/package.json +2 -2
package/dist/SdTable.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  import React, { useEffect, useState } from 'react';
2
3
  import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
3
4
  import { createComponent } from '@stencil/react-output-target/runtime';
package/dist/components/components.d.ts CHANGED
@@ -2,14 +2,16 @@
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 RadioValue, type SdButtonCustomEvent, type SdCheckboxCustomEvent, 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 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
+ import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
7
8
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
8
9
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
9
10
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
10
11
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
11
12
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
12
13
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
14
+ import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
13
15
  import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
14
16
  import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
15
17
  import { SdFloatingPortal as SdFloatingPortalElement } from "@sellmate/design-system/dist/components/sd-floating-portal.js";
@@ -48,6 +50,10 @@ export type SdButtonEvents = {
48
50
  onSdClick: EventName<SdButtonCustomEvent<MouseEvent>>;
49
51
  };
50
52
  export declare const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents>;
53
+ export type SdButtonV2Events = {
54
+ onSdClick: EventName<SdButtonV2CustomEvent<MouseEvent>>;
55
+ };
56
+ export declare const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Events>;
51
57
  export type SdCardEvents = NonNullable<unknown>;
52
58
  export declare const SdCard: StencilReactComponent<SdCardElement, SdCardEvents>;
53
59
  export type SdCheckboxEvents = {
@@ -67,6 +73,13 @@ export type SdDateRangePickerEvents = {
67
73
  onSdUpdate: EventName<CustomEvent<[string, string]>>;
68
74
  };
69
75
  export declare const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents>;
76
+ export type SdDropdownButtonEvents = {
77
+ onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>;
78
+ onSdDropDownShow: EventName<CustomEvent<{
79
+ isOpen: boolean;
80
+ }>>;
81
+ };
82
+ export declare const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents>;
70
83
  export type SdFieldEvents = NonNullable<unknown>;
71
84
  export declare const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents>;
72
85
  export type SdFilePickerEvents = {
package/dist/components/components.js CHANGED
@@ -1,11 +1,13 @@
1
1
  'use client';
2
2
  import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
3
+ import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
3
4
  import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
4
5
  import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
5
6
  import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
6
7
  import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
7
8
  import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
8
9
  import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
10
+ import { SdDropdownButton as SdDropdownButtonElement, defineCustomElement as defineSdDropdownButton } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
9
11
  import { SdField as SdFieldElement, defineCustomElement as defineSdField } from "@sellmate/design-system/dist/components/sd-field.js";
10
12
  import { SdFilePicker as SdFilePickerElement, defineCustomElement as defineSdFilePicker } from "@sellmate/design-system/dist/components/sd-file-picker.js";
11
13
  import { SdFloatingPortal as SdFloatingPortalElement, defineCustomElement as defineSdFloatingPortal } from "@sellmate/design-system/dist/components/sd-floating-portal.js";
@@ -55,6 +57,14 @@ export const SdButton = /*@__PURE__*/ createComponent({
55
57
  events: { onSdClick: 'sdClick' },
56
58
  defineCustomElement: defineSdButton
57
59
  });
60
+ export const SdButtonV2 = /*@__PURE__*/ createComponent({
61
+ tagName: 'sd-button-v2',
62
+ elementClass: SdButtonV2Element,
63
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
64
+ react: React,
65
+ events: { onSdClick: 'sdClick' },
66
+ defineCustomElement: defineSdButtonV2
67
+ });
58
68
  export const SdCard = /*@__PURE__*/ createComponent({
59
69
  tagName: 'sd-card',
60
70
  elementClass: SdCardElement,
@@ -98,6 +108,17 @@ export const SdDateRangePicker = /*@__PURE__*/ createComponent({
98
108
  events: { onSdUpdate: 'sdUpdate' },
99
109
  defineCustomElement: defineSdDateRangePicker
100
110
  });
111
+ export const SdDropdownButton = /*@__PURE__*/ createComponent({
112
+ tagName: 'sd-dropdown-button',
113
+ elementClass: SdDropdownButtonElement,
114
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
115
+ react: React,
116
+ events: {
117
+ onSdClick: 'sdClick',
118
+ onSdDropDownShow: 'sdDropDownShow'
119
+ },
120
+ defineCustomElement: defineSdDropdownButton
121
+ });
101
122
  export const SdField = /*@__PURE__*/ createComponent({
102
123
  tagName: 'sd-field',
103
124
  elementClass: SdFieldElement,
package/dist/components/components.server.d.ts CHANGED
@@ -2,14 +2,16 @@
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 RadioValue, type SdButtonCustomEvent, type SdCheckboxCustomEvent, 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 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
+ import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
7
8
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
8
9
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
9
10
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
10
11
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
11
12
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
12
13
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
14
+ import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
13
15
  import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
14
16
  import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
15
17
  import { SdFloatingPortal as SdFloatingPortalElement } from "@sellmate/design-system/dist/components/sd-floating-portal.js";
@@ -50,6 +52,10 @@ export type SdButtonEvents = {
50
52
  onSdClick: EventName<SdButtonCustomEvent<MouseEvent>>;
51
53
  };
52
54
  export declare const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents>;
55
+ export type SdButtonV2Events = {
56
+ onSdClick: EventName<SdButtonV2CustomEvent<MouseEvent>>;
57
+ };
58
+ export declare const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Events>;
53
59
  export type SdCardEvents = NonNullable<unknown>;
54
60
  export declare const SdCard: StencilReactComponent<SdCardElement, SdCardEvents>;
55
61
  export type SdCheckboxEvents = {
@@ -69,6 +75,13 @@ export type SdDateRangePickerEvents = {
69
75
  onSdUpdate: EventName<CustomEvent<[string, string]>>;
70
76
  };
71
77
  export declare const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents>;
78
+ export type SdDropdownButtonEvents = {
79
+ onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>;
80
+ onSdDropDownShow: EventName<CustomEvent<{
81
+ isOpen: boolean;
82
+ }>>;
83
+ };
84
+ export declare const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents>;
72
85
  export type SdFieldEvents = NonNullable<unknown>;
73
86
  export declare const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents>;
74
87
  export type SdFilePickerEvents = {
package/dist/components/components.server.js CHANGED
@@ -38,6 +38,20 @@ export const SdButton = /*@__PURE__*/ createComponent({
38
38
  clientModule: clientComponents.SdButton,
39
39
  serializeShadowRoot,
40
40
  });
41
+ export const SdButtonV2 = /*@__PURE__*/ createComponent({
42
+ tagName: 'sd-button-v2',
43
+ properties: {
44
+ name: 'name',
45
+ label: 'label',
46
+ icon: 'icon',
47
+ ariaLabel: 'aria-label',
48
+ disabled: 'disabled',
49
+ type: 'type'
50
+ },
51
+ hydrateModule: import('@sellmate/design-system/hydrate'),
52
+ clientModule: clientComponents.SdButtonV2,
53
+ serializeShadowRoot,
54
+ });
41
55
  export const SdCard = /*@__PURE__*/ createComponent({
42
56
  tagName: 'sd-card',
43
57
  properties: {
@@ -100,6 +114,18 @@ export const SdDateRangePicker = /*@__PURE__*/ createComponent({
100
114
  clientModule: clientComponents.SdDateRangePicker,
101
115
  serializeShadowRoot,
102
116
  });
117
+ export const SdDropdownButton = /*@__PURE__*/ createComponent({
118
+ tagName: 'sd-dropdown-button',
119
+ properties: {
120
+ name: 'name',
121
+ label: 'label',
122
+ disabled: 'disabled',
123
+ items: 'items'
124
+ },
125
+ hydrateModule: import('@sellmate/design-system/hydrate'),
126
+ clientModule: clientComponents.SdDropdownButton,
127
+ serializeShadowRoot,
128
+ });
103
129
  export const SdField = /*@__PURE__*/ createComponent({
104
130
  tagName: 'sd-field',
105
131
  properties: {
package/dist/index.d.ts CHANGED
@@ -2,4 +2,4 @@ export * from './components/components.js';
2
2
  export { defineCustomElements } from '@sellmate/design-system/loader';
3
3
  export { SdTable } from './SdTable';
4
4
  export type { SdTableProps } from './SdTable';
5
- export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, Rule, ValidatableField, SdModalCardButtonProps, SdTooltipProps, TagColor, TagSize, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';
5
+ export type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdModalCardButtonProps, SdTooltipProps, TagColor, TagSize, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- 'use strict';
1
+ 'use client';
2
2
  export * from './components/components.js';
3
3
  export { defineCustomElements } from '@sellmate/design-system/loader';
4
4
  export { SdTable } from './SdTable';
package/lib/SdTable.tsx CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  import React, { useEffect, useState } from 'react';
2
4
  import type { Row as SdTableRow, SdTableColumn } from '@sellmate/design-system';
3
5
  import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
package/lib/components/components.server.ts CHANGED
@@ -8,14 +8,16 @@
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 Event, type RadioValue, type SdButtonCustomEvent, type SdCheckboxCustomEvent, 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 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
+ import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
13
14
  import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
14
15
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
15
16
  import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
16
17
  import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
17
18
  import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
18
19
  import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
20
+ import { SdDropdownButton as SdDropdownButtonElement } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
19
21
  import { SdField as SdFieldElement } from "@sellmate/design-system/dist/components/sd-field.js";
20
22
  import { SdFilePicker as SdFilePickerElement } from "@sellmate/design-system/dist/components/sd-file-picker.js";
21
23
  import { SdFloatingPortal as SdFloatingPortalElement } from "@sellmate/design-system/dist/components/sd-floating-portal.js";
@@ -89,6 +91,23 @@ export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents> =
89
91
  serializeShadowRoot,
90
92
  });
91
93
 
94
+ export type SdButtonV2Events = { onSdClick: EventName<SdButtonV2CustomEvent<MouseEvent>> };
95
+
96
+ export const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Events> = /*@__PURE__*/ createComponent<SdButtonV2Element, SdButtonV2Events>({
97
+ tagName: 'sd-button-v2',
98
+ properties: {
99
+ name: 'name',
100
+ label: 'label',
101
+ icon: 'icon',
102
+ ariaLabel: 'aria-label',
103
+ disabled: 'disabled',
104
+ type: 'type'
105
+ },
106
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
107
+ clientModule: clientComponents.SdButtonV2 as ReactWebComponent<SdButtonV2Element, SdButtonV2Events>,
108
+ serializeShadowRoot,
109
+ });
110
+
92
111
  export type SdCardEvents = NonNullable<unknown>;
93
112
 
94
113
  export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents>({
@@ -169,6 +188,24 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
169
188
  serializeShadowRoot,
170
189
  });
171
190
 
191
+ export type SdDropdownButtonEvents = {
192
+ onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
193
+ onSdDropDownShow: EventName<CustomEvent<{ isOpen: boolean }>>
194
+ };
195
+
196
+ export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents> = /*@__PURE__*/ createComponent<SdDropdownButtonElement, SdDropdownButtonEvents>({
197
+ tagName: 'sd-dropdown-button',
198
+ properties: {
199
+ name: 'name',
200
+ label: 'label',
201
+ disabled: 'disabled',
202
+ items: 'items'
203
+ },
204
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
205
+ clientModule: clientComponents.SdDropdownButton as ReactWebComponent<SdDropdownButtonElement, SdDropdownButtonEvents>,
206
+ serializeShadowRoot,
207
+ });
208
+
172
209
  export type SdFieldEvents = NonNullable<unknown>;
173
210
 
174
211
  export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@__PURE__*/ createComponent<SdFieldElement, SdFieldEvents>({
package/lib/components/components.ts CHANGED
@@ -7,14 +7,16 @@
7
7
 
8
8
  /* eslint-disable */
9
9
 
10
- import { type CheckedType, type Event, type RadioValue, type SdButtonCustomEvent, type SdCheckboxCustomEvent, 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 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
+ import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
12
13
  import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
13
14
  import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
14
15
  import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
15
16
  import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
16
17
  import { SdDatePicker as SdDatePickerElement, defineCustomElement as defineSdDatePicker } from "@sellmate/design-system/dist/components/sd-date-picker.js";
17
18
  import { SdDateRangePicker as SdDateRangePickerElement, defineCustomElement as defineSdDateRangePicker } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
19
+ import { SdDropdownButton as SdDropdownButtonElement, defineCustomElement as defineSdDropdownButton } from "@sellmate/design-system/dist/components/sd-dropdown-button.js";
18
20
  import { SdField as SdFieldElement, defineCustomElement as defineSdField } from "@sellmate/design-system/dist/components/sd-field.js";
19
21
  import { SdFilePicker as SdFilePickerElement, defineCustomElement as defineSdFilePicker } from "@sellmate/design-system/dist/components/sd-file-picker.js";
20
22
  import { SdFloatingPortal as SdFloatingPortalElement, defineCustomElement as defineSdFloatingPortal } from "@sellmate/design-system/dist/components/sd-floating-portal.js";
@@ -72,6 +74,17 @@ export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents> =
72
74
  defineCustomElement: defineSdButton
73
75
  });
74
76
 
77
+ export type SdButtonV2Events = { onSdClick: EventName<SdButtonV2CustomEvent<MouseEvent>> };
78
+
79
+ export const SdButtonV2: StencilReactComponent<SdButtonV2Element, SdButtonV2Events> = /*@__PURE__*/ createComponent<SdButtonV2Element, SdButtonV2Events>({
80
+ tagName: 'sd-button-v2',
81
+ elementClass: SdButtonV2Element,
82
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
83
+ react: React,
84
+ events: { onSdClick: 'sdClick' } as SdButtonV2Events,
85
+ defineCustomElement: defineSdButtonV2
86
+ });
87
+
75
88
  export type SdCardEvents = NonNullable<unknown>;
76
89
 
77
90
  export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents>({
@@ -133,6 +146,23 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
133
146
  defineCustomElement: defineSdDateRangePicker
134
147
  });
135
148
 
149
+ export type SdDropdownButtonEvents = {
150
+ onSdClick: EventName<SdDropdownButtonCustomEvent<DropdownButtonValue>>,
151
+ onSdDropDownShow: EventName<CustomEvent<{ isOpen: boolean }>>
152
+ };
153
+
154
+ export const SdDropdownButton: StencilReactComponent<SdDropdownButtonElement, SdDropdownButtonEvents> = /*@__PURE__*/ createComponent<SdDropdownButtonElement, SdDropdownButtonEvents>({
155
+ tagName: 'sd-dropdown-button',
156
+ elementClass: SdDropdownButtonElement,
157
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
158
+ react: React,
159
+ events: {
160
+ onSdClick: 'sdClick',
161
+ onSdDropDownShow: 'sdDropDownShow'
162
+ } as SdDropdownButtonEvents,
163
+ defineCustomElement: defineSdDropdownButton
164
+ });
165
+
136
166
  export type SdFieldEvents = NonNullable<unknown>;
137
167
 
138
168
  export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@__PURE__*/ createComponent<SdFieldElement, SdFieldEvents>({
package/lib/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- 'use strict';
1
+ 'use client';
2
2
 
3
3
  export * from './components/components.js';
4
4
  export { defineCustomElements } from '@sellmate/design-system/loader';
@@ -23,6 +23,11 @@ export type {
23
23
  // Button types
24
24
  ButtonVariant,
25
25
  ButtonSize,
26
+ ButtonV2Name,
27
+ DropdownButtonItem,
28
+ DropdownButtonName,
29
+ DropdownButtonSize,
30
+ DropdownButtonValue,
26
31
  // Form types
27
32
  Rule,
28
33
  ValidatableField,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellmate/design-system-react",
3
- "version": "1.0.22",
3
+ "version": "1.0.23",
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.21",
57
+ "@sellmate/design-system": "^1.0.22",
58
58
  "@stencil/react-output-target": "^1.2.0"
59
59
  },
60
60
  "peerDependencies": {