@sellmate/design-system-react 0.0.59 → 0.0.61

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.
package/README.md CHANGED
@@ -1,57 +1,57 @@
1
- # Sellmate Design System - React
2
-
3
- React component wrappers for Sellmate Design System built with Stencil web components.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install @sellmate/design-system-react
9
- ```
10
-
11
- or
12
-
13
- ```bash
14
- yarn add @sellmate/design-system-react
15
- ```
16
-
17
- ## Quick Start
18
-
19
- ### Basic Setup
20
-
21
- ```tsx
22
- import { SdButton } from '@sellmate/design-system-react';
23
-
24
- export function App() {
25
- return (
26
- <SdButton
27
- label="Click me"
28
- onClick={() => console.log('clicked')}
29
- >
30
- </SdButton>
31
- );
32
- }
33
- ```
34
-
35
- ## Available Components
36
-
37
- - `SdButton` - Button component
38
- - `SdInput` - Input component
39
- - `SdCheckbox` - Checkbox component
40
- - `SdSelect` - Select dropdown component
41
- - `SdTable` - Table component
42
- - `SdTag` - Tag component
43
- - `SdIcon` - Icon component
44
- - `SdTooltip` - Tooltip component
45
- - `SdPopover` - Popover component
46
- - `SdDatePicker` - Date picker component
47
- - `SdDateRangePicker` - Date range picker component
48
- - `SdPagination` - Pagination component
49
-
50
- ## Requirements
51
-
52
- - React 16.8.0 or higher
53
- - React DOM 16.8.0 or higher
54
-
55
- ## License
56
-
57
- MIT
1
+ # Sellmate Design System - React
2
+
3
+ React component wrappers for Sellmate Design System built with Stencil web components.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @sellmate/design-system-react
9
+ ```
10
+
11
+ or
12
+
13
+ ```bash
14
+ yarn add @sellmate/design-system-react
15
+ ```
16
+
17
+ ## Quick Start
18
+
19
+ ### Basic Setup
20
+
21
+ ```tsx
22
+ import { SdButton } from '@sellmate/design-system-react';
23
+
24
+ export function App() {
25
+ return (
26
+ <SdButton
27
+ label="Click me"
28
+ onClick={() => console.log('clicked')}
29
+ >
30
+ </SdButton>
31
+ );
32
+ }
33
+ ```
34
+
35
+ ## Available Components
36
+
37
+ - `SdButton` - Button component
38
+ - `SdInput` - Input component
39
+ - `SdCheckbox` - Checkbox component
40
+ - `SdSelect` - Select dropdown component
41
+ - `SdTable` - Table component
42
+ - `SdTag` - Tag component
43
+ - `SdIcon` - Icon component
44
+ - `SdTooltip` - Tooltip component
45
+ - `SdPopover` - Popover component
46
+ - `SdDatePicker` - Date picker component
47
+ - `SdDateRangePicker` - Date range picker component
48
+ - `SdPagination` - Pagination component
49
+
50
+ ## Requirements
51
+
52
+ - React 16.8.0 or higher
53
+ - React DOM 16.8.0 or higher
54
+
55
+ ## License
56
+
57
+ MIT
@@ -2,7 +2,7 @@
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 Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableBackupCustomEvent, type SdTableCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
5
+ import { type CheckedType, type RadioValue, type Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableBackupCustomEvent, type SdTableCustomEvent, 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 { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
8
8
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
@@ -16,6 +16,7 @@ import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components
16
16
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
17
17
  import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
18
18
  import { SdModalCard as SdModalCardElement } from "@sellmate/design-system/dist/components/sd-modal-card.js";
19
+ import { SdNumberInput as SdNumberInputElement } from "@sellmate/design-system/dist/components/sd-number-input.js";
19
20
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
20
21
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
21
22
  import { SdPortal as SdPortalElement } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -26,6 +27,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate
26
27
  import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
27
28
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
28
29
  import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
30
+ import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
29
31
  import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
30
32
  import { SdTableBackup as SdTableBackupElement } from "@sellmate/design-system/dist/components/sd-table-backup.js";
31
33
  import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -89,6 +91,21 @@ export type SdModalCardEvents = {
89
91
  onSdConfirm: EventName<SdModalCardCustomEvent<MouseEvent>>;
90
92
  };
91
93
  export declare const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardEvents>;
94
+ export type SdNumberInputEvents = {
95
+ onSdIncrement: EventName<CustomEvent<{
96
+ currentVal: number;
97
+ prevVal: number;
98
+ }>>;
99
+ onSdDecrement: EventName<CustomEvent<{
100
+ currentVal: number;
101
+ prevVal: number;
102
+ }>>;
103
+ onSdInput: EventName<CustomEvent<number | null>>;
104
+ onSdChange: EventName<CustomEvent<number | null>>;
105
+ onSdFocus: EventName<SdNumberInputCustomEvent<Event>>;
106
+ onSdBlur: EventName<SdNumberInputCustomEvent<Event>>;
107
+ };
108
+ export declare const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumberInputEvents>;
92
109
  export type SdPaginationEvents = {
93
110
  onPageChange: EventName<CustomEvent<number>>;
94
111
  };
@@ -141,6 +158,11 @@ export type SdSelectOptionGroupEvents = {
141
158
  }>>;
142
159
  };
143
160
  export declare const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupElement, SdSelectOptionGroupEvents>;
161
+ export type SdSelectSearchInputEvents = {
162
+ onSdSearchInput: EventName<CustomEvent<string>>;
163
+ onSdSearchFocus: EventName<CustomEvent<void>>;
164
+ };
165
+ export declare const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>;
144
166
  export type SdTableEvents = {
145
167
  onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>;
146
168
  onSdPageChange: EventName<CustomEvent<number>>;
@@ -12,6 +12,7 @@ import { SdIcon as SdIconElement, defineCustomElement as defineSdIcon } from "@s
12
12
  import { SdInput as SdInputElement, defineCustomElement as defineSdInput } from "@sellmate/design-system/dist/components/sd-input.js";
13
13
  import { SdLoadingSpinner as SdLoadingSpinnerElement, defineCustomElement as defineSdLoadingSpinner } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
14
14
  import { SdModalCard as SdModalCardElement, defineCustomElement as defineSdModalCard } from "@sellmate/design-system/dist/components/sd-modal-card.js";
15
+ import { SdNumberInput as SdNumberInputElement, defineCustomElement as defineSdNumberInput } from "@sellmate/design-system/dist/components/sd-number-input.js";
15
16
  import { SdPagination as SdPaginationElement, defineCustomElement as defineSdPagination } from "@sellmate/design-system/dist/components/sd-pagination.js";
16
17
  import { SdPopover as SdPopoverElement, defineCustomElement as defineSdPopover } from "@sellmate/design-system/dist/components/sd-popover.js";
17
18
  import { SdPortal as SdPortalElement, defineCustomElement as defineSdPortal } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -22,6 +23,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement, defineCustomElem
22
23
  import { SdSelectMultiple as SdSelectMultipleElement, defineCustomElement as defineSdSelectMultiple } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
23
24
  import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement as defineSdSelectOptionGroup } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
24
25
  import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
26
+ import { SdSelectSearchInput as SdSelectSearchInputElement, defineCustomElement as defineSdSelectSearchInput } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
25
27
  import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
26
28
  import { SdTableBackup as SdTableBackupElement, defineCustomElement as defineSdTableBackup } from "@sellmate/design-system/dist/components/sd-table-backup.js";
27
29
  import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -154,6 +156,21 @@ export const SdModalCard = /*@__PURE__*/ createComponent({
154
156
  },
155
157
  defineCustomElement: defineSdModalCard
156
158
  });
159
+ export const SdNumberInput = /*@__PURE__*/ createComponent({
160
+ tagName: 'sd-number-input',
161
+ elementClass: SdNumberInputElement,
162
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
163
+ react: React,
164
+ events: {
165
+ onSdIncrement: 'sdIncrement',
166
+ onSdDecrement: 'sdDecrement',
167
+ onSdInput: 'sdInput',
168
+ onSdChange: 'sdChange',
169
+ onSdFocus: 'sdFocus',
170
+ onSdBlur: 'sdBlur'
171
+ },
172
+ defineCustomElement: defineSdNumberInput
173
+ });
157
174
  export const SdPagination = /*@__PURE__*/ createComponent({
158
175
  tagName: 'sd-pagination',
159
176
  elementClass: SdPaginationElement,
@@ -251,6 +268,17 @@ export const SdSelectOptionGroup = /*@__PURE__*/ createComponent({
251
268
  events: { onOptionClick: 'optionClick' },
252
269
  defineCustomElement: defineSdSelectOptionGroup
253
270
  });
271
+ export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
272
+ tagName: 'sd-select-search-input',
273
+ elementClass: SdSelectSearchInputElement,
274
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
275
+ react: React,
276
+ events: {
277
+ onSdSearchInput: 'sdSearchInput',
278
+ onSdSearchFocus: 'sdSearchFocus'
279
+ },
280
+ defineCustomElement: defineSdSelectSearchInput
281
+ });
254
282
  export const SdTable = /*@__PURE__*/ createComponent({
255
283
  tagName: 'sd-table',
256
284
  elementClass: SdTableElement,
@@ -2,7 +2,7 @@
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 Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableBackupCustomEvent, type SdTableCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
5
+ import { type CheckedType, type RadioValue, type Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableBackupCustomEvent, type SdTableCustomEvent, 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 { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
8
8
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
@@ -16,6 +16,7 @@ import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components
16
16
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
17
17
  import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
18
18
  import { SdModalCard as SdModalCardElement } from "@sellmate/design-system/dist/components/sd-modal-card.js";
19
+ import { SdNumberInput as SdNumberInputElement } from "@sellmate/design-system/dist/components/sd-number-input.js";
19
20
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
20
21
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
21
22
  import { SdPortal as SdPortalElement } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -26,6 +27,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate
26
27
  import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
27
28
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
28
29
  import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
30
+ import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
29
31
  import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
30
32
  import { SdTableBackup as SdTableBackupElement } from "@sellmate/design-system/dist/components/sd-table-backup.js";
31
33
  import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -91,6 +93,21 @@ export type SdModalCardEvents = {
91
93
  onSdConfirm: EventName<SdModalCardCustomEvent<MouseEvent>>;
92
94
  };
93
95
  export declare const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardEvents>;
96
+ export type SdNumberInputEvents = {
97
+ onSdIncrement: EventName<CustomEvent<{
98
+ currentVal: number;
99
+ prevVal: number;
100
+ }>>;
101
+ onSdDecrement: EventName<CustomEvent<{
102
+ currentVal: number;
103
+ prevVal: number;
104
+ }>>;
105
+ onSdInput: EventName<CustomEvent<number | null>>;
106
+ onSdChange: EventName<CustomEvent<number | null>>;
107
+ onSdFocus: EventName<SdNumberInputCustomEvent<Event>>;
108
+ onSdBlur: EventName<SdNumberInputCustomEvent<Event>>;
109
+ };
110
+ export declare const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumberInputEvents>;
94
111
  export type SdPaginationEvents = {
95
112
  onPageChange: EventName<CustomEvent<number>>;
96
113
  };
@@ -143,6 +160,11 @@ export type SdSelectOptionGroupEvents = {
143
160
  }>>;
144
161
  };
145
162
  export declare const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupElement, SdSelectOptionGroupEvents>;
163
+ export type SdSelectSearchInputEvents = {
164
+ onSdSearchInput: EventName<CustomEvent<string>>;
165
+ onSdSearchFocus: EventName<CustomEvent<void>>;
166
+ };
167
+ export declare const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>;
146
168
  export type SdTableEvents = {
147
169
  onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>;
148
170
  onSdPageChange: EventName<CustomEvent<number>>;
@@ -79,9 +79,10 @@ export const SdDateBox = /*@__PURE__*/ createComponent({
79
79
  export const SdDatePicker = /*@__PURE__*/ createComponent({
80
80
  tagName: 'sd-date-picker',
81
81
  properties: {
82
- date: 'date',
82
+ value: 'value',
83
83
  label: 'label',
84
- disabled: 'disabled'
84
+ disabled: 'disabled',
85
+ placeholder: 'placeholder'
85
86
  },
86
87
  hydrateModule: import('@sellmate/design-system/hydrate'),
87
88
  clientModule: clientComponents.SdDatePicker,
@@ -92,7 +93,8 @@ export const SdDateRangePicker = /*@__PURE__*/ createComponent({
92
93
  properties: {
93
94
  label: 'label',
94
95
  maxRange: 'max-range',
95
- disabled: 'disabled'
96
+ disabled: 'disabled',
97
+ placeholder: 'placeholder'
96
98
  },
97
99
  hydrateModule: import('@sellmate/design-system/hydrate'),
98
100
  clientModule: clientComponents.SdDateRangePicker,
@@ -144,6 +146,7 @@ export const SdInput = /*@__PURE__*/ createComponent({
144
146
  properties: {
145
147
  value: 'value',
146
148
  label: 'label',
149
+ insideLabel: 'inside-label',
147
150
  placeholder: 'placeholder',
148
151
  disabled: 'disabled',
149
152
  clearable: 'clearable',
@@ -160,7 +163,7 @@ export const SdInput = /*@__PURE__*/ createComponent({
160
163
  });
161
164
  export const SdLoadingSpinner = /*@__PURE__*/ createComponent({
162
165
  tagName: 'sd-loading-spinner',
163
- properties: {},
166
+ properties: { color: 'color' },
164
167
  hydrateModule: import('@sellmate/design-system/hydrate'),
165
168
  clientModule: clientComponents.SdLoadingSpinner,
166
169
  serializeShadowRoot,
@@ -179,6 +182,28 @@ export const SdModalCard = /*@__PURE__*/ createComponent({
179
182
  clientModule: clientComponents.SdModalCard,
180
183
  serializeShadowRoot,
181
184
  });
185
+ export const SdNumberInput = /*@__PURE__*/ createComponent({
186
+ tagName: 'sd-number-input',
187
+ properties: {
188
+ min: 'min',
189
+ max: 'max',
190
+ step: 'step',
191
+ useButton: 'use-button',
192
+ useDecimal: 'use-decimal',
193
+ value: 'value',
194
+ label: 'label',
195
+ placeholder: 'placeholder',
196
+ disabled: 'disabled',
197
+ width: 'width',
198
+ autoFocus: 'auto-focus',
199
+ status: 'status',
200
+ inputClass: 'input-class',
201
+ readonly: 'readonly'
202
+ },
203
+ hydrateModule: import('@sellmate/design-system/hydrate'),
204
+ clientModule: clientComponents.SdNumberInput,
205
+ serializeShadowRoot,
206
+ });
182
207
  export const SdPagination = /*@__PURE__*/ createComponent({
183
208
  tagName: 'sd-pagination',
184
209
  properties: {
@@ -225,7 +250,7 @@ export const SdProgress = /*@__PURE__*/ createComponent({
225
250
  tagName: 'sd-progress',
226
251
  properties: {
227
252
  type: 'type',
228
- status: 'status',
253
+ error: 'error',
229
254
  percentage: 'percentage',
230
255
  size: 'size',
231
256
  strokeWidth: 'stroke-width',
@@ -340,6 +365,16 @@ export const SdSelectOptionGroup = /*@__PURE__*/ createComponent({
340
365
  clientModule: clientComponents.SdSelectOptionGroup,
341
366
  serializeShadowRoot,
342
367
  });
368
+ export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
369
+ tagName: 'sd-select-search-input',
370
+ properties: {
371
+ isScrolled: 'is-scrolled',
372
+ searchText: 'search-text'
373
+ },
374
+ hydrateModule: import('@sellmate/design-system/hydrate'),
375
+ clientModule: clientComponents.SdSelectSearchInput,
376
+ serializeShadowRoot,
377
+ });
343
378
  export const SdTable = /*@__PURE__*/ createComponent({
344
379
  tagName: 'sd-table',
345
380
  properties: {
@@ -8,7 +8,7 @@
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 Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableBackupCustomEvent, type SdTableCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
11
+ import { type CheckedType, type Event, type RadioValue, type Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableBackupCustomEvent, type SdTableCustomEvent, 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 { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
14
14
  import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
@@ -22,6 +22,7 @@ import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components
22
22
  import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
23
23
  import { SdLoadingSpinner as SdLoadingSpinnerElement } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
24
24
  import { SdModalCard as SdModalCardElement } from "@sellmate/design-system/dist/components/sd-modal-card.js";
25
+ import { SdNumberInput as SdNumberInputElement } from "@sellmate/design-system/dist/components/sd-number-input.js";
25
26
  import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
26
27
  import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
27
28
  import { SdPortal as SdPortalElement } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -32,6 +33,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate
32
33
  import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
33
34
  import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
34
35
  import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
36
+ import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
35
37
  import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
36
38
  import { SdTableBackup as SdTableBackupElement } from "@sellmate/design-system/dist/components/sd-table-backup.js";
37
39
  import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -143,9 +145,10 @@ export type SdDatePickerEvents = { onSdChange: EventName<CustomEvent<string | nu
143
145
  export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePickerEvents> = /*@__PURE__*/ createComponent<SdDatePickerElement, SdDatePickerEvents>({
144
146
  tagName: 'sd-date-picker',
145
147
  properties: {
146
- date: 'date',
148
+ value: 'value',
147
149
  label: 'label',
148
- disabled: 'disabled'
150
+ disabled: 'disabled',
151
+ placeholder: 'placeholder'
149
152
  },
150
153
  hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
151
154
  clientModule: clientComponents.SdDatePicker as ReactWebComponent<SdDatePickerElement, SdDatePickerEvents>,
@@ -159,7 +162,8 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
159
162
  properties: {
160
163
  label: 'label',
161
164
  maxRange: 'max-range',
162
- disabled: 'disabled'
165
+ disabled: 'disabled',
166
+ placeholder: 'placeholder'
163
167
  },
164
168
  hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
165
169
  clientModule: clientComponents.SdDateRangePicker as ReactWebComponent<SdDateRangePickerElement, SdDateRangePickerEvents>,
@@ -229,6 +233,7 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
229
233
  properties: {
230
234
  value: 'value',
231
235
  label: 'label',
236
+ insideLabel: 'inside-label',
232
237
  placeholder: 'placeholder',
233
238
  disabled: 'disabled',
234
239
  clearable: 'clearable',
@@ -248,7 +253,7 @@ export type SdLoadingSpinnerEvents = NonNullable<unknown>;
248
253
 
249
254
  export const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents> = /*@__PURE__*/ createComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>({
250
255
  tagName: 'sd-loading-spinner',
251
- properties: {},
256
+ properties: { color: 'color' },
252
257
  hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
253
258
  clientModule: clientComponents.SdLoadingSpinner as ReactWebComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>,
254
259
  serializeShadowRoot,
@@ -274,6 +279,38 @@ export const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardE
274
279
  serializeShadowRoot,
275
280
  });
276
281
 
282
+ export type SdNumberInputEvents = {
283
+ onSdIncrement: EventName<CustomEvent<{ currentVal: number; prevVal: number }>>,
284
+ onSdDecrement: EventName<CustomEvent<{ currentVal: number; prevVal: number }>>,
285
+ onSdInput: EventName<CustomEvent<number | null>>,
286
+ onSdChange: EventName<CustomEvent<number | null>>,
287
+ onSdFocus: EventName<SdNumberInputCustomEvent<Event>>,
288
+ onSdBlur: EventName<SdNumberInputCustomEvent<Event>>
289
+ };
290
+
291
+ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumberInputEvents> = /*@__PURE__*/ createComponent<SdNumberInputElement, SdNumberInputEvents>({
292
+ tagName: 'sd-number-input',
293
+ properties: {
294
+ min: 'min',
295
+ max: 'max',
296
+ step: 'step',
297
+ useButton: 'use-button',
298
+ useDecimal: 'use-decimal',
299
+ value: 'value',
300
+ label: 'label',
301
+ placeholder: 'placeholder',
302
+ disabled: 'disabled',
303
+ width: 'width',
304
+ autoFocus: 'auto-focus',
305
+ status: 'status',
306
+ inputClass: 'input-class',
307
+ readonly: 'readonly'
308
+ },
309
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
310
+ clientModule: clientComponents.SdNumberInput as ReactWebComponent<SdNumberInputElement, SdNumberInputEvents>,
311
+ serializeShadowRoot,
312
+ });
313
+
277
314
  export type SdPaginationEvents = { onPageChange: EventName<CustomEvent<number>> };
278
315
 
279
316
  export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents> = /*@__PURE__*/ createComponent<SdPaginationElement, SdPaginationEvents>({
@@ -331,7 +368,7 @@ export const SdProgress: StencilReactComponent<SdProgressElement, SdProgressEven
331
368
  tagName: 'sd-progress',
332
369
  properties: {
333
370
  type: 'type',
334
- status: 'status',
371
+ error: 'error',
335
372
  percentage: 'percentage',
336
373
  size: 'size',
337
374
  strokeWidth: 'stroke-width',
@@ -490,6 +527,22 @@ export const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupEleme
490
527
  serializeShadowRoot,
491
528
  });
492
529
 
530
+ export type SdSelectSearchInputEvents = {
531
+ onSdSearchInput: EventName<CustomEvent<string>>,
532
+ onSdSearchFocus: EventName<CustomEvent<void>>
533
+ };
534
+
535
+ export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents> = /*@__PURE__*/ createComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>({
536
+ tagName: 'sd-select-search-input',
537
+ properties: {
538
+ isScrolled: 'is-scrolled',
539
+ searchText: 'search-text'
540
+ },
541
+ hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
542
+ clientModule: clientComponents.SdSelectSearchInput as ReactWebComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>,
543
+ serializeShadowRoot,
544
+ });
545
+
493
546
  export type SdTableEvents = {
494
547
  onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
495
548
  onSdPageChange: EventName<CustomEvent<number>>,
@@ -7,7 +7,7 @@
7
7
 
8
8
  /* eslint-disable */
9
9
 
10
- import { type CheckedType, type Event, type RadioValue, type Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableBackupCustomEvent, type SdTableCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
10
+ import { type CheckedType, type Event, type RadioValue, type Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdFilePickerCustomEvent, type SdInputCustomEvent, type SdModalCardCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableBackupCustomEvent, type SdTableCustomEvent, 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 { SdButton as SdButtonElement, defineCustomElement as defineSdButton } from "@sellmate/design-system/dist/components/sd-button.js";
13
13
  import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
@@ -21,6 +21,7 @@ import { SdIcon as SdIconElement, defineCustomElement as defineSdIcon } from "@s
21
21
  import { SdInput as SdInputElement, defineCustomElement as defineSdInput } from "@sellmate/design-system/dist/components/sd-input.js";
22
22
  import { SdLoadingSpinner as SdLoadingSpinnerElement, defineCustomElement as defineSdLoadingSpinner } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
23
23
  import { SdModalCard as SdModalCardElement, defineCustomElement as defineSdModalCard } from "@sellmate/design-system/dist/components/sd-modal-card.js";
24
+ import { SdNumberInput as SdNumberInputElement, defineCustomElement as defineSdNumberInput } from "@sellmate/design-system/dist/components/sd-number-input.js";
24
25
  import { SdPagination as SdPaginationElement, defineCustomElement as defineSdPagination } from "@sellmate/design-system/dist/components/sd-pagination.js";
25
26
  import { SdPopover as SdPopoverElement, defineCustomElement as defineSdPopover } from "@sellmate/design-system/dist/components/sd-popover.js";
26
27
  import { SdPortal as SdPortalElement, defineCustomElement as defineSdPortal } from "@sellmate/design-system/dist/components/sd-portal.js";
@@ -31,6 +32,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement, defineCustomElem
31
32
  import { SdSelectMultiple as SdSelectMultipleElement, defineCustomElement as defineSdSelectMultiple } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
32
33
  import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement as defineSdSelectOptionGroup } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
33
34
  import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
35
+ import { SdSelectSearchInput as SdSelectSearchInputElement, defineCustomElement as defineSdSelectSearchInput } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
34
36
  import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
35
37
  import { SdTableBackup as SdTableBackupElement, defineCustomElement as defineSdTableBackup } from "@sellmate/design-system/dist/components/sd-table-backup.js";
36
38
  import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -216,6 +218,31 @@ export const SdModalCard: StencilReactComponent<SdModalCardElement, SdModalCardE
216
218
  defineCustomElement: defineSdModalCard
217
219
  });
218
220
 
221
+ export type SdNumberInputEvents = {
222
+ onSdIncrement: EventName<CustomEvent<{ currentVal: number; prevVal: number }>>,
223
+ onSdDecrement: EventName<CustomEvent<{ currentVal: number; prevVal: number }>>,
224
+ onSdInput: EventName<CustomEvent<number | null>>,
225
+ onSdChange: EventName<CustomEvent<number | null>>,
226
+ onSdFocus: EventName<SdNumberInputCustomEvent<Event>>,
227
+ onSdBlur: EventName<SdNumberInputCustomEvent<Event>>
228
+ };
229
+
230
+ export const SdNumberInput: StencilReactComponent<SdNumberInputElement, SdNumberInputEvents> = /*@__PURE__*/ createComponent<SdNumberInputElement, SdNumberInputEvents>({
231
+ tagName: 'sd-number-input',
232
+ elementClass: SdNumberInputElement,
233
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
234
+ react: React,
235
+ events: {
236
+ onSdIncrement: 'sdIncrement',
237
+ onSdDecrement: 'sdDecrement',
238
+ onSdInput: 'sdInput',
239
+ onSdChange: 'sdChange',
240
+ onSdFocus: 'sdFocus',
241
+ onSdBlur: 'sdBlur'
242
+ } as SdNumberInputEvents,
243
+ defineCustomElement: defineSdNumberInput
244
+ });
245
+
219
246
  export type SdPaginationEvents = { onPageChange: EventName<CustomEvent<number>> };
220
247
 
221
248
  export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents> = /*@__PURE__*/ createComponent<SdPaginationElement, SdPaginationEvents>({
@@ -368,6 +395,23 @@ export const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupEleme
368
395
  defineCustomElement: defineSdSelectOptionGroup
369
396
  });
370
397
 
398
+ export type SdSelectSearchInputEvents = {
399
+ onSdSearchInput: EventName<CustomEvent<string>>,
400
+ onSdSearchFocus: EventName<CustomEvent<void>>
401
+ };
402
+
403
+ export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents> = /*@__PURE__*/ createComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>({
404
+ tagName: 'sd-select-search-input',
405
+ elementClass: SdSelectSearchInputElement,
406
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
407
+ react: React,
408
+ events: {
409
+ onSdSearchInput: 'sdSearchInput',
410
+ onSdSearchFocus: 'sdSearchFocus'
411
+ } as SdSelectSearchInputEvents,
412
+ defineCustomElement: defineSdSelectSearchInput
413
+ });
414
+
371
415
  export type SdTableEvents = {
372
416
  onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
373
417
  onSdPageChange: EventName<CustomEvent<number>>,
package/lib/index.ts CHANGED
@@ -1,11 +1,11 @@
1
- 'use strict';
2
-
3
- export * from './components/components.js';
4
- export { defineCustomElements } from '@sellmate/design-system/loader';
5
-
6
- // Export sd-table types for React usage
7
- export type {
8
- SdTableSortDir,
9
- SdTableColumn,
10
- Row as SdTableRow,
11
- } from '@sellmate/design-system';
1
+ 'use strict';
2
+
3
+ export * from './components/components.js';
4
+ export { defineCustomElements } from '@sellmate/design-system/loader';
5
+
6
+ // Export sd-table types for React usage
7
+ export type {
8
+ SdTableSortDir,
9
+ SdTableColumn,
10
+ Row as SdTableRow,
11
+ } from '@sellmate/design-system';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sellmate/design-system-react",
3
- "version": "0.0.59",
3
+ "version": "0.0.61",
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": "^0.0.53",
57
+ "@sellmate/design-system": "^0.0.55",
58
58
  "@stencil/react-output-target": "^1.2.0"
59
59
  },
60
60
  "peerDependencies": {
@@ -67,5 +67,6 @@
67
67
  "react-dom": "^19.2.0",
68
68
  "rimraf": "^6.0.1",
69
69
  "typescript": "^5.9.3"
70
- }
70
+ },
71
+ "gitHead": "7321b70e305dd0177f37d3c518217c0d675d77f1"
71
72
  }