@ds-mo/ui 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -23,20 +23,35 @@
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/components/index.d.ts",
+  "types": "./src/wc/components.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/components/index.js",
-      "types": "./dist/components/index.d.ts"
+      "types": "./src/wc/components.d.ts",
+      "import": "./dist/components/index.js"
     },
     "./angular": {
+      "types": "./src/angular/index.ts",
       "import": "./src/angular/index.ts"
     },
+    "./react": {
+      "types": "./src/react/components.ts",
+      "import": "./src/react/components.ts"
+    },
+    "./dist/components": {
+      "types": "./src/wc/components.d.ts",
+      "import": "./dist/components/index.js"
+    },
     "./dist/components/*": "./dist/components/*"
   },
   "files": [
     "dist",
-    "src/angular"
+    "src/wc/components.d.ts",
+    "src/wc/components/**/*.ts",
+    "src/wc/components/**/*.tsx",
+    "!src/wc/components/**/*.stories.ts",
+    "!src/wc/components/**/*.stories.tsx",
+    "src/angular",
+    "src/react"
   ],
   "scripts": {
     "prebuild": "node scripts/generate-icon-catalog.mjs",
@@ -58,24 +73,39 @@
   },
   "peerDependencies": {
     "@ds-mo/icons": "^6.0.0",
-    "@ds-mo/tokens": ">=2.9.0"
+    "@ds-mo/tokens": ">=2.9.0",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@ds-mo/icons": "^6.0.0",
-    "@ds-mo/tokens": "^2.9.0",
+    "@ds-mo/tokens": "^2.9.1",
     "@eslint/js": "^10.0.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@playwright/test": "^1.55.0",
     "@stencil/angular-output-target": "^1.3.1",
     "@stencil/core": "^4.43.4",
+    "@stencil/react-output-target": "^1.5.3",
     "@storybook/addon-docs": "^10.4.2",
     "@storybook/web-components": "^10.4.2",
     "@storybook/web-components-vite": "^10.4.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "concurrently": "^10.0.3",
     "eslint": "^10.4.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "globals": "^17.6.0",
     "lit": "^3.3.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "storybook": "^10.4.2",
     "tsx": "^4.20.3",
     "typescript": "~5.8.3",

package/src/angular/index.ts

@@ -33,6 +33,7 @@ export const DIRECTIVES = [
   d.DsSlider,
   d.DsSurface,
   d.DsTabGroup,
+  d.DsTabGroupNav,
   d.DsTable,
   d.DsTag,
   d.DsText,

package/src/angular/proxies.ts

@@ -862,6 +862,34 @@ export declare interface DsTabGroup extends Components.DsTabGroup {
 }
 
 
+@ProxyCmp({
+  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value']
+})
+@Component({
+  selector: 'ds-tab-group-nav',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value'],
+  outputs: ['dsChange'],
+  standalone: false
+})
+export class DsTabGroupNav {
+  protected el: HTMLDsTabGroupNavElement;
+  @Output() dsChange = new EventEmitter<CustomEvent<string>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsTabGroupNav extends Components.DsTabGroupNav {
+
+  dsChange: EventEmitter<CustomEvent<string>>;
+}
+
+
 @ProxyCmp({
   inputs: ['columns', 'data', 'emptyMessage', 'loading', 'pageIndex', 'pageSize', 'selectedRows', 'sortState']
 })

package/src/react/components.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 */
+export { DsAccordion } from "./ds-accordion.js";
+export { DsBadge } from "./ds-badge.js";
+export { DsBanner } from "./ds-banner.js";
+export { DsBarNavAction } from "./ds-bar-nav-action.js";
+export { DsBarNav } from "./ds-bar-nav.js";
+export { DsBreadcrumb } from "./ds-breadcrumb.js";
+export { DsButtonGroup } from "./ds-button-group.js";
+export { DsButton } from "./ds-button.js";
+export { DsCard } from "./ds-card.js";
+export { DsCheckbox } from "./ds-checkbox.js";
+export { DsDivider } from "./ds-divider.js";
+export { DsEmptyState } from "./ds-empty-state.js";
+export { DsFade } from "./ds-fade.js";
+export { DsField } from "./ds-field.js";
+export { DsHeader } from "./ds-header.js";
+export { DsIcon } from "./ds-icon.js";
+export { DsInput } from "./ds-input.js";
+export { DsLabelWrap } from "./ds-label-wrap.js";
+export { DsLoader } from "./ds-loader.js";
+export { DsMenu } from "./ds-menu.js";
+export { DsModal } from "./ds-modal.js";
+export { DsPagination } from "./ds-pagination.js";
+export { DsPanelNav } from "./ds-panel-nav.js";
+export { DsRadioGroup } from "./ds-radio-group.js";
+export { DsScrollbar } from "./ds-scrollbar.js";
+export { DsSelect } from "./ds-select.js";
+export { DsSidebar } from "./ds-sidebar.js";
+export { DsSkeleton } from "./ds-skeleton.js";
+export { DsSlider } from "./ds-slider.js";
+export { DsSurface } from "./ds-surface.js";
+export { DsTabGroupNav } from "./ds-tab-group-nav.js";
+export { DsTabGroup } from "./ds-tab-group.js";
+export { DsTable } from "./ds-table.js";
+export { DsTag } from "./ds-tag.js";
+export { DsText } from "./ds-text.js";
+export { DsToastProvider } from "./ds-toast-provider.js";
+export { DsToggleButtonGroup } from "./ds-toggle-button-group.js";
+export { DsToggleButton } from "./ds-toggle-button.js";
+export { DsToggle } from "./ds-toggle.js";
+export { DsTooltip } from "./ds-tooltip.js";

package/src/react/ds-accordion.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsAccordionCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsAccordion as DsAccordionElement, defineCustomElement as defineDsAccordion } from "@ds-mo/ui/dist/components/ds-accordion.js";
+
+export type DsAccordionEvents = { onDsExpandedChange: EventName<DsAccordionCustomEvent<string[]>> };
+
+export const DsAccordion: StencilReactComponent<DsAccordionElement, DsAccordionEvents, Components.DsAccordion> = /*@__PURE__*/ createComponent<DsAccordionElement, DsAccordionEvents, Components.DsAccordion>({
+    tagName: 'ds-accordion',
+    elementClass: DsAccordionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsExpandedChange: 'dsExpandedChange' } as DsAccordionEvents,
+    defineCustomElement: defineDsAccordion
+});

package/src/react/ds-badge.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBadge as DsBadgeElement, defineCustomElement as defineDsBadge } from "@ds-mo/ui/dist/components/ds-badge.js";
+
+export type DsBadgeEvents = NonNullable<unknown>;
+
+export const DsBadge: StencilReactComponent<DsBadgeElement, DsBadgeEvents, Components.DsBadge> = /*@__PURE__*/ createComponent<DsBadgeElement, DsBadgeEvents, Components.DsBadge>({
+    tagName: 'ds-badge',
+    elementClass: DsBadgeElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsBadgeEvents,
+    defineCustomElement: defineDsBadge
+});

package/src/react/ds-banner.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsBannerCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBanner as DsBannerElement, defineCustomElement as defineDsBanner } from "@ds-mo/ui/dist/components/ds-banner.js";
+
+export type DsBannerEvents = { onDsDismiss: EventName<DsBannerCustomEvent<void>> };
+
+export const DsBanner: StencilReactComponent<DsBannerElement, DsBannerEvents, Components.DsBanner> = /*@__PURE__*/ createComponent<DsBannerElement, DsBannerEvents, Components.DsBanner>({
+    tagName: 'ds-banner',
+    elementClass: DsBannerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsDismiss: 'dsDismiss' } as DsBannerEvents,
+    defineCustomElement: defineDsBanner
+});

package/src/react/ds-bar-nav-action.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsBarNavActionCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBarNavAction as DsBarNavActionElement, defineCustomElement as defineDsBarNavAction } from "@ds-mo/ui/dist/components/ds-bar-nav-action.js";
+
+export type DsBarNavActionEvents = { onDsChange: EventName<DsBarNavActionCustomEvent<boolean>> };
+
+export const DsBarNavAction: StencilReactComponent<DsBarNavActionElement, DsBarNavActionEvents, Components.DsBarNavAction> = /*@__PURE__*/ createComponent<DsBarNavActionElement, DsBarNavActionEvents, Components.DsBarNavAction>({
+    tagName: 'ds-bar-nav-action',
+    elementClass: DsBarNavActionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsBarNavActionEvents,
+    defineCustomElement: defineDsBarNavAction
+});

package/src/react/ds-bar-nav.ts

@@ -0,0 +1,33 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsBarNavCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBarNav as DsBarNavElement, defineCustomElement as defineDsBarNav } from "@ds-mo/ui/dist/components/ds-bar-nav.js";
+
+export type DsBarNavEvents = {
+    onDsTabChange: EventName<DsBarNavCustomEvent<string>>,
+    onDsActionChange: EventName<DsBarNavCustomEvent<{ id: string; selected: boolean }>>
+};
+
+export const DsBarNav: StencilReactComponent<DsBarNavElement, DsBarNavEvents, Components.DsBarNav> = /*@__PURE__*/ createComponent<DsBarNavElement, DsBarNavEvents, Components.DsBarNav>({
+    tagName: 'ds-bar-nav',
+    elementClass: DsBarNavElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsTabChange: 'dsTabChange',
+        onDsActionChange: 'dsActionChange'
+    } as DsBarNavEvents,
+    defineCustomElement: defineDsBarNav
+});

package/src/react/ds-breadcrumb.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type BreadcrumbItem, type DsBreadcrumbCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBreadcrumb as DsBreadcrumbElement, defineCustomElement as defineDsBreadcrumb } from "@ds-mo/ui/dist/components/ds-breadcrumb.js";
+
+export type DsBreadcrumbEvents = { onDsNavigate: EventName<DsBreadcrumbCustomEvent<{ item: BreadcrumbItem; index: number }>> };
+
+export const DsBreadcrumb: StencilReactComponent<DsBreadcrumbElement, DsBreadcrumbEvents, Components.DsBreadcrumb> = /*@__PURE__*/ createComponent<DsBreadcrumbElement, DsBreadcrumbEvents, Components.DsBreadcrumb>({
+    tagName: 'ds-breadcrumb',
+    elementClass: DsBreadcrumbElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsNavigate: 'dsNavigate' } as DsBreadcrumbEvents,
+    defineCustomElement: defineDsBreadcrumb
+});

package/src/react/ds-button-group.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsButtonGroupCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsButtonGroup as DsButtonGroupElement, defineCustomElement as defineDsButtonGroup } from "@ds-mo/ui/dist/components/ds-button-group.js";
+
+export type DsButtonGroupEvents = { onDsClick: EventName<DsButtonGroupCustomEvent<number>> };
+
+export const DsButtonGroup: StencilReactComponent<DsButtonGroupElement, DsButtonGroupEvents, Components.DsButtonGroup> = /*@__PURE__*/ createComponent<DsButtonGroupElement, DsButtonGroupEvents, Components.DsButtonGroup>({
+    tagName: 'ds-button-group',
+    elementClass: DsButtonGroupElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsClick: 'dsClick' } as DsButtonGroupEvents,
+    defineCustomElement: defineDsButtonGroup
+});

package/src/react/ds-button.ts

@@ -0,0 +1,35 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsButtonCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsButton as DsButtonElement, defineCustomElement as defineDsButton } from "@ds-mo/ui/dist/components/ds-button.js";
+
+export type DsButtonEvents = {
+    onDsClick: EventName<DsButtonCustomEvent<MouseEvent>>,
+    onDsMouseEnter: EventName<DsButtonCustomEvent<MouseEvent>>,
+    onDsMouseLeave: EventName<DsButtonCustomEvent<MouseEvent>>
+};
+
+export const DsButton: StencilReactComponent<DsButtonElement, DsButtonEvents, Components.DsButton> = /*@__PURE__*/ createComponent<DsButtonElement, DsButtonEvents, Components.DsButton>({
+    tagName: 'ds-button',
+    elementClass: DsButtonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsClick: 'dsClick',
+        onDsMouseEnter: 'dsMouseEnter',
+        onDsMouseLeave: 'dsMouseLeave'
+    } as DsButtonEvents,
+    defineCustomElement: defineDsButton
+});

package/src/react/ds-card.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCard as DsCardElement, defineCustomElement as defineDsCard } from "@ds-mo/ui/dist/components/ds-card.js";
+
+export type DsCardEvents = NonNullable<unknown>;
+
+export const DsCard: StencilReactComponent<DsCardElement, DsCardEvents, Components.DsCard> = /*@__PURE__*/ createComponent<DsCardElement, DsCardEvents, Components.DsCard>({
+    tagName: 'ds-card',
+    elementClass: DsCardElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsCardEvents,
+    defineCustomElement: defineDsCard
+});

package/src/react/ds-checkbox.ts

@@ -0,0 +1,27 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import { type DsCheckboxCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCheckbox as DsCheckboxElement, defineCustomElement as defineDsCheckbox } from "@ds-mo/ui/dist/components/ds-checkbox.js";
+
+export type DsCheckboxEvents = { onDsChange: EventName<DsCheckboxCustomEvent<boolean>> };
+
+export const DsCheckbox: StencilReactComponent<DsCheckboxElement, DsCheckboxEvents, Components.DsCheckbox> = /*@__PURE__*/ createComponent<DsCheckboxElement, DsCheckboxEvents, Components.DsCheckbox>({
+    tagName: 'ds-checkbox',
+    elementClass: DsCheckboxElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsCheckboxEvents,
+    defineCustomElement: defineDsCheckbox
+});

package/src/react/ds-divider.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsDivider as DsDividerElement, defineCustomElement as defineDsDivider } from "@ds-mo/ui/dist/components/ds-divider.js";
+
+export type DsDividerEvents = NonNullable<unknown>;
+
+export const DsDivider: StencilReactComponent<DsDividerElement, DsDividerEvents, Components.DsDivider> = /*@__PURE__*/ createComponent<DsDividerElement, DsDividerEvents, Components.DsDivider>({
+    tagName: 'ds-divider',
+    elementClass: DsDividerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsDividerEvents,
+    defineCustomElement: defineDsDivider
+});

package/src/react/ds-empty-state.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsEmptyState as DsEmptyStateElement, defineCustomElement as defineDsEmptyState } from "@ds-mo/ui/dist/components/ds-empty-state.js";
+
+export type DsEmptyStateEvents = NonNullable<unknown>;
+
+export const DsEmptyState: StencilReactComponent<DsEmptyStateElement, DsEmptyStateEvents, Components.DsEmptyState> = /*@__PURE__*/ createComponent<DsEmptyStateElement, DsEmptyStateEvents, Components.DsEmptyState>({
+    tagName: 'ds-empty-state',
+    elementClass: DsEmptyStateElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsEmptyStateEvents,
+    defineCustomElement: defineDsEmptyState
+});

package/src/react/ds-fade.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsFade as DsFadeElement, defineCustomElement as defineDsFade } from "@ds-mo/ui/dist/components/ds-fade.js";
+
+export type DsFadeEvents = NonNullable<unknown>;
+
+export const DsFade: StencilReactComponent<DsFadeElement, DsFadeEvents, Components.DsFade> = /*@__PURE__*/ createComponent<DsFadeElement, DsFadeEvents, Components.DsFade>({
+    tagName: 'ds-fade',
+    elementClass: DsFadeElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsFadeEvents,
+    defineCustomElement: defineDsFade
+});

package/src/react/ds-field.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsField as DsFieldElement, defineCustomElement as defineDsField } from "@ds-mo/ui/dist/components/ds-field.js";
+
+export type DsFieldEvents = NonNullable<unknown>;
+
+export const DsField: StencilReactComponent<DsFieldElement, DsFieldEvents, Components.DsField> = /*@__PURE__*/ createComponent<DsFieldElement, DsFieldEvents, Components.DsField>({
+    tagName: 'ds-field',
+    elementClass: DsFieldElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsFieldEvents,
+    defineCustomElement: defineDsField
+});

package/src/react/ds-header.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsHeader as DsHeaderElement, defineCustomElement as defineDsHeader } from "@ds-mo/ui/dist/components/ds-header.js";
+
+export type DsHeaderEvents = NonNullable<unknown>;
+
+export const DsHeader: StencilReactComponent<DsHeaderElement, DsHeaderEvents, Components.DsHeader> = /*@__PURE__*/ createComponent<DsHeaderElement, DsHeaderEvents, Components.DsHeader>({
+    tagName: 'ds-header',
+    elementClass: DsHeaderElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsHeaderEvents,
+    defineCustomElement: defineDsHeader
+});

package/src/react/ds-icon.ts

@@ -0,0 +1,26 @@
+'use client';
+
+/**
+ * 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 */
+
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsIcon as DsIconElement, defineCustomElement as defineDsIcon } from "@ds-mo/ui/dist/components/ds-icon.js";
+
+export type DsIconEvents = NonNullable<unknown>;
+
+export const DsIcon: StencilReactComponent<DsIconElement, DsIconEvents, Components.DsIcon> = /*@__PURE__*/ createComponent<DsIconElement, DsIconEvents, Components.DsIcon>({
+    tagName: 'ds-icon',
+    elementClass: DsIconElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsIconEvents,
+    defineCustomElement: defineDsIcon
+});