@ds-mo/ui 1.0.1 → 1.1.0

package/dist/types/components.d.ts

@@ -31,6 +31,7 @@ import { SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 import { TabItem } from "./components/TabGroup/tab-item-utils";
 import { TabBackground } from "./components/TabGroup/TabGroup";
+import { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 import { SortState, TableColumn } from "./components/Table/Table";
 import { TagBackground, TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
 import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextVariant, TextWrap } from "./components/Text/Text";
@@ -64,6 +65,7 @@ export { SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 export { TabItem } from "./components/TabGroup/tab-item-utils";
 export { TabBackground } from "./components/TabGroup/TabGroup";
+export { TabGroupNavBackground } from "./components/TabGroupNav/TabGroupNav";
 export { SortState, TableColumn } from "./components/Table/Table";
 export { TagBackground, TagContrast, TagElevation, TagIntent, TagSize } from "./components/Tag/Tag";
 export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextVariant, TextWrap } from "./components/Text/Text";
@@ -748,6 +750,23 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DsTabGroupNav {
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "background": TabGroupNavBackground | undefined;
+        /**
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+          * @default []
+         */
+        "tabs": TabItem[];
+        /**
+          * @default ''
+         */
+        "value": string;
+    }
     interface DsTable {
         /**
           * @default []
@@ -1038,6 +1057,10 @@ export interface DsTabGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTabGroupElement;
 }
+export interface DsTabGroupNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTabGroupNavElement;
+}
 export interface DsTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTableElement;
@@ -1457,6 +1480,23 @@ declare global {
         prototype: HTMLDsTabGroupElement;
         new (): HTMLDsTabGroupElement;
     };
+    interface HTMLDsTabGroupNavElementEventMap {
+        "dsChange": string;
+    }
+    interface HTMLDsTabGroupNavElement extends Components.DsTabGroupNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsTabGroupNavElement: {
+        prototype: HTMLDsTabGroupNavElement;
+        new (): HTMLDsTabGroupNavElement;
+    };
     interface HTMLDsTableElementEventMap {
         "dsSort": { columnId: string };
         "dsRowClick": { row: unknown; rowIndex: number };
@@ -1596,6 +1636,7 @@ declare global {
         "ds-slider": HTMLDsSliderElement;
         "ds-surface": HTMLDsSurfaceElement;
         "ds-tab-group": HTMLDsTabGroupElement;
+        "ds-tab-group-nav": HTMLDsTabGroupNavElement;
         "ds-table": HTMLDsTableElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
@@ -2338,6 +2379,24 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DsTabGroupNav {
+        "ariaLabel"?: string | undefined;
+        "ariaLabelledby"?: string | undefined;
+        "background"?: TabGroupNavBackground | undefined;
+        "onDsChange"?: (event: DsTabGroupNavCustomEvent<string>) => void;
+        /**
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * @default []
+         */
+        "tabs"?: TabItem[];
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
     interface DsTable {
         /**
           * @default []
@@ -2797,6 +2856,13 @@ declare namespace LocalJSX {
         "ariaLabelledby": string | undefined;
         "orientation": 'horizontal' | 'vertical';
     }
+    interface DsTabGroupNavAttributes {
+        "value": string;
+        "background": TabGroupNavBackground | undefined;
+        "ariaLabel": string | undefined;
+        "ariaLabelledby": string | undefined;
+        "orientation": 'horizontal' | 'vertical';
+    }
     interface DsTableAttributes {
         "loading": boolean;
         "emptyMessage": string;
@@ -2897,6 +2963,7 @@ declare namespace LocalJSX {
         "ds-slider": Omit<DsSlider, keyof DsSliderAttributes> & { [K in keyof DsSlider & keyof DsSliderAttributes]?: DsSlider[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `attr:${K}`]?: DsSliderAttributes[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `prop:${K}`]?: DsSlider[K] } & OneOf<"label", DsSlider["label"], DsSliderAttributes["label"]>;
         "ds-surface": Omit<DsSurface, keyof DsSurfaceAttributes> & { [K in keyof DsSurface & keyof DsSurfaceAttributes]?: DsSurface[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `attr:${K}`]?: DsSurfaceAttributes[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `prop:${K}`]?: DsSurface[K] };
         "ds-tab-group": Omit<DsTabGroup, keyof DsTabGroupAttributes> & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes]?: DsTabGroup[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `attr:${K}`]?: DsTabGroupAttributes[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `prop:${K}`]?: DsTabGroup[K] };
+        "ds-tab-group-nav": Omit<DsTabGroupNav, keyof DsTabGroupNavAttributes> & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes]?: DsTabGroupNav[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `attr:${K}`]?: DsTabGroupNavAttributes[K] } & { [K in keyof DsTabGroupNav & keyof DsTabGroupNavAttributes as `prop:${K}`]?: DsTabGroupNav[K] };
         "ds-table": Omit<DsTable, keyof DsTableAttributes> & { [K in keyof DsTable & keyof DsTableAttributes]?: DsTable[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `attr:${K}`]?: DsTableAttributes[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `prop:${K}`]?: DsTable[K] };
         "ds-tag": Omit<DsTag, keyof DsTagAttributes> & { [K in keyof DsTag & keyof DsTagAttributes]?: DsTag[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `attr:${K}`]?: DsTagAttributes[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `prop:${K}`]?: DsTag[K] } & OneOf<"label", DsTag["label"], DsTagAttributes["label"]>;
         "ds-text": Omit<DsText, keyof DsTextAttributes> & { [K in keyof DsText & keyof DsTextAttributes]?: DsText[K] } & { [K in keyof DsText & keyof DsTextAttributes as `attr:${K}`]?: DsTextAttributes[K] } & { [K in keyof DsText & keyof DsTextAttributes as `prop:${K}`]?: DsText[K] };
@@ -2947,6 +3014,7 @@ declare module "@stencil/core" {
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
             "ds-surface": LocalJSX.IntrinsicElements["ds-surface"] & JSXBase.HTMLAttributes<HTMLDsSurfaceElement>;
             "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
+            "ds-tab-group-nav": LocalJSX.IntrinsicElements["ds-tab-group-nav"] & JSXBase.HTMLAttributes<HTMLDsTabGroupNavElement>;
             "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
             "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.0.1",
+  "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",
@@ -57,25 +72,40 @@
     "mcp": "node scripts/mcp-server.mjs"
   },
   "peerDependencies": {
-    "@ds-mo/icons": "^5.0.1",
-    "@ds-mo/tokens": ">=2.9.0"
+    "@ds-mo/icons": "^6.0.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": "^5.0.1",
-    "@ds-mo/tokens": "^2.9.0",
+    "@ds-mo/icons": "^6.0.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
+});