@naculus/connect-appkit-react 0.1.2

package/src/wc-generated/components.ts

@@ -0,0 +1,377 @@
+'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 AppkitAccordionCustomEvent, type AppkitAlertDialogCustomEvent, type AppkitCheckboxCustomEvent, type AppkitCollapsibleCustomEvent, type AppkitConnectButtonCustomEvent, type AppkitDialogCustomEvent, type AppkitDropdownMenuCustomEvent, type AppkitInputCustomEvent, type AppkitPopoverCustomEvent, type AppkitSelectCustomEvent, type AppkitSwitchCustomEvent, type AppkitTabsCustomEvent, type AppkitToggleGroupCustomEvent } from "@naculus/connect-appkit-wc";
+import type { Components } from "@naculus/connect-appkit-wc/dist/components";
+import { AppkitAccordion as AppkitAccordionElement, defineCustomElement as defineAppkitAccordion } from "@naculus/connect-appkit-wc/dist/components/appkit-accordion.js";
+import { AppkitAccountButton as AppkitAccountButtonElement, defineCustomElement as defineAppkitAccountButton } from "@naculus/connect-appkit-wc/dist/components/appkit-account-button.js";
+import { AppkitAlertDialog as AppkitAlertDialogElement, defineCustomElement as defineAppkitAlertDialog } from "@naculus/connect-appkit-wc/dist/components/appkit-alert-dialog.js";
+import { AppkitAvatar as AppkitAvatarElement, defineCustomElement as defineAppkitAvatar } from "@naculus/connect-appkit-wc/dist/components/appkit-avatar.js";
+import { AppkitBadge as AppkitBadgeElement, defineCustomElement as defineAppkitBadge } from "@naculus/connect-appkit-wc/dist/components/appkit-badge.js";
+import { AppkitButton as AppkitButtonElement, defineCustomElement as defineAppkitButton } from "@naculus/connect-appkit-wc/dist/components/appkit-button.js";
+import { AppkitCardContent as AppkitCardContentElement, defineCustomElement as defineAppkitCardContent } from "@naculus/connect-appkit-wc/dist/components/appkit-card-content.js";
+import { AppkitCardDescription as AppkitCardDescriptionElement, defineCustomElement as defineAppkitCardDescription } from "@naculus/connect-appkit-wc/dist/components/appkit-card-description.js";
+import { AppkitCardFooter as AppkitCardFooterElement, defineCustomElement as defineAppkitCardFooter } from "@naculus/connect-appkit-wc/dist/components/appkit-card-footer.js";
+import { AppkitCardHeader as AppkitCardHeaderElement, defineCustomElement as defineAppkitCardHeader } from "@naculus/connect-appkit-wc/dist/components/appkit-card-header.js";
+import { AppkitCardTitle as AppkitCardTitleElement, defineCustomElement as defineAppkitCardTitle } from "@naculus/connect-appkit-wc/dist/components/appkit-card-title.js";
+import { AppkitCard as AppkitCardElement, defineCustomElement as defineAppkitCard } from "@naculus/connect-appkit-wc/dist/components/appkit-card.js";
+import { AppkitCheckbox as AppkitCheckboxElement, defineCustomElement as defineAppkitCheckbox } from "@naculus/connect-appkit-wc/dist/components/appkit-checkbox.js";
+import { AppkitCollapsible as AppkitCollapsibleElement, defineCustomElement as defineAppkitCollapsible } from "@naculus/connect-appkit-wc/dist/components/appkit-collapsible.js";
+import { AppkitConnectButton as AppkitConnectButtonElement, defineCustomElement as defineAppkitConnectButton } from "@naculus/connect-appkit-wc/dist/components/appkit-connect-button.js";
+import { AppkitDialog as AppkitDialogElement, defineCustomElement as defineAppkitDialog } from "@naculus/connect-appkit-wc/dist/components/appkit-dialog.js";
+import { AppkitDropdownMenu as AppkitDropdownMenuElement, defineCustomElement as defineAppkitDropdownMenu } from "@naculus/connect-appkit-wc/dist/components/appkit-dropdown-menu.js";
+import { AppkitInput as AppkitInputElement, defineCustomElement as defineAppkitInput } from "@naculus/connect-appkit-wc/dist/components/appkit-input.js";
+import { AppkitPopover as AppkitPopoverElement, defineCustomElement as defineAppkitPopover } from "@naculus/connect-appkit-wc/dist/components/appkit-popover.js";
+import { AppkitProgress as AppkitProgressElement, defineCustomElement as defineAppkitProgress } from "@naculus/connect-appkit-wc/dist/components/appkit-progress.js";
+import { AppkitScrollArea as AppkitScrollAreaElement, defineCustomElement as defineAppkitScrollArea } from "@naculus/connect-appkit-wc/dist/components/appkit-scroll-area.js";
+import { AppkitSelect as AppkitSelectElement, defineCustomElement as defineAppkitSelect } from "@naculus/connect-appkit-wc/dist/components/appkit-select.js";
+import { AppkitSeparator as AppkitSeparatorElement, defineCustomElement as defineAppkitSeparator } from "@naculus/connect-appkit-wc/dist/components/appkit-separator.js";
+import { AppkitSkeleton as AppkitSkeletonElement, defineCustomElement as defineAppkitSkeleton } from "@naculus/connect-appkit-wc/dist/components/appkit-skeleton.js";
+import { AppkitSwitch as AppkitSwitchElement, defineCustomElement as defineAppkitSwitch } from "@naculus/connect-appkit-wc/dist/components/appkit-switch.js";
+import { AppkitTabs as AppkitTabsElement, defineCustomElement as defineAppkitTabs } from "@naculus/connect-appkit-wc/dist/components/appkit-tabs.js";
+import { AppkitToggleGroup as AppkitToggleGroupElement, defineCustomElement as defineAppkitToggleGroup } from "@naculus/connect-appkit-wc/dist/components/appkit-toggle-group.js";
+import { AppkitTooltip as AppkitTooltipElement, defineCustomElement as defineAppkitTooltip } from "@naculus/connect-appkit-wc/dist/components/appkit-tooltip.js";
+
+export type AppkitAccordionEvents = { onAppkitToggle: EventName<AppkitAccordionCustomEvent<boolean>> };
+
+export const AppkitAccordion: StencilReactComponent<AppkitAccordionElement, AppkitAccordionEvents, Components.AppkitAccordion> = /*@__PURE__*/ createComponent<AppkitAccordionElement, AppkitAccordionEvents, Components.AppkitAccordion>({
+    tagName: 'appkit-accordion',
+    elementClass: AppkitAccordionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitToggle: 'appkitToggle' } as AppkitAccordionEvents,
+    defineCustomElement: defineAppkitAccordion
+});
+
+export type AppkitAccountButtonEvents = NonNullable<unknown>;
+
+export const AppkitAccountButton: StencilReactComponent<AppkitAccountButtonElement, AppkitAccountButtonEvents, Components.AppkitAccountButton> = /*@__PURE__*/ createComponent<AppkitAccountButtonElement, AppkitAccountButtonEvents, Components.AppkitAccountButton>({
+    tagName: 'appkit-account-button',
+    elementClass: AppkitAccountButtonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitAccountButtonEvents,
+    defineCustomElement: defineAppkitAccountButton
+});
+
+export type AppkitAlertDialogEvents = {
+    onAppkitClose: EventName<AppkitAlertDialogCustomEvent<void>>,
+    onAppkitOpenChange: EventName<AppkitAlertDialogCustomEvent<boolean>>
+};
+
+export const AppkitAlertDialog: StencilReactComponent<AppkitAlertDialogElement, AppkitAlertDialogEvents, Components.AppkitAlertDialog> = /*@__PURE__*/ createComponent<AppkitAlertDialogElement, AppkitAlertDialogEvents, Components.AppkitAlertDialog>({
+    tagName: 'appkit-alert-dialog',
+    elementClass: AppkitAlertDialogElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onAppkitClose: 'appkitClose',
+        onAppkitOpenChange: 'appkitOpenChange'
+    } as AppkitAlertDialogEvents,
+    defineCustomElement: defineAppkitAlertDialog
+});
+
+export type AppkitAvatarEvents = NonNullable<unknown>;
+
+export const AppkitAvatar: StencilReactComponent<AppkitAvatarElement, AppkitAvatarEvents, Components.AppkitAvatar> = /*@__PURE__*/ createComponent<AppkitAvatarElement, AppkitAvatarEvents, Components.AppkitAvatar>({
+    tagName: 'appkit-avatar',
+    elementClass: AppkitAvatarElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitAvatarEvents,
+    defineCustomElement: defineAppkitAvatar
+});
+
+export type AppkitBadgeEvents = NonNullable<unknown>;
+
+export const AppkitBadge: StencilReactComponent<AppkitBadgeElement, AppkitBadgeEvents, Components.AppkitBadge> = /*@__PURE__*/ createComponent<AppkitBadgeElement, AppkitBadgeEvents, Components.AppkitBadge>({
+    tagName: 'appkit-badge',
+    elementClass: AppkitBadgeElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitBadgeEvents,
+    defineCustomElement: defineAppkitBadge
+});
+
+export type AppkitButtonEvents = NonNullable<unknown>;
+
+export const AppkitButton: StencilReactComponent<AppkitButtonElement, AppkitButtonEvents, Components.AppkitButton> = /*@__PURE__*/ createComponent<AppkitButtonElement, AppkitButtonEvents, Components.AppkitButton>({
+    tagName: 'appkit-button',
+    elementClass: AppkitButtonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitButtonEvents,
+    defineCustomElement: defineAppkitButton
+});
+
+export type AppkitCardEvents = NonNullable<unknown>;
+
+export const AppkitCard: StencilReactComponent<AppkitCardElement, AppkitCardEvents, Components.AppkitCard> = /*@__PURE__*/ createComponent<AppkitCardElement, AppkitCardEvents, Components.AppkitCard>({
+    tagName: 'appkit-card',
+    elementClass: AppkitCardElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitCardEvents,
+    defineCustomElement: defineAppkitCard
+});
+
+export type AppkitCardContentEvents = NonNullable<unknown>;
+
+export const AppkitCardContent: StencilReactComponent<AppkitCardContentElement, AppkitCardContentEvents, Components.AppkitCardContent> = /*@__PURE__*/ createComponent<AppkitCardContentElement, AppkitCardContentEvents, Components.AppkitCardContent>({
+    tagName: 'appkit-card-content',
+    elementClass: AppkitCardContentElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitCardContentEvents,
+    defineCustomElement: defineAppkitCardContent
+});
+
+export type AppkitCardDescriptionEvents = NonNullable<unknown>;
+
+export const AppkitCardDescription: StencilReactComponent<AppkitCardDescriptionElement, AppkitCardDescriptionEvents, Components.AppkitCardDescription> = /*@__PURE__*/ createComponent<AppkitCardDescriptionElement, AppkitCardDescriptionEvents, Components.AppkitCardDescription>({
+    tagName: 'appkit-card-description',
+    elementClass: AppkitCardDescriptionElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitCardDescriptionEvents,
+    defineCustomElement: defineAppkitCardDescription
+});
+
+export type AppkitCardFooterEvents = NonNullable<unknown>;
+
+export const AppkitCardFooter: StencilReactComponent<AppkitCardFooterElement, AppkitCardFooterEvents, Components.AppkitCardFooter> = /*@__PURE__*/ createComponent<AppkitCardFooterElement, AppkitCardFooterEvents, Components.AppkitCardFooter>({
+    tagName: 'appkit-card-footer',
+    elementClass: AppkitCardFooterElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitCardFooterEvents,
+    defineCustomElement: defineAppkitCardFooter
+});
+
+export type AppkitCardHeaderEvents = NonNullable<unknown>;
+
+export const AppkitCardHeader: StencilReactComponent<AppkitCardHeaderElement, AppkitCardHeaderEvents, Components.AppkitCardHeader> = /*@__PURE__*/ createComponent<AppkitCardHeaderElement, AppkitCardHeaderEvents, Components.AppkitCardHeader>({
+    tagName: 'appkit-card-header',
+    elementClass: AppkitCardHeaderElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitCardHeaderEvents,
+    defineCustomElement: defineAppkitCardHeader
+});
+
+export type AppkitCardTitleEvents = NonNullable<unknown>;
+
+export const AppkitCardTitle: StencilReactComponent<AppkitCardTitleElement, AppkitCardTitleEvents, Components.AppkitCardTitle> = /*@__PURE__*/ createComponent<AppkitCardTitleElement, AppkitCardTitleEvents, Components.AppkitCardTitle>({
+    tagName: 'appkit-card-title',
+    elementClass: AppkitCardTitleElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitCardTitleEvents,
+    defineCustomElement: defineAppkitCardTitle
+});
+
+export type AppkitCheckboxEvents = { onAppkitChange: EventName<AppkitCheckboxCustomEvent<boolean>> };
+
+export const AppkitCheckbox: StencilReactComponent<AppkitCheckboxElement, AppkitCheckboxEvents, Components.AppkitCheckbox> = /*@__PURE__*/ createComponent<AppkitCheckboxElement, AppkitCheckboxEvents, Components.AppkitCheckbox>({
+    tagName: 'appkit-checkbox',
+    elementClass: AppkitCheckboxElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitChange: 'appkitChange' } as AppkitCheckboxEvents,
+    defineCustomElement: defineAppkitCheckbox
+});
+
+export type AppkitCollapsibleEvents = { onAppkitToggle: EventName<AppkitCollapsibleCustomEvent<boolean>> };
+
+export const AppkitCollapsible: StencilReactComponent<AppkitCollapsibleElement, AppkitCollapsibleEvents, Components.AppkitCollapsible> = /*@__PURE__*/ createComponent<AppkitCollapsibleElement, AppkitCollapsibleEvents, Components.AppkitCollapsible>({
+    tagName: 'appkit-collapsible',
+    elementClass: AppkitCollapsibleElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitToggle: 'appkitToggle' } as AppkitCollapsibleEvents,
+    defineCustomElement: defineAppkitCollapsible
+});
+
+export type AppkitConnectButtonEvents = {
+    onAppkitConnect: EventName<AppkitConnectButtonCustomEvent<{ kind: string; walletId?: string }>>,
+    onAppkitDisconnect: EventName<AppkitConnectButtonCustomEvent<void>>,
+    onAppkitStartPairing: EventName<AppkitConnectButtonCustomEvent<void>>,
+    onAppkitRetry: EventName<AppkitConnectButtonCustomEvent<void>>,
+    onAppkitMobileDeepLink: EventName<AppkitConnectButtonCustomEvent<void>>,
+    onAppkitCopyAddress: EventName<AppkitConnectButtonCustomEvent<string>>
+};
+
+export const AppkitConnectButton: StencilReactComponent<AppkitConnectButtonElement, AppkitConnectButtonEvents, Components.AppkitConnectButton> = /*@__PURE__*/ createComponent<AppkitConnectButtonElement, AppkitConnectButtonEvents, Components.AppkitConnectButton>({
+    tagName: 'appkit-connect-button',
+    elementClass: AppkitConnectButtonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onAppkitConnect: 'appkitConnect',
+        onAppkitDisconnect: 'appkitDisconnect',
+        onAppkitStartPairing: 'appkitStartPairing',
+        onAppkitRetry: 'appkitRetry',
+        onAppkitMobileDeepLink: 'appkitMobileDeepLink',
+        onAppkitCopyAddress: 'appkitCopyAddress'
+    } as AppkitConnectButtonEvents,
+    defineCustomElement: defineAppkitConnectButton
+});
+
+export type AppkitDialogEvents = {
+    onAppkitClose: EventName<AppkitDialogCustomEvent<void>>,
+    onAppkitOpenChange: EventName<AppkitDialogCustomEvent<boolean>>
+};
+
+export const AppkitDialog: StencilReactComponent<AppkitDialogElement, AppkitDialogEvents, Components.AppkitDialog> = /*@__PURE__*/ createComponent<AppkitDialogElement, AppkitDialogEvents, Components.AppkitDialog>({
+    tagName: 'appkit-dialog',
+    elementClass: AppkitDialogElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onAppkitClose: 'appkitClose',
+        onAppkitOpenChange: 'appkitOpenChange'
+    } as AppkitDialogEvents,
+    defineCustomElement: defineAppkitDialog
+});
+
+export type AppkitDropdownMenuEvents = { onAppkitSelect: EventName<AppkitDropdownMenuCustomEvent<string>> };
+
+export const AppkitDropdownMenu: StencilReactComponent<AppkitDropdownMenuElement, AppkitDropdownMenuEvents, Components.AppkitDropdownMenu> = /*@__PURE__*/ createComponent<AppkitDropdownMenuElement, AppkitDropdownMenuEvents, Components.AppkitDropdownMenu>({
+    tagName: 'appkit-dropdown-menu',
+    elementClass: AppkitDropdownMenuElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitSelect: 'appkitSelect' } as AppkitDropdownMenuEvents,
+    defineCustomElement: defineAppkitDropdownMenu
+});
+
+export type AppkitInputEvents = { onAppkitChange: EventName<AppkitInputCustomEvent<string>> };
+
+export const AppkitInput: StencilReactComponent<AppkitInputElement, AppkitInputEvents, Components.AppkitInput> = /*@__PURE__*/ createComponent<AppkitInputElement, AppkitInputEvents, Components.AppkitInput>({
+    tagName: 'appkit-input',
+    elementClass: AppkitInputElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitChange: 'appkitChange' } as AppkitInputEvents,
+    defineCustomElement: defineAppkitInput
+});
+
+export type AppkitPopoverEvents = { onAppkitOpenChange: EventName<AppkitPopoverCustomEvent<boolean>> };
+
+export const AppkitPopover: StencilReactComponent<AppkitPopoverElement, AppkitPopoverEvents, Components.AppkitPopover> = /*@__PURE__*/ createComponent<AppkitPopoverElement, AppkitPopoverEvents, Components.AppkitPopover>({
+    tagName: 'appkit-popover',
+    elementClass: AppkitPopoverElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitOpenChange: 'appkitOpenChange' } as AppkitPopoverEvents,
+    defineCustomElement: defineAppkitPopover
+});
+
+export type AppkitProgressEvents = NonNullable<unknown>;
+
+export const AppkitProgress: StencilReactComponent<AppkitProgressElement, AppkitProgressEvents, Components.AppkitProgress> = /*@__PURE__*/ createComponent<AppkitProgressElement, AppkitProgressEvents, Components.AppkitProgress>({
+    tagName: 'appkit-progress',
+    elementClass: AppkitProgressElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitProgressEvents,
+    defineCustomElement: defineAppkitProgress
+});
+
+export type AppkitScrollAreaEvents = NonNullable<unknown>;
+
+export const AppkitScrollArea: StencilReactComponent<AppkitScrollAreaElement, AppkitScrollAreaEvents, Components.AppkitScrollArea> = /*@__PURE__*/ createComponent<AppkitScrollAreaElement, AppkitScrollAreaEvents, Components.AppkitScrollArea>({
+    tagName: 'appkit-scroll-area',
+    elementClass: AppkitScrollAreaElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitScrollAreaEvents,
+    defineCustomElement: defineAppkitScrollArea
+});
+
+export type AppkitSelectEvents = { onAppkitChange: EventName<AppkitSelectCustomEvent<string>> };
+
+export const AppkitSelect: StencilReactComponent<AppkitSelectElement, AppkitSelectEvents, Components.AppkitSelect> = /*@__PURE__*/ createComponent<AppkitSelectElement, AppkitSelectEvents, Components.AppkitSelect>({
+    tagName: 'appkit-select',
+    elementClass: AppkitSelectElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitChange: 'appkitChange' } as AppkitSelectEvents,
+    defineCustomElement: defineAppkitSelect
+});
+
+export type AppkitSeparatorEvents = NonNullable<unknown>;
+
+export const AppkitSeparator: StencilReactComponent<AppkitSeparatorElement, AppkitSeparatorEvents, Components.AppkitSeparator> = /*@__PURE__*/ createComponent<AppkitSeparatorElement, AppkitSeparatorEvents, Components.AppkitSeparator>({
+    tagName: 'appkit-separator',
+    elementClass: AppkitSeparatorElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitSeparatorEvents,
+    defineCustomElement: defineAppkitSeparator
+});
+
+export type AppkitSkeletonEvents = NonNullable<unknown>;
+
+export const AppkitSkeleton: StencilReactComponent<AppkitSkeletonElement, AppkitSkeletonEvents, Components.AppkitSkeleton> = /*@__PURE__*/ createComponent<AppkitSkeletonElement, AppkitSkeletonEvents, Components.AppkitSkeleton>({
+    tagName: 'appkit-skeleton',
+    elementClass: AppkitSkeletonElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitSkeletonEvents,
+    defineCustomElement: defineAppkitSkeleton
+});
+
+export type AppkitSwitchEvents = { onAppkitChange: EventName<AppkitSwitchCustomEvent<boolean>> };
+
+export const AppkitSwitch: StencilReactComponent<AppkitSwitchElement, AppkitSwitchEvents, Components.AppkitSwitch> = /*@__PURE__*/ createComponent<AppkitSwitchElement, AppkitSwitchEvents, Components.AppkitSwitch>({
+    tagName: 'appkit-switch',
+    elementClass: AppkitSwitchElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitChange: 'appkitChange' } as AppkitSwitchEvents,
+    defineCustomElement: defineAppkitSwitch
+});
+
+export type AppkitTabsEvents = { onAppkitTabChange: EventName<AppkitTabsCustomEvent<string>> };
+
+export const AppkitTabs: StencilReactComponent<AppkitTabsElement, AppkitTabsEvents, Components.AppkitTabs> = /*@__PURE__*/ createComponent<AppkitTabsElement, AppkitTabsEvents, Components.AppkitTabs>({
+    tagName: 'appkit-tabs',
+    elementClass: AppkitTabsElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitTabChange: 'appkitTabChange' } as AppkitTabsEvents,
+    defineCustomElement: defineAppkitTabs
+});
+
+export type AppkitToggleGroupEvents = { onAppkitChange: EventName<AppkitToggleGroupCustomEvent<string[]>> };
+
+export const AppkitToggleGroup: StencilReactComponent<AppkitToggleGroupElement, AppkitToggleGroupEvents, Components.AppkitToggleGroup> = /*@__PURE__*/ createComponent<AppkitToggleGroupElement, AppkitToggleGroupEvents, Components.AppkitToggleGroup>({
+    tagName: 'appkit-toggle-group',
+    elementClass: AppkitToggleGroupElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onAppkitChange: 'appkitChange' } as AppkitToggleGroupEvents,
+    defineCustomElement: defineAppkitToggleGroup
+});
+
+export type AppkitTooltipEvents = NonNullable<unknown>;
+
+export const AppkitTooltip: StencilReactComponent<AppkitTooltipElement, AppkitTooltipEvents, Components.AppkitTooltip> = /*@__PURE__*/ createComponent<AppkitTooltipElement, AppkitTooltipEvents, Components.AppkitTooltip>({
+    tagName: 'appkit-tooltip',
+    elementClass: AppkitTooltipElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as AppkitTooltipEvents,
+    defineCustomElement: defineAppkitTooltip
+});

package/test/setup.ts

@@ -0,0 +1,17 @@
+import "@testing-library/jest-dom";
+
+// Mock localStorage for jsdom
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => { store[key] = value; },
+    removeItem: (key: string) => { delete store[key]; },
+    clear: () => { store = {}; },
+    get length() { return Object.keys(store).length; },
+    key: (index: number) => Object.keys(store)[index] ?? null,
+  };
+})();
+
+Object.defineProperty(window, "localStorage", { value: localStorageMock });
+Object.defineProperty(globalThis, "localStorage", { value: localStorageMock });

package/test/test-utils.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { UniversalWalletSession } from "@naculus/connect-core";
+import type { Web3ContextValue } from "../src/provider/Web3ConnectProvider";
+
+// Default mock session
+export const defaultSession: UniversalWalletSession = {
+  topic: "test-topic",
+  relay: { protocol: "irn" },
+  namespaces: {
+    eip155: {
+      accounts: ["eip155:1:0x1234567890123456789012345678901234567890"],
+      chains: ["eip155:1"],
+      methods: ["eth_sendTransaction", "personal_sign"],
+      events: ["chainChanged", "accountsChanged"],
+    },
+  },
+  expiry: Date.now() + 86400000,
+  acknowledged: true,
+  pairingTopic: "test-pairing",
+};
+
+// Create a default mock context value
+export function createMockContextValue(
+  overrides: Partial<Web3ContextValue> = {}
+): Web3ContextValue {
+  return {
+    status: "disconnected" as const,
+    session: null,
+    accounts: [],
+    chainId: null,
+    error: null,
+    isConnected: false,
+    chains: [
+      {
+        id: 1,
+        namespace: "eip155",
+        name: "Ethereum Mainnet",
+        rpcUrl: "https://rpc.ankr.com/eth",
+        token: "ETH",
+      },
+      {
+        id: 137,
+        namespace: "eip155",
+        name: "Polygon",
+        rpcUrl: "https://rpc.ankr.com/polygon",
+        token: "MATIC",
+      },
+    ],
+    connect: vi.fn().mockResolvedValue(undefined),
+    disconnect: vi.fn().mockResolvedValue(undefined),
+    reconnect: vi.fn().mockResolvedValue(undefined),
+    switchChain: vi.fn().mockResolvedValue(undefined),
+    startPairing: vi.fn().mockResolvedValue("pairing-uri"),
+    completePairing: vi.fn().mockResolvedValue(defaultSession),
+    connectInjected: vi.fn().mockResolvedValue(undefined),
+    ...overrides,
+  };
+}
+
+// Render hook with mocked useWeb3
+export function renderHookWithMockWeb3<Result, Props>(
+  hook: (props: Props) => Result,
+  options?: {
+    initialProps?: Props;
+    contextValue?: Partial<Web3ContextValue>;
+  }
+) {
+  const mockValue = createMockContextValue(options?.contextValue);
+
+  // We mock at import time — caller must vi.mock("../src/provider/Web3ConnectProvider")
+  // This utility just provides the mock values
+
+  return renderHook(hook, {
+    initialProps: options?.initialProps,
+  });
+}

package/tsup.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: {
+    index: "src/index.ts",
+    client: "src/client.ts"
+  },
+  format: ["esm", "cjs"],
+  dts: false,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  minify: true,
+  external: ["react", "viem", "@walletconnect/sign-client", "@noble/hashes", "@noble/curves", /^@naculus\//, "@stencil/react-output-target"],
+  onSuccess: () => {
+    console.log("React SDK built successfully");
+  }
+});