@sellmate/design-system-react 0.0.23 → 0.0.26

package/lib/components/components.server.ts

@@ -1,24 +1,453 @@
-/**
- * This file exports all server-side React components for use with Next.js SSR.
- * These components support hydration with the @stencil/react-output-target SSR functionality.
- */
-
-/* eslint-disable */
-export { SdBadge } from './sd-badge.server.js';
-export { SdButton } from './sd-button.server.js';
-export { SdCheckbox } from './sd-checkbox.server.js';
-export { SdDateBox } from './sd-date-box.server.js';
-export { SdDatePicker } from './sd-date-picker.server.js';
-export { SdDateRangePicker } from './sd-date-range-picker.server.js';
-export { SdGuide } from './sd-guide.server.js';
-export { SdIcon } from './sd-icon.server.js';
-export { SdInput } from './sd-input.server.js';
-export { SdPagination } from './sd-pagination.server.js';
-export { SdPopover } from './sd-popover.server.js';
-export { SdPortal } from './sd-portal.server.js';
-export { SdSelectOption } from './sd-select-option.server.js';
-export { SdSelect } from './sd-select.server.js';
-export { SdTable } from './sd-table.server.js';
-export { SdTag } from './sd-tag.server.js';
-export { SdTooltipPortal } from './sd-tooltip-portal.server.js';
-export { SdTooltip } from './sd-tooltip.server.js';
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+// @ts-ignore - ignore potential type issues as the project is importing itself
+import * as clientComponents from '@sellmate/design-system-react';
+
+import { type CheckedType, type Event, type Row, type SdButtonCustomEvent, type SdCheckboxCustomEvent, type SdInputCustomEvent, type SdSelectCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdTableCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup } from "@sellmate/design-system";
+import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
+import { SdButton as SdButtonElement } from "@sellmate/design-system/dist/components/sd-button.js";
+import { SdCard as SdCardElement } from "@sellmate/design-system/dist/components/sd-card.js";
+import { SdCheckbox as SdCheckboxElement } from "@sellmate/design-system/dist/components/sd-checkbox.js";
+import { SdDateBox as SdDateBoxElement } from "@sellmate/design-system/dist/components/sd-date-box.js";
+import { SdDatePicker as SdDatePickerElement } from "@sellmate/design-system/dist/components/sd-date-picker.js";
+import { SdDateRangePicker as SdDateRangePickerElement } from "@sellmate/design-system/dist/components/sd-date-range-picker.js";
+import { SdGuide as SdGuideElement } from "@sellmate/design-system/dist/components/sd-guide.js";
+import { SdIcon as SdIconElement } from "@sellmate/design-system/dist/components/sd-icon.js";
+import { SdInput as SdInputElement } from "@sellmate/design-system/dist/components/sd-input.js";
+import { SdPagination as SdPaginationElement } from "@sellmate/design-system/dist/components/sd-pagination.js";
+import { SdPopover as SdPopoverElement } from "@sellmate/design-system/dist/components/sd-popover.js";
+import { SdPortal as SdPortalElement } from "@sellmate/design-system/dist/components/sd-portal.js";
+import { SdSelectMultipleGroup as SdSelectMultipleGroupElement } from "@sellmate/design-system/dist/components/sd-select-multiple-group.js";
+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 { SdSelect as SdSelectElement } from "@sellmate/design-system/dist/components/sd-select.js";
+import { SdTable as SdTableElement } from "@sellmate/design-system/dist/components/sd-table.js";
+import { SdTag as SdTagElement } from "@sellmate/design-system/dist/components/sd-tag.js";
+import { SdTooltipPortal as SdTooltipPortalElement } from "@sellmate/design-system/dist/components/sd-tooltip-portal.js";
+import { SdTooltip as SdTooltipElement } from "@sellmate/design-system/dist/components/sd-tooltip.js";
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent, type HydrateModule, type ReactWebComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
+
+export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
+
+export type SdBadgeEvents = NonNullable<unknown>;
+
+export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents> = /*@__PURE__*/ createComponent<SdBadgeElement, SdBadgeEvents>({
+    tagName: 'sd-badge',
+    properties: {
+        size: 'size',
+        color: 'color',
+        label: 'label'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdBadge as ReactWebComponent<SdBadgeElement, SdBadgeEvents>,
+    serializeShadowRoot,
+});
+
+export type SdButtonEvents = { onSdClick: EventName<SdButtonCustomEvent<MouseEvent>> };
+
+export const SdButton: StencilReactComponent<SdButtonElement, SdButtonEvents> = /*@__PURE__*/ createComponent<SdButtonElement, SdButtonEvents>({
+    tagName: 'sd-button',
+    properties: {
+        variant: 'variant',
+        size: 'size',
+        color: 'color',
+        label: 'label',
+        disabled: 'disabled',
+        type: 'type',
+        icon: 'icon',
+        iconColor: 'icon-color',
+        iconSize: 'icon-size',
+        iconRight: 'icon-right',
+        noHover: 'no-hover',
+        class: 'class'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdButton as ReactWebComponent<SdButtonElement, SdButtonEvents>,
+    serializeShadowRoot,
+});
+
+export type SdCardEvents = NonNullable<unknown>;
+
+export const SdCard: StencilReactComponent<SdCardElement, SdCardEvents> = /*@__PURE__*/ createComponent<SdCardElement, SdCardEvents>({
+    tagName: 'sd-card',
+    properties: {
+        bordered: 'bordered',
+        class: 'class'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdCard as ReactWebComponent<SdCardElement, SdCardEvents>,
+    serializeShadowRoot,
+});
+
+export type SdCheckboxEvents = { onSdChange: EventName<SdCheckboxCustomEvent<CheckedType>> };
+
+export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEvents> = /*@__PURE__*/ createComponent<SdCheckboxElement, SdCheckboxEvents>({
+    tagName: 'sd-checkbox',
+    properties: {
+        checked: 'checked',
+        val: 'val',
+        disabled: 'disabled',
+        label: 'label'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdCheckbox as ReactWebComponent<SdCheckboxElement, SdCheckboxEvents>,
+    serializeShadowRoot,
+});
+
+export type SdDateBoxEvents = {
+    onSdClick: EventName<CustomEvent<number | string | null>>,
+    onSdMouseOver: EventName<CustomEvent<number | string | null>>
+};
+
+export const SdDateBox: StencilReactComponent<SdDateBoxElement, SdDateBoxEvents> = /*@__PURE__*/ createComponent<SdDateBoxElement, SdDateBoxEvents>({
+    tagName: 'sd-date-box',
+    properties: {
+        date: 'date',
+        disabled: 'disabled',
+        selected: 'selected',
+        isStartDate: 'is-start-date',
+        isEndDate: 'is-end-date',
+        isToday: 'is-today',
+        inRange: 'in-range',
+        type: 'type'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdDateBox as ReactWebComponent<SdDateBoxElement, SdDateBoxEvents>,
+    serializeShadowRoot,
+});
+
+export type SdDatePickerEvents = { onSdChange: EventName<CustomEvent<string | null>> };
+
+export const SdDatePicker: StencilReactComponent<SdDatePickerElement, SdDatePickerEvents> = /*@__PURE__*/ createComponent<SdDatePickerElement, SdDatePickerEvents>({
+    tagName: 'sd-date-picker',
+    properties: {
+        date: 'date',
+        label: 'label',
+        disabled: 'disabled'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdDatePicker as ReactWebComponent<SdDatePickerElement, SdDatePickerEvents>,
+    serializeShadowRoot,
+});
+
+export type SdDateRangePickerEvents = { onSdChange: EventName<CustomEvent<[string, string]>> };
+
+export const SdDateRangePicker: StencilReactComponent<SdDateRangePickerElement, SdDateRangePickerEvents> = /*@__PURE__*/ createComponent<SdDateRangePickerElement, SdDateRangePickerEvents>({
+    tagName: 'sd-date-range-picker',
+    properties: {
+        label: 'label',
+        maxRange: 'max-range',
+        disabled: 'disabled'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdDateRangePicker as ReactWebComponent<SdDateRangePickerElement, SdDateRangePickerEvents>,
+    serializeShadowRoot,
+});
+
+export type SdGuideEvents = NonNullable<unknown>;
+
+export const SdGuide: StencilReactComponent<SdGuideElement, SdGuideEvents> = /*@__PURE__*/ createComponent<SdGuideElement, SdGuideEvents>({
+    tagName: 'sd-guide',
+    properties: {
+        type: 'type',
+        label: 'label',
+        message: 'message',
+        guideUrl: 'guide-url',
+        popupWidth: 'popup-width'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdGuide as ReactWebComponent<SdGuideElement, SdGuideEvents>,
+    serializeShadowRoot,
+});
+
+export type SdIconEvents = NonNullable<unknown>;
+
+export const SdIcon: StencilReactComponent<SdIconElement, SdIconEvents> = /*@__PURE__*/ createComponent<SdIconElement, SdIconEvents>({
+    tagName: 'sd-icon',
+    properties: {
+        name: 'name',
+        size: 'size',
+        color: 'color',
+        rotate: 'rotate',
+        label: 'label'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdIcon as ReactWebComponent<SdIconElement, SdIconEvents>,
+    serializeShadowRoot,
+});
+
+export type SdInputEvents = {
+    onSdClick: EventName<CustomEvent<string | number | null>>,
+    onSdInput: EventName<CustomEvent<string | number | null>>,
+    onSdChange: EventName<CustomEvent<string | number | null>>,
+    onSdFocus: EventName<SdInputCustomEvent<Event>>,
+    onSdBlur: EventName<SdInputCustomEvent<Event>>
+};
+
+export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@__PURE__*/ createComponent<SdInputElement, SdInputEvents>({
+    tagName: 'sd-input',
+    properties: {
+        value: 'value',
+        label: 'label',
+        placeholder: 'placeholder',
+        disabled: 'disabled',
+        clearable: 'clearable',
+        width: 'width',
+        barcode: 'barcode',
+        autoFocus: 'auto-focus',
+        status: 'status',
+        inputClass: 'input-class',
+        readonly: 'readonly'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdInput as ReactWebComponent<SdInputElement, SdInputEvents>,
+    serializeShadowRoot,
+});
+
+export type SdPaginationEvents = { onPageChange: EventName<CustomEvent<number>> };
+
+export const SdPagination: StencilReactComponent<SdPaginationElement, SdPaginationEvents> = /*@__PURE__*/ createComponent<SdPaginationElement, SdPaginationEvents>({
+    tagName: 'sd-pagination',
+    properties: {
+        currentPage: 'current-page',
+        lastPage: 'last-page',
+        simple: 'simple'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdPagination as ReactWebComponent<SdPaginationElement, SdPaginationEvents>,
+    serializeShadowRoot,
+});
+
+export type SdPopoverEvents = NonNullable<unknown>;
+
+export const SdPopover: StencilReactComponent<SdPopoverElement, SdPopoverEvents> = /*@__PURE__*/ createComponent<SdPopoverElement, SdPopoverEvents>({
+    tagName: 'sd-popover',
+    properties: {
+        show: 'show',
+        placement: 'placement',
+        color: 'color',
+        icon: 'icon',
+        iconSize: 'icon-size',
+        label: 'label',
+        buttonSize: 'button-size',
+        buttonVariant: 'button-variant',
+        menuTitle: 'title',
+        menuClass: 'menu-class',
+        noHover: 'no-hover',
+        useClose: 'use-close'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdPopover as ReactWebComponent<SdPopoverElement, SdPopoverEvents>,
+    serializeShadowRoot,
+});
+
+export type SdPortalEvents = { onSdClose: EventName<CustomEvent<void>> };
+
+export const SdPortal: StencilReactComponent<SdPortalElement, SdPortalEvents> = /*@__PURE__*/ createComponent<SdPortalElement, SdPortalEvents>({
+    tagName: 'sd-portal',
+    properties: {
+        to: 'to',
+        zIndex: 'z-index',
+        open: 'open'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdPortal as ReactWebComponent<SdPortalElement, SdPortalEvents>,
+    serializeShadowRoot,
+});
+
+export type SdSelectEvents = {
+    onSdChange: EventName<SdSelectCustomEvent<SelectEvents['sdChange']>>,
+    onDropDownShow: EventName<SdSelectCustomEvent<SelectEvents['dropDownShow']>>
+};
+
+export const SdSelect: StencilReactComponent<SdSelectElement, SdSelectEvents> = /*@__PURE__*/ createComponent<SdSelectElement, SdSelectEvents>({
+    tagName: 'sd-select',
+    properties: {
+        value: 'value',
+        label: 'label',
+        placeholder: 'placeholder',
+        optionPlaceholder: 'option-placeholder',
+        width: 'width',
+        dropdownHeight: 'dropdown-height',
+        disabled: 'disabled',
+        clearable: 'clearable',
+        searchable: 'searchable'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdSelect as ReactWebComponent<SdSelectElement, SdSelectEvents>,
+    serializeShadowRoot,
+});
+
+export type SdSelectMultipleEvents = {
+    onSdChange: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['sdChange']>>,
+    onDropDownShow: EventName<SdSelectMultipleCustomEvent<SelectMultipleEvents['dropDownShow']>>
+};
+
+export const SdSelectMultiple: StencilReactComponent<SdSelectMultipleElement, SdSelectMultipleEvents> = /*@__PURE__*/ createComponent<SdSelectMultipleElement, SdSelectMultipleEvents>({
+    tagName: 'sd-select-multiple',
+    properties: {
+        label: 'label',
+        placeholder: 'placeholder',
+        optionPlaceholder: 'option-placeholder',
+        width: 'width',
+        dropdownHeight: 'dropdown-height',
+        disabled: 'disabled',
+        clearable: 'clearable',
+        searchable: 'searchable',
+        useCheckbox: 'use-checkbox'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdSelectMultiple as ReactWebComponent<SdSelectMultipleElement, SdSelectMultipleEvents>,
+    serializeShadowRoot,
+});
+
+export type SdSelectMultipleGroupEvents = {
+    onSdChange: EventName<SdSelectMultipleGroupCustomEvent<SelectMultipleEvents['sdChange']>>,
+    onDropDownShow: EventName<SdSelectMultipleGroupCustomEvent<SelectMultipleEvents['dropDownShow']>>
+};
+
+export const SdSelectMultipleGroup: StencilReactComponent<SdSelectMultipleGroupElement, SdSelectMultipleGroupEvents> = /*@__PURE__*/ createComponent<SdSelectMultipleGroupElement, SdSelectMultipleGroupEvents>({
+    tagName: 'sd-select-multiple-group',
+    properties: {
+        label: 'label',
+        placeholder: 'placeholder',
+        optionPlaceholder: 'option-placeholder',
+        width: 'width',
+        dropdownHeight: 'dropdown-height',
+        disabled: 'disabled',
+        clearable: 'clearable',
+        searchable: 'searchable',
+        useCheckbox: 'use-checkbox'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdSelectMultipleGroup as ReactWebComponent<SdSelectMultipleGroupElement, SdSelectMultipleGroupEvents>,
+    serializeShadowRoot,
+});
+
+export type SdSelectOptionEvents = {
+    onOptionClick: EventName<SdSelectOptionCustomEvent<{
+        option: SelectOption;
+        index: number;
+        event: MouseEvent;
+    }>>
+};
+
+export const SdSelectOption: StencilReactComponent<SdSelectOptionElement, SdSelectOptionEvents> = /*@__PURE__*/ createComponent<SdSelectOptionElement, SdSelectOptionEvents>({
+    tagName: 'sd-select-option',
+    properties: {
+        index: 'index',
+        isSelected: 'is-selected',
+        isFocused: 'is-focused',
+        disabled: 'disabled',
+        useCheckbox: 'use-checkbox'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdSelectOption as ReactWebComponent<SdSelectOptionElement, SdSelectOptionEvents>,
+    serializeShadowRoot,
+});
+
+export type SdSelectOptionGroupEvents = {
+    onOptionClick: EventName<SdSelectOptionGroupCustomEvent<{
+        option: SelectOptionGroup;
+        isSelected: boolean | null;
+        index: number;
+        event: MouseEvent;
+    }>>
+};
+
+export const SdSelectOptionGroup: StencilReactComponent<SdSelectOptionGroupElement, SdSelectOptionGroupEvents> = /*@__PURE__*/ createComponent<SdSelectOptionGroupElement, SdSelectOptionGroupEvents>({
+    tagName: 'sd-select-option-group',
+    properties: {
+        index: 'index',
+        isSelected: 'is-selected',
+        isFocused: 'is-focused',
+        disabled: 'disabled',
+        useCheckbox: 'use-checkbox',
+        useIndicator: 'use-indicator'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdSelectOptionGroup as ReactWebComponent<SdSelectOptionGroupElement, SdSelectOptionGroupEvents>,
+    serializeShadowRoot,
+});
+
+export type SdTableEvents = {
+    onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
+    onSdPageChange: EventName<CustomEvent<number>>
+};
+
+export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
+    tagName: 'sd-table',
+    properties: {
+        rowKey: 'row-key',
+        selectable: 'selectable',
+        resizable: 'resizable',
+        width: 'width',
+        height: 'height',
+        stickyHeader: 'sticky-header',
+        noDataLabel: 'no-data-label'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdTable as ReactWebComponent<SdTableElement, SdTableEvents>,
+    serializeShadowRoot,
+});
+
+export type SdTagEvents = NonNullable<unknown>;
+
+export const SdTag: StencilReactComponent<SdTagElement, SdTagEvents> = /*@__PURE__*/ createComponent<SdTagElement, SdTagEvents>({
+    tagName: 'sd-tag',
+    properties: {
+        size: 'size',
+        color: 'color',
+        rounded: 'rounded',
+        label: 'label',
+        bgColor: 'bg-color',
+        textColor: 'text-color'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdTag as ReactWebComponent<SdTagElement, SdTagEvents>,
+    serializeShadowRoot,
+});
+
+export type SdTooltipEvents = NonNullable<unknown>;
+
+export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents> = /*@__PURE__*/ createComponent<SdTooltipElement, SdTooltipEvents>({
+    tagName: 'sd-tooltip',
+    properties: {
+        trigger: 'trigger',
+        placement: 'placement',
+        color: 'color',
+        type: 'type',
+        icon: 'icon',
+        iconSize: 'icon-size',
+        label: 'label',
+        buttonSize: 'button-size',
+        buttonVariant: 'button-variant',
+        noHover: 'no-hover',
+        useClose: 'use-close'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdTooltip as ReactWebComponent<SdTooltipElement, SdTooltipEvents>,
+    serializeShadowRoot,
+});
+
+export type SdTooltipPortalEvents = { onSdClose: EventName<CustomEvent<void>> };
+
+export const SdTooltipPortal: StencilReactComponent<SdTooltipPortalElement, SdTooltipPortalEvents> = /*@__PURE__*/ createComponent<SdTooltipPortalElement, SdTooltipPortalEvents>({
+    tagName: 'sd-tooltip-portal',
+    properties: {
+        to: 'to',
+        zIndex: 'z-index',
+        placement: 'placement',
+        open: 'open'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdTooltipPortal as ReactWebComponent<SdTooltipPortalElement, SdTooltipPortalEvents>,
+    serializeShadowRoot,
+});