@m3e/react 2.0.2 → 2.0.3

package/README.md

@@ -2,6 +2,10 @@
 
 The `@m3e/react` package provides idiomatic, typed React bindings for M3E Web Components, exposing their properties, attributes, and native DOM events through a familiar React interface with full ref forwarding and client‑only compatibility.
 
+The React bindings are client-only and must be used inside a `"use client"` boundary in your application.
+
+To support Next.js and SSR, `@m3e/web` works with Lit's server-ready modules, and consumers only need to wrap their `next.config.js` with `withLitSSR` from `@lit-labs/nextjs`. This lets Next.js load the correct server build instead of evaluating browser code during rendering, so all `@m3e/web` elements render on the server and hydrate on the client without any extra setup.
+
 ## 🧪 Example
 
 The following example demonstrates how to use the `M3eButton` React binding from `@m3e/react/button`.

package/dist/all.js

@@ -1,4 +1,3 @@
-"use client";
 /**
  * @license MIT
  * Copyright (c) 2025 matraic
@@ -6,7 +5,7 @@
  */
 
 import React from 'react';
-import { createComponent as createComponent$1 } from '@lit/react';
+import { createComponent } from '@lit/react';
 import { M3eAppBarElement } from '@m3e/web/app-bar';
 import { M3eAutocompleteElement } from '@m3e/web/autocomplete';
 import { M3eAvatarElement } from '@m3e/web/avatar';
@@ -54,37 +53,6 @@ import { M3eTocElement } from '@m3e/web/toc';
 import { M3eToolbarElement } from '@m3e/web/toolbar';
 import { M3eRichTooltipElement, M3eRichTooltipActionElement, M3eTooltipElement } from '@m3e/web/tooltip';
 
-/**
- * Creates an SSR-safe React component for a custom element. Properties are distinguished
- * from attributes automatically, and events can be configured so they are added
- * to the custom element as event listeners.
- *
- * @param options An options bag containing the parameters needed to generate a
- * wrapped web component.
- *
- * @param options.react The React module, typically imported from the `react`
- * npm package.
- * @param options.tagName The custom element tag name registered via
- * `customElements.define`.
- * @param options.elementClass The custom element class registered via
- * `customElements.define`.
- * @param options.events An object listing events to which the component can
- * listen. The object keys are the event property names passed in via React
- * props and the object values are the names of the corresponding events
- * generated by the custom element. For example, given `{onactivate:
- * 'activate'}` an event function may be passed via the component's `onactivate`
- * prop and will be called when the custom element fires its `activate` event.
- * @param options.displayName A React component display name, used in debugging
- * messages. Default value is inferred from the name of custom element class
- * registered via `customElements.define`.
- */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-function createComponent({ react, tagName, elementClass, events, displayName, }) {
-    return typeof window !== "undefined"
-        ? createComponent$1({ react, tagName, elementClass, events, displayName })
-        : null;
-}
-
 /**
  * React binding for the `m3e-app-bar` Web Component from `@m3e/web/app-bar`.
  *
@@ -95,7 +63,7 @@ function createComponent({ react, tagName, elementClass, events, displayName, })
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-app-bar>` instance for imperative access.
  *
- * See the `m3e-app-bar` documentation in `@m3e/app-bar` for full details on behavior,
+ * See the `m3e-app-bar` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eAppBar = createComponent({
@@ -114,7 +82,7 @@ const M3eAppBar = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-autocomplete>` instance for imperative access.
  *
- * See the `m3e-autocomplete` documentation in `@m3e/autocomplete` for full details on behavior,
+ * See the `m3e-autocomplete` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eAutocomplete = createComponent({
@@ -136,7 +104,7 @@ const M3eAutocomplete = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-avatar>` instance for imperative access.
  *
- * See the `m3e-avatar` documentation in `@m3e/avatar` for full details on behavior,
+ * See the `m3e-avatar` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eAvatar = createComponent({
@@ -155,7 +123,7 @@ const M3eAvatar = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-badge>` instance for imperative access.
  *
- * See the `m3e-badge` documentation in `@m3e/badge` for full details on behavior,
+ * See the `m3e-badge` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eBadge = createComponent({
@@ -238,7 +206,7 @@ const M3eBottomSheetTrigger = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-button>` instance for imperative access.
  *
- * See the `m3e-button` documentation in `@m3e/button` for full details on behavior,
+ * See the `m3e-button` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eButton = createComponent({
@@ -262,7 +230,7 @@ const M3eButton = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-button-group>` instance for imperative access.
  *
- * See the `m3e-button-group` documentation in `@m3e/button-group` for full details on behavior,
+ * See the `m3e-button-group` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eButtonGroup = createComponent({
@@ -281,7 +249,7 @@ const M3eButtonGroup = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-card>` instance for imperative access.
  *
- * See the `m3e-card` documentation in `@m3e/card` for full details on behavior,
+ * See the `m3e-card` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eCard = createComponent({
@@ -303,7 +271,7 @@ const M3eCard = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-checkbox>` instance for imperative access.
  *
- * See the `m3e-checkbox` documentation in `@m3e/checkbox` for full details on behavior,
+ * See the `m3e-checkbox` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eCheckbox = createComponent({
@@ -717,7 +685,7 @@ const M3eTextOverflow = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-dialog>` instance for imperative access.
  *
- * See the `m3e-dialog` documentation in `@m3e/dialog` for full details on behavior,
+ * See the `m3e-dialog` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eDialog = createComponent({
@@ -781,7 +749,7 @@ const M3eDialogTrigger = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-divider>` instance for imperative access.
  *
- * See the `m3e-divider` documentation in `@m3e/divider` for full details on behavior,
+ * See the `m3e-divider` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eDivider = createComponent({
@@ -800,7 +768,7 @@ const M3eDivider = createComponent({
  * native DOM events dispatched by the component. Refs are forwarded to the
  * underlying `<m3e-drawer-container>` instance for imperative access.
  *
- * See the `m3e-drawer-container` documentation in `@m3e/drawer-container` for full details on behavior,
+ * See the `m3e-drawer-container` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
 const M3eDrawerContainer = createComponent({
@@ -1541,7 +1509,7 @@ const M3eOptGroup = createComponent({
  * See the `m3e-paginator` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3ePaginator = createComponent$1({
+const M3ePaginator = createComponent({
     tagName: "m3e-paginator",
     elementClass: M3ePaginatorElement,
     react: React,