@sellmate/design-system-react 0.0.60 → 0.0.62

package/README.md

@@ -1,57 +1,57 @@
-# Sellmate Design System - React
-
-React component wrappers for Sellmate Design System built with Stencil web components.
-
-## Installation
-
-```bash
-npm install @sellmate/design-system-react
-```
-
-or
-
-```bash
-yarn add @sellmate/design-system-react
-```
-
-## Quick Start
-
-### Basic Setup
-
-```tsx
-import { SdButton } from '@sellmate/design-system-react';
-
-export function App() {
-  return (
-    <SdButton 
-      label="Click me" 
-      onClick={() => console.log('clicked')}
-    >
-    </SdButton>
-  );
-}
-```
-
-## Available Components
-
-- `SdButton` - Button component
-- `SdInput` - Input component
-- `SdCheckbox` - Checkbox component
-- `SdSelect` - Select dropdown component
-- `SdTable` - Table component
-- `SdTag` - Tag component
-- `SdIcon` - Icon component
-- `SdTooltip` - Tooltip component
-- `SdPopover` - Popover component
-- `SdDatePicker` - Date picker component
-- `SdDateRangePicker` - Date range picker component
-- `SdPagination` - Pagination component
-
-## Requirements
-
-- React 16.8.0 or higher
-- React DOM 16.8.0 or higher
-
-## License
-
-MIT
+# Sellmate Design System - React
+
+React component wrappers for Sellmate Design System built with Stencil web components.
+
+## Installation
+
+```bash
+npm install @sellmate/design-system-react
+```
+
+or
+
+```bash
+yarn add @sellmate/design-system-react
+```
+
+## Quick Start
+
+### Basic Setup
+
+```tsx
+import { SdButton } from '@sellmate/design-system-react';
+
+export function App() {
+  return (
+    <SdButton 
+      label="Click me" 
+      onClick={() => console.log('clicked')}
+    >
+    </SdButton>
+  );
+}
+```
+
+## Available Components
+
+- `SdButton` - Button component
+- `SdInput` - Input component
+- `SdCheckbox` - Checkbox component
+- `SdSelect` - Select dropdown component
+- `SdTable` - Table component
+- `SdTag` - Tag component
+- `SdIcon` - Icon component
+- `SdTooltip` - Tooltip component
+- `SdPopover` - Popover component
+- `SdDatePicker` - Date picker component
+- `SdDateRangePicker` - Date range picker component
+- `SdPagination` - Pagination component
+
+## Requirements
+
+- React 16.8.0 or higher
+- React DOM 16.8.0 or higher
+
+## License
+
+MIT

package/dist/components/components.d.ts

@@ -27,6 +27,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate
 import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
 import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
 import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
+import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
 import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
 import { SdTableBackup as SdTableBackupElement } from "@sellmate/design-system/dist/components/sd-table-backup.js";
 import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -157,6 +158,11 @@ export type SdSelectOptionGroupEvents = {
     }>>;
 };
 export declare const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupElement, SdSelectOptionGroupEvents>;
+export type SdSelectSearchInputEvents = {
+    onSdSearchInput: EventName<CustomEvent<string>>;
+    onSdSearchFocus: EventName<CustomEvent<void>>;
+};
+export declare const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>;
 export type SdTableEvents = {
     onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>;
     onSdPageChange: EventName<CustomEvent<number>>;

package/dist/components/components.js

@@ -23,6 +23,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement, defineCustomElem
 import { SdSelectMultiple as SdSelectMultipleElement, defineCustomElement as defineSdSelectMultiple } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
 import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement as defineSdSelectOptionGroup } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
 import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
+import { SdSelectSearchInput as SdSelectSearchInputElement, defineCustomElement as defineSdSelectSearchInput } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
 import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
 import { SdTableBackup as SdTableBackupElement, defineCustomElement as defineSdTableBackup } from "@sellmate/design-system/dist/components/sd-table-backup.js";
 import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -267,6 +268,17 @@ export const SdSelectOptionGroup = /*@__PURE__*/ createComponent({
     events: { onOptionClick: 'optionClick' },
     defineCustomElement: defineSdSelectOptionGroup
 });
+export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
+    tagName: 'sd-select-search-input',
+    elementClass: SdSelectSearchInputElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdSearchInput: 'sdSearchInput',
+        onSdSearchFocus: 'sdSearchFocus'
+    },
+    defineCustomElement: defineSdSelectSearchInput
+});
 export const SdTable = /*@__PURE__*/ createComponent({
     tagName: 'sd-table',
     elementClass: SdTableElement,

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

@@ -27,6 +27,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate
 import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
 import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
 import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
+import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
 import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
 import { SdTableBackup as SdTableBackupElement } from "@sellmate/design-system/dist/components/sd-table-backup.js";
 import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -159,6 +160,11 @@ export type SdSelectOptionGroupEvents = {
     }>>;
 };
 export declare const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupElement, SdSelectOptionGroupEvents>;
+export type SdSelectSearchInputEvents = {
+    onSdSearchInput: EventName<CustomEvent<string>>;
+    onSdSearchFocus: EventName<CustomEvent<void>>;
+};
+export declare const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>;
 export type SdTableEvents = {
     onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>;
     onSdPageChange: EventName<CustomEvent<number>>;

package/dist/components/components.server.js

@@ -42,7 +42,7 @@ export const SdCard = /*@__PURE__*/ createComponent({
     tagName: 'sd-card',
     properties: {
         bordered: 'bordered',
-        class: 'class'
+        cardClassName: 'card-class-name'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdCard,
@@ -79,9 +79,10 @@ export const SdDateBox = /*@__PURE__*/ createComponent({
 export const SdDatePicker = /*@__PURE__*/ createComponent({
     tagName: 'sd-date-picker',
     properties: {
-        date: 'date',
+        value: 'value',
         label: 'label',
-        disabled: 'disabled'
+        disabled: 'disabled',
+        placeholder: 'placeholder'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdDatePicker,
@@ -92,7 +93,8 @@ export const SdDateRangePicker = /*@__PURE__*/ createComponent({
     properties: {
         label: 'label',
         maxRange: 'max-range',
-        disabled: 'disabled'
+        disabled: 'disabled',
+        placeholder: 'placeholder'
     },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdDateRangePicker,
@@ -144,6 +146,7 @@ export const SdInput = /*@__PURE__*/ createComponent({
     properties: {
         value: 'value',
         label: 'label',
+        insideLabel: 'inside-label',
         placeholder: 'placeholder',
         disabled: 'disabled',
         clearable: 'clearable',
@@ -160,7 +163,7 @@ export const SdInput = /*@__PURE__*/ createComponent({
 });
 export const SdLoadingSpinner = /*@__PURE__*/ createComponent({
     tagName: 'sd-loading-spinner',
-    properties: {},
+    properties: { color: 'color' },
     hydrateModule: import('@sellmate/design-system/hydrate'),
     clientModule: clientComponents.SdLoadingSpinner,
     serializeShadowRoot,
@@ -247,7 +250,7 @@ export const SdProgress = /*@__PURE__*/ createComponent({
     tagName: 'sd-progress',
     properties: {
         type: 'type',
-        status: 'status',
+        error: 'error',
         percentage: 'percentage',
         size: 'size',
         strokeWidth: 'stroke-width',
@@ -362,6 +365,16 @@ export const SdSelectOptionGroup = /*@__PURE__*/ createComponent({
     clientModule: clientComponents.SdSelectOptionGroup,
     serializeShadowRoot,
 });
+export const SdSelectSearchInput = /*@__PURE__*/ createComponent({
+    tagName: 'sd-select-search-input',
+    properties: {
+        isScrolled: 'is-scrolled',
+        searchText: 'search-text'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdSelectSearchInput,
+    serializeShadowRoot,
+});
 export const SdTable = /*@__PURE__*/ createComponent({
     tagName: 'sd-table',
     properties: {

package/lib/components/components.server.ts

@@ -33,6 +33,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate
 import { SdSelectMultiple as SdSelectMultipleElement } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
 import { SdSelectOptionGroup as SdSelectOptionGroupElement } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
 import { SdSelectOption as SdSelectOptionElement } from "@sellmate/design-system/dist/components/sd-select-option.js";
+import { SdSelectSearchInput as SdSelectSearchInputElement } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
 import { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
 import { SdTableBackup as SdTableBackupElement } from "@sellmate/design-system/dist/components/sd-table-backup.js";
 import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -95,7 +96,7 @@ export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__P
     tagName: 'sd-card',
     properties: {
         bordered: 'bordered',
-        class: 'class'
+        cardClassName: 'card-class-name'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdCard as ReactWebComponent<SdCardElement, SdCardEvents>,
@@ -144,9 +145,10 @@ export type SdDatePickerEvents = { onSdChange: EventName<CustomEvent<string | nu
 export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePickerEvents> = /*@__PURE__*/ createComponent<SdDatePickerElement, SdDatePickerEvents>({
     tagName: 'sd-date-picker',
     properties: {
-        date: 'date',
+        value: 'value',
         label: 'label',
-        disabled: 'disabled'
+        disabled: 'disabled',
+        placeholder: 'placeholder'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdDatePicker as ReactWebComponent<SdDatePickerElement, SdDatePickerEvents>,
@@ -160,7 +162,8 @@ export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement,
     properties: {
         label: 'label',
         maxRange: 'max-range',
-        disabled: 'disabled'
+        disabled: 'disabled',
+        placeholder: 'placeholder'
     },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdDateRangePicker as ReactWebComponent<SdDateRangePickerElement, SdDateRangePickerEvents>,
@@ -230,6 +233,7 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
     properties: {
         value: 'value',
         label: 'label',
+        insideLabel: 'inside-label',
         placeholder: 'placeholder',
         disabled: 'disabled',
         clearable: 'clearable',
@@ -249,7 +253,7 @@ export type SdLoadingSpinnerEvents = NonNullable<unknown>;
 
 export const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents> = /*@__PURE__*/ createComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>({
     tagName: 'sd-loading-spinner',
-    properties: {},
+    properties: { color: 'color' },
     hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
     clientModule: clientComponents.SdLoadingSpinner as ReactWebComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>,
     serializeShadowRoot,
@@ -364,7 +368,7 @@ export const SdProgress: StencilReactComponent<SdProgressElement, SdProgressEven
     tagName: 'sd-progress',
     properties: {
         type: 'type',
-        status: 'status',
+        error: 'error',
         percentage: 'percentage',
         size: 'size',
         strokeWidth: 'stroke-width',
@@ -523,6 +527,22 @@ export const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupEleme
     serializeShadowRoot,
 });
 
+export type SdSelectSearchInputEvents = {
+    onSdSearchInput: EventName<CustomEvent<string>>,
+    onSdSearchFocus: EventName<CustomEvent<void>>
+};
+
+export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents> = /*@__PURE__*/ createComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>({
+    tagName: 'sd-select-search-input',
+    properties: {
+        isScrolled: 'is-scrolled',
+        searchText: 'search-text'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdSelectSearchInput as ReactWebComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>,
+    serializeShadowRoot,
+});
+
 export type SdTableEvents = {
     onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
     onSdPageChange: EventName<CustomEvent<number>>,

package/lib/components/components.ts

@@ -32,6 +32,7 @@ import { SdSelectMultipleGroup as SdSelectMultipleGroupElement, defineCustomElem
 import { SdSelectMultiple as SdSelectMultipleElement, defineCustomElement as defineSdSelectMultiple } from "@sellmate/design-system/dist/components/sd-select-multiple.js";
 import { SdSelectOptionGroup as SdSelectOptionGroupElement, defineCustomElement as defineSdSelectOptionGroup } from "@sellmate/design-system/dist/components/sd-select-option-group.js";
 import { SdSelectOption as SdSelectOptionElement, defineCustomElement as defineSdSelectOption } from "@sellmate/design-system/dist/components/sd-select-option.js";
+import { SdSelectSearchInput as SdSelectSearchInputElement, defineCustomElement as defineSdSelectSearchInput } from "@sellmate/design-system/dist/components/sd-select-search-input.js";
 import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
 import { SdTableBackup as SdTableBackupElement, defineCustomElement as defineSdTableBackup } from "@sellmate/design-system/dist/components/sd-table-backup.js";
 import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from "@sellmate/design-system/dist/components/sd-table.js";
@@ -394,6 +395,23 @@ export const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupEleme
     defineCustomElement: defineSdSelectOptionGroup
 });
 
+export type SdSelectSearchInputEvents = {
+    onSdSearchInput: EventName<CustomEvent<string>>,
+    onSdSearchFocus: EventName<CustomEvent<void>>
+};
+
+export const SdSelectSearchInput: StencilReactComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents> = /*@__PURE__*/ createComponent<SdSelectSearchInputElement, SdSelectSearchInputEvents>({
+    tagName: 'sd-select-search-input',
+    elementClass: SdSelectSearchInputElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdSearchInput: 'sdSearchInput',
+        onSdSearchFocus: 'sdSearchFocus'
+    } as SdSelectSearchInputEvents,
+    defineCustomElement: defineSdSelectSearchInput
+});
+
 export type SdTableEvents = {
     onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
     onSdPageChange: EventName<CustomEvent<number>>,

package/lib/index.ts

@@ -1,11 +1,11 @@
-'use strict';
-
-export * from './components/components.js';
-export { defineCustomElements } from '@sellmate/design-system/loader';
-
-// Export sd-table types for React usage
-export type {
- SdTableSortDir,
- SdTableColumn,
- Row as SdTableRow,
-} from '@sellmate/design-system';
+'use strict';
+
+export * from './components/components.js';
+export { defineCustomElements } from '@sellmate/design-system/loader';
+
+// Export sd-table types for React usage
+export type {
+ SdTableSortDir,
+ SdTableColumn,
+ Row as SdTableRow,
+} from '@sellmate/design-system';

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-react",
- "version": "0.0.60",
+ "version": "0.0.62",
  "description": "Design System - React Component Wrappers",
  "keywords": [
   "react",
@@ -54,7 +54,7 @@
   "dev": "tsc --watch"
  },
  "dependencies": {
-  "@sellmate/design-system": "^0.0.54",
+  "@sellmate/design-system": "^0.0.56",
   "@stencil/react-output-target": "^1.2.0"
  },
  "peerDependencies": {
@@ -67,5 +67,6 @@
   "react-dom": "^19.2.0",
   "rimraf": "^6.0.1",
   "typescript": "^5.9.3"
- }
+ },
+ "gitHead": "bd639f1c664b680b44a40540998c72001781756c"
 }