@m3e/react 2.0.0 → 2.0.1

package/dist/drawer-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-container.js","sources":["../../src/drawer-container/DrawerContainer.ts","../../src/drawer-container/DrawerToggle.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eDrawerContainerElement } from \"@m3e/web/drawer-container\";\r\nexport type { DrawerMode, DrawerPosition, M3eDrawerContainerElement } from \"@m3e/web/drawer-container\";\r\n\r\n/**\r\n * React binding for the `m3e-drawer-container` Web Component from `@m3e/drawer-container`.\r\n *\r\n * This component renders the underlying `<m3e-drawer-container>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-drawer-container>` instance for imperative access.\r\n *\r\n * See the `m3e-drawer-container` documentation in `@m3e/drawer-container` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eDrawerContainer = createComponent({\r\n  tagName: \"m3e-drawer-container\",\r\n  elementClass: M3eDrawerContainerElement,\r\n  react: React,\r\n  events: {\r\n    onChange: \"change\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eDrawerToggleElement } from \"@m3e/web/drawer-container\";\r\nexport type { M3eDrawerToggleElement } from \"@m3e/web/drawer-container\";\r\n\r\n/**\r\n * React binding for the `m3e-drawer-toggle` Web Component from `@m3e/drawer-container`.\r\n *\r\n * This component renders the underlying `<m3e-drawer-toggle>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-drawer-toggle>` instance for imperative access.\r\n *\r\n * See the `m3e-drawer-toggle` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eDrawerToggle = createComponent({\r\n  tagName: \"m3e-drawer-toggle\",\r\n  elementClass: M3eDrawerToggleElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAChD,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,YAAY,EAAE,yBAAyB;AACvC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACpBD;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAG,eAAe,CAAC;AAC7C,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,YAAY,EAAE,sBAAsB;AACpC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"drawer-container.js","sources":["../../src/utils/createComponent.ts","../../src/drawer-container/DrawerContainer.ts","../../src/drawer-container/DrawerToggle.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eDrawerContainerElement } from \"@m3e/web/drawer-container\";\r\nexport type { DrawerMode, DrawerPosition, M3eDrawerContainerElement } from \"@m3e/web/drawer-container\";\r\n\r\n/**\r\n * React binding for the `m3e-drawer-container` Web Component from `@m3e/web/drawer-container`.\r\n *\r\n * This component renders the underlying `<m3e-drawer-container>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-drawer-container>` instance for imperative access.\r\n *\r\n * See the `m3e-drawer-container` documentation in `@m3e/drawer-container` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eDrawerContainer = createComponent({\r\n  tagName: \"m3e-drawer-container\",\r\n  elementClass: M3eDrawerContainerElement,\r\n  react: React,\r\n  events: {\r\n    onChange: \"change\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eDrawerToggleElement } from \"@m3e/web/drawer-container\";\r\nexport type { M3eDrawerToggleElement } from \"@m3e/web/drawer-container\";\r\n\r\n/**\r\n * React binding for the `m3e-drawer-toggle` Web Component from `@m3e/web/drawer-container`.\r\n *\r\n * This component renders the underlying `<m3e-drawer-toggle>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-drawer-toggle>` instance for imperative access.\r\n *\r\n * See the `m3e-drawer-toggle` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eDrawerToggle = createComponent({\r\n  tagName: \"m3e-drawer-toggle\",\r\n  elementClass: M3eDrawerToggleElement,\r\n  react: React,\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAChD,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,YAAY,EAAE,yBAAyB;AACvC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACpBD;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAG,eAAe,CAAC;AAC7C,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,YAAY,EAAE,sBAAsB;AACpC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/drawer-container.min.js

@@ -3,5 +3,5 @@
  * @license MIT
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
- */import e from"react";import{createComponent as r}from"@lit/react";import{M3eDrawerContainerElement as t,M3eDrawerToggleElement as a}from"@m3e/web/drawer-container";const m=r({tagName:"m3e-drawer-container",elementClass:t,react:e,events:{onChange:"change"}}),n=r({tagName:"m3e-drawer-toggle",elementClass:a,react:e});export{m as M3eDrawerContainer,n as M3eDrawerToggle};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eDrawerContainerElement as a,M3eDrawerToggleElement as n}from"@m3e/web/drawer-container";function r({react:e,tagName:a,elementClass:n,events:r,displayName:m}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:n,events:r,displayName:m}):null}const m=r({tagName:"m3e-drawer-container",elementClass:a,react:e,events:{onChange:"change"}}),o=r({tagName:"m3e-drawer-toggle",elementClass:n,react:e});export{m as M3eDrawerContainer,o as M3eDrawerToggle};
 //# sourceMappingURL=drawer-container.min.js.map

package/dist/drawer-container.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-container.min.js","sources":["../../src/drawer-container/DrawerContainer.ts","../../src/drawer-container/DrawerToggle.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eDrawerContainerElement } from \"@m3e/web/drawer-container\";\r\nexport type { DrawerMode, DrawerPosition, M3eDrawerContainerElement } from \"@m3e/web/drawer-container\";\r\n\r\n/**\r\n * React binding for the `m3e-drawer-container` Web Component from `@m3e/drawer-container`.\r\n *\r\n * This component renders the underlying `<m3e-drawer-container>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-drawer-container>` instance for imperative access.\r\n *\r\n * See the `m3e-drawer-container` documentation in `@m3e/drawer-container` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eDrawerContainer = createComponent({\r\n  tagName: \"m3e-drawer-container\",\r\n  elementClass: M3eDrawerContainerElement,\r\n  react: React,\r\n  events: {\r\n    onChange: \"change\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eDrawerToggleElement } from \"@m3e/web/drawer-container\";\r\nexport type { M3eDrawerToggleElement } from \"@m3e/web/drawer-container\";\r\n\r\n/**\r\n * React binding for the `m3e-drawer-toggle` Web Component from `@m3e/drawer-container`.\r\n *\r\n * This component renders the underlying `<m3e-drawer-toggle>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-drawer-toggle>` instance for imperative access.\r\n *\r\n * See the `m3e-drawer-toggle` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eDrawerToggle = createComponent({\r\n  tagName: \"m3e-drawer-toggle\",\r\n  elementClass: M3eDrawerToggleElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eDrawerContainer","createComponent","tagName","elementClass","M3eDrawerContainerElement","react","React","events","onChange","M3eDrawerToggle","M3eDrawerToggleElement"],"mappings":";;;;;uKAmBO,MAAMA,EAAqBC,EAAgB,CAChDC,QAAS,uBACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,SAAU,YCLDC,EAAkBR,EAAgB,CAC7CC,QAAS,oBACTC,aAAcO,EACdL,MAAOC"}
+{"version":3,"file":"drawer-container.min.js","sources":["../../src/utils/createComponent.ts","../../src/drawer-container/DrawerContainer.ts","../../src/drawer-container/DrawerToggle.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eDrawerContainerElement } from \"@m3e/web/drawer-container\";\r\nexport type { DrawerMode, DrawerPosition, M3eDrawerContainerElement } from \"@m3e/web/drawer-container\";\r\n\r\n/**\r\n * React binding for the `m3e-drawer-container` Web Component from `@m3e/web/drawer-container`.\r\n *\r\n * This component renders the underlying `<m3e-drawer-container>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-drawer-container>` instance for imperative access.\r\n *\r\n * See the `m3e-drawer-container` documentation in `@m3e/drawer-container` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eDrawerContainer = createComponent({\r\n  tagName: \"m3e-drawer-container\",\r\n  elementClass: M3eDrawerContainerElement,\r\n  react: React,\r\n  events: {\r\n    onChange: \"change\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eDrawerToggleElement } from \"@m3e/web/drawer-container\";\r\nexport type { M3eDrawerToggleElement } from \"@m3e/web/drawer-container\";\r\n\r\n/**\r\n * React binding for the `m3e-drawer-toggle` Web Component from `@m3e/web/drawer-container`.\r\n *\r\n * This component renders the underlying `<m3e-drawer-toggle>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-drawer-toggle>` instance for imperative access.\r\n *\r\n * See the `m3e-drawer-toggle` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eDrawerToggle = createComponent({\r\n  tagName: \"m3e-drawer-toggle\",\r\n  elementClass: M3eDrawerToggleElement,\r\n  react: React,\r\n});\r\n"],"names":["createComponent","react","tagName","elementClass","events","displayName","window","createReactComponent","M3eDrawerContainer","M3eDrawerContainerElement","React","onChange","M3eDrawerToggle","M3eDrawerToggleElement"],"mappings":";;;;;uKA6BM,SAAUA,GAAkEC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CCpBO,MAAMG,EAAqBR,EAAgB,CAChDE,QAAS,uBACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,SAAU,YCLDC,EAAkBZ,EAAgB,CAC7CE,QAAS,oBACTC,aAAcU,EACdZ,MAAOS"}

package/dist/expansion-panel.js

@@ -6,11 +6,42 @@
  */
 
 import React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent as createComponent$1 } from '@lit/react';
 import { M3eAccordionElement, M3eExpansionPanelElement } from '@m3e/web/expansion-panel';
 
 /**
- * React binding for the `m3e-accordion` Web Component from `@m3e/expansion-panel`.
+ * 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-accordion` Web Component from `@m3e/web/expansion-panel`.
  *
  * This component renders the underlying `<m3e-accordion>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.
@@ -29,7 +60,7 @@ const M3eAccordion = createComponent({
 });
 
 /**
- * React binding for the `m3e-expansion-panel` Web Component from `@m3e/expansion-panel`.
+ * React binding for the `m3e-expansion-panel` Web Component from `@m3e/web/expansion-panel`.
  *
  * This component renders the underlying `<m3e-expansion-panel>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.

package/dist/expansion-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"expansion-panel.js","sources":["../../src/expansion-panel/Accordion.ts","../../src/expansion-panel/ExpansionPanel.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAccordionElement } from \"@m3e/web/expansion-panel\";\r\nexport type { M3eAccordionElement } from \"@m3e/web/expansion-panel\";\r\n\r\n/**\r\n * React binding for the `m3e-accordion` Web Component from `@m3e/expansion-panel`.\r\n *\r\n * This component renders the underlying `<m3e-accordion>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-accordion>` instance for imperative access.\r\n *\r\n * See the `m3e-accordion` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eAccordion = createComponent({\r\n  tagName: \"m3e-accordion\",\r\n  elementClass: M3eAccordionElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eExpansionPanelElement } from \"@m3e/web/expansion-panel\";\r\nexport type {\r\n  ExpansionToggleDirection,\r\n  ExpansionTogglePosition,\r\n  M3eExpansionPanelElement,\r\n} from \"@m3e/web/expansion-panel\";\r\n\r\n/**\r\n * React binding for the `m3e-expansion-panel` Web Component from `@m3e/expansion-panel`.\r\n *\r\n * This component renders the underlying `<m3e-expansion-panel>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-expansion-panel>` instance for imperative access.\r\n *\r\n * See the `m3e-expansion-panel` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eExpansionPanel = createComponent({\r\n  tagName: \"m3e-expansion-panel\",\r\n  elementClass: M3eExpansionPanelElement,\r\n  react: React,\r\n  events: {\r\n    onOpening: \"opening\",\r\n    onOpened: \"opened\",\r\n    onClosing: \"closing\",\r\n    onClosed: \"closed\",\r\n  },\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,eAAe,CAAC;AAC1C,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAE,mBAAmB;AACjC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACbD;;;;;;;;;;;;AAYG;AACI,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAC/C,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAE,wBAAwB;AACtC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"expansion-panel.js","sources":["../../src/utils/createComponent.ts","../../src/expansion-panel/Accordion.ts","../../src/expansion-panel/ExpansionPanel.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eAccordionElement } from \"@m3e/web/expansion-panel\";\r\nexport type { M3eAccordionElement } from \"@m3e/web/expansion-panel\";\r\n\r\n/**\r\n * React binding for the `m3e-accordion` Web Component from `@m3e/web/expansion-panel`.\r\n *\r\n * This component renders the underlying `<m3e-accordion>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-accordion>` instance for imperative access.\r\n *\r\n * See the `m3e-accordion` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eAccordion = createComponent({\r\n  tagName: \"m3e-accordion\",\r\n  elementClass: M3eAccordionElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eExpansionPanelElement } from \"@m3e/web/expansion-panel\";\r\nexport type {\r\n  ExpansionToggleDirection,\r\n  ExpansionTogglePosition,\r\n  M3eExpansionPanelElement,\r\n} from \"@m3e/web/expansion-panel\";\r\n\r\n/**\r\n * React binding for the `m3e-expansion-panel` Web Component from `@m3e/web/expansion-panel`.\r\n *\r\n * This component renders the underlying `<m3e-expansion-panel>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-expansion-panel>` instance for imperative access.\r\n *\r\n * See the `m3e-expansion-panel` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eExpansionPanel = createComponent({\r\n  tagName: \"m3e-expansion-panel\",\r\n  elementClass: M3eExpansionPanelElement,\r\n  react: React,\r\n  events: {\r\n    onOpening: \"opening\",\r\n    onOpened: \"opened\",\r\n    onClosing: \"closing\",\r\n    onClosed: \"closed\",\r\n  },\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,eAAe,CAAC;AAC1C,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,YAAY,EAAE,mBAAmB;AACjC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACbD;;;;;;;;;;;;AAYG;AACI,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAC/C,IAAA,OAAO,EAAE,qBAAqB;AAC9B,IAAA,YAAY,EAAE,wBAAwB;AACtC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;;;"}

package/dist/expansion-panel.min.js

@@ -3,5 +3,5 @@
  * @license MIT
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
- */import e from"react";import{createComponent as n}from"@lit/react";import{M3eAccordionElement as o,M3eExpansionPanelElement as t}from"@m3e/web/expansion-panel";const a=n({tagName:"m3e-accordion",elementClass:o,react:e}),m=n({tagName:"m3e-expansion-panel",elementClass:t,react:e,events:{onOpening:"opening",onOpened:"opened",onClosing:"closing",onClosed:"closed"}});export{a as M3eAccordion,m as M3eExpansionPanel};
+ */import e from"react";import{createComponent as n}from"@lit/react";import{M3eAccordionElement as a,M3eExpansionPanelElement as t}from"@m3e/web/expansion-panel";function o({react:e,tagName:a,elementClass:t,events:o,displayName:s}){return"undefined"!=typeof window?n({react:e,tagName:a,elementClass:t,events:o,displayName:s}):null}const s=o({tagName:"m3e-accordion",elementClass:a,react:e}),l=o({tagName:"m3e-expansion-panel",elementClass:t,react:e,events:{onOpening:"opening",onOpened:"opened",onClosing:"closing",onClosed:"closed"}});export{s as M3eAccordion,l as M3eExpansionPanel};
 //# sourceMappingURL=expansion-panel.min.js.map

package/dist/expansion-panel.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"expansion-panel.min.js","sources":["../../src/expansion-panel/Accordion.ts","../../src/expansion-panel/ExpansionPanel.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAccordionElement } from \"@m3e/web/expansion-panel\";\r\nexport type { M3eAccordionElement } from \"@m3e/web/expansion-panel\";\r\n\r\n/**\r\n * React binding for the `m3e-accordion` Web Component from `@m3e/expansion-panel`.\r\n *\r\n * This component renders the underlying `<m3e-accordion>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-accordion>` instance for imperative access.\r\n *\r\n * See the `m3e-accordion` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eAccordion = createComponent({\r\n  tagName: \"m3e-accordion\",\r\n  elementClass: M3eAccordionElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eExpansionPanelElement } from \"@m3e/web/expansion-panel\";\r\nexport type {\r\n  ExpansionToggleDirection,\r\n  ExpansionTogglePosition,\r\n  M3eExpansionPanelElement,\r\n} from \"@m3e/web/expansion-panel\";\r\n\r\n/**\r\n * React binding for the `m3e-expansion-panel` Web Component from `@m3e/expansion-panel`.\r\n *\r\n * This component renders the underlying `<m3e-expansion-panel>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-expansion-panel>` instance for imperative access.\r\n *\r\n * See the `m3e-expansion-panel` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eExpansionPanel = createComponent({\r\n  tagName: \"m3e-expansion-panel\",\r\n  elementClass: M3eExpansionPanelElement,\r\n  react: React,\r\n  events: {\r\n    onOpening: \"opening\",\r\n    onOpened: \"opened\",\r\n    onClosing: \"closing\",\r\n    onClosed: \"closed\",\r\n  },\r\n});\r\n"],"names":["M3eAccordion","createComponent","tagName","elementClass","M3eAccordionElement","react","React","M3eExpansionPanel","M3eExpansionPanelElement","events","onOpening","onOpened","onClosing","onClosed"],"mappings":";;;;;kKAmBO,MAAMA,EAAeC,EAAgB,CAC1CC,QAAS,gBACTC,aAAcC,EACdC,MAAOC,ICCIC,EAAoBN,EAAgB,CAC/CC,QAAS,sBACTC,aAAcK,EACdH,MAAOC,EACPG,OAAQ,CACNC,UAAW,UACXC,SAAU,SACVC,UAAW,UACXC,SAAU"}
+{"version":3,"file":"expansion-panel.min.js","sources":["../../src/utils/createComponent.ts","../../src/expansion-panel/Accordion.ts","../../src/expansion-panel/ExpansionPanel.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eAccordionElement } from \"@m3e/web/expansion-panel\";\r\nexport type { M3eAccordionElement } from \"@m3e/web/expansion-panel\";\r\n\r\n/**\r\n * React binding for the `m3e-accordion` Web Component from `@m3e/web/expansion-panel`.\r\n *\r\n * This component renders the underlying `<m3e-accordion>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-accordion>` instance for imperative access.\r\n *\r\n * See the `m3e-accordion` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eAccordion = createComponent({\r\n  tagName: \"m3e-accordion\",\r\n  elementClass: M3eAccordionElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eExpansionPanelElement } from \"@m3e/web/expansion-panel\";\r\nexport type {\r\n  ExpansionToggleDirection,\r\n  ExpansionTogglePosition,\r\n  M3eExpansionPanelElement,\r\n} from \"@m3e/web/expansion-panel\";\r\n\r\n/**\r\n * React binding for the `m3e-expansion-panel` Web Component from `@m3e/web/expansion-panel`.\r\n *\r\n * This component renders the underlying `<m3e-expansion-panel>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-expansion-panel>` instance for imperative access.\r\n *\r\n * See the `m3e-expansion-panel` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eExpansionPanel = createComponent({\r\n  tagName: \"m3e-expansion-panel\",\r\n  elementClass: M3eExpansionPanelElement,\r\n  react: React,\r\n  events: {\r\n    onOpening: \"opening\",\r\n    onOpened: \"opened\",\r\n    onClosing: \"closing\",\r\n    onClosed: \"closed\",\r\n  },\r\n});\r\n"],"names":["createComponent","react","tagName","elementClass","events","displayName","window","createReactComponent","M3eAccordion","M3eAccordionElement","React","M3eExpansionPanel","M3eExpansionPanelElement","onOpening","onOpened","onClosing","onClosed"],"mappings":";;;;;kKA6BM,SAAUA,GAAkEC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CCpBO,MAAMG,EAAeR,EAAgB,CAC1CE,QAAS,gBACTC,aAAcM,EACdR,MAAOS,ICCIC,EAAoBX,EAAgB,CAC/CE,QAAS,sBACTC,aAAcS,EACdX,MAAOS,EACPN,OAAQ,CACNS,UAAW,UACXC,SAAU,SACVC,UAAW,UACXC,SAAU"}

package/dist/fab-menu.js

@@ -6,11 +6,42 @@
  */
 
 import React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent as createComponent$1 } from '@lit/react';
 import { M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement } from '@m3e/web/fab-menu';
 
 /**
- * React binding for the `m3e-fab-menu` Web Component from `@m3e/fab-menu`.
+ * 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-fab-menu` Web Component from `@m3e/web/fab-menu`.
  *
  * This component renders the underlying `<m3e-fab-menu>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.
@@ -33,7 +64,7 @@ const M3eFabMenu = createComponent({
 });
 
 /**
- * React binding for the `m3e-fab-menu-item` Web Component from `@m3e/fab-menu`.
+ * React binding for the `m3e-fab-menu-item` Web Component from `@m3e/web/fab-menu`.
  *
  * This component renders the underlying `<m3e-fab-menu-item>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.
@@ -55,7 +86,7 @@ const M3eFabMenuItem = createComponent({
 });
 
 /**
- * React binding for the `m3e-fab-menu-trigger` Web Component from `@m3e/fab-menu`.
+ * React binding for the `m3e-fab-menu-trigger` Web Component from `@m3e/web/fab-menu`.
  *
  * This component renders the underlying `<m3e-fab-menu-trigger>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.

package/dist/fab-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab-menu.js","sources":["../../src/fab-menu/FabMenu.ts","../../src/fab-menu/FabMenuItem.ts","../../src/fab-menu/FabMenuTrigger.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFabMenuElement } from \"@m3e/web/fab-menu\";\r\nexport type { FabMenuVariant, M3eFabMenuElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu` Web Component from `@m3e/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenu = createComponent({\r\n  tagName: \"m3e-fab-menu\",\r\n  elementClass: M3eFabMenuElement,\r\n  react: React,\r\n  events: {\r\n    onBeforeToggle: \"beforetoggle\",\r\n    onToggle: \"toggle\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFabMenuItemElement } from \"@m3e/web/fab-menu\";\r\nexport type { M3eFabMenuItemElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu-item` Web Component from `@m3e/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu-item>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu-item>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu-item` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenuItem = createComponent({\r\n  tagName: \"m3e-fab-menu-item\",\r\n  elementClass: M3eFabMenuItemElement,\r\n  react: React,\r\n  events: {\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFabMenuTriggerElement } from \"@m3e/web/fab-menu\";\r\nexport type { M3eFabMenuTriggerElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu-trigger` Web Component from `@m3e/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu-trigger>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu-trigger>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu-trigger` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenuTrigger = createComponent({\r\n  tagName: \"m3e-fab-menu-trigger\",\r\n  elementClass: M3eFabMenuTriggerElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,eAAe,CAAC;AACxC,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAE,iBAAiB;AAC/B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,cAAc,EAAE,cAAc;AAC9B,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACrBD;;;;;;;;;;;;AAYG;AACI,MAAM,cAAc,GAAG,eAAe,CAAC;AAC5C,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,YAAY,EAAE,qBAAqB;AACnC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;ACpBD;;;;;;;;;;;;AAYG;AACI,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAC/C,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,YAAY,EAAE,wBAAwB;AACtC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"fab-menu.js","sources":["../../src/utils/createComponent.ts","../../src/fab-menu/FabMenu.ts","../../src/fab-menu/FabMenuItem.ts","../../src/fab-menu/FabMenuTrigger.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFabMenuElement } from \"@m3e/web/fab-menu\";\r\nexport type { FabMenuVariant, M3eFabMenuElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu` Web Component from `@m3e/web/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenu = createComponent({\r\n  tagName: \"m3e-fab-menu\",\r\n  elementClass: M3eFabMenuElement,\r\n  react: React,\r\n  events: {\r\n    onBeforeToggle: \"beforetoggle\",\r\n    onToggle: \"toggle\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFabMenuItemElement } from \"@m3e/web/fab-menu\";\r\nexport type { M3eFabMenuItemElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu-item` Web Component from `@m3e/web/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu-item>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu-item>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu-item` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenuItem = createComponent({\r\n  tagName: \"m3e-fab-menu-item\",\r\n  elementClass: M3eFabMenuItemElement,\r\n  react: React,\r\n  events: {\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFabMenuTriggerElement } from \"@m3e/web/fab-menu\";\r\nexport type { M3eFabMenuTriggerElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu-trigger` Web Component from `@m3e/web/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu-trigger>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu-trigger>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu-trigger` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenuTrigger = createComponent({\r\n  tagName: \"m3e-fab-menu-trigger\",\r\n  elementClass: M3eFabMenuTriggerElement,\r\n  react: React,\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,eAAe,CAAC;AACxC,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAE,iBAAiB;AAC/B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,cAAc,EAAE,cAAc;AAC9B,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACrBD;;;;;;;;;;;;AAYG;AACI,MAAM,cAAc,GAAG,eAAe,CAAC;AAC5C,IAAA,OAAO,EAAE,mBAAmB;AAC5B,IAAA,YAAY,EAAE,qBAAqB;AACnC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;ACpBD;;;;;;;;;;;;AAYG;AACI,MAAM,iBAAiB,GAAG,eAAe,CAAC;AAC/C,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,YAAY,EAAE,wBAAwB;AACtC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/fab-menu.min.js

@@ -3,5 +3,5 @@
  * @license MIT
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
- */import e from"react";import{createComponent as t}from"@lit/react";import{M3eFabMenuElement as m,M3eFabMenuItemElement as a,M3eFabMenuTriggerElement as o}from"@m3e/web/fab-menu";const r=t({tagName:"m3e-fab-menu",elementClass:m,react:e,events:{onBeforeToggle:"beforetoggle",onToggle:"toggle"}}),l=t({tagName:"m3e-fab-menu-item",elementClass:a,react:e,events:{onClick:"click"}}),n=t({tagName:"m3e-fab-menu-trigger",elementClass:o,react:e});export{r as M3eFabMenu,l as M3eFabMenuItem,n as M3eFabMenuTrigger};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eFabMenuElement as a,M3eFabMenuItemElement as m,M3eFabMenuTriggerElement as n}from"@m3e/web/fab-menu";function l({react:e,tagName:a,elementClass:m,events:n,displayName:l}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:m,events:n,displayName:l}):null}const o=l({tagName:"m3e-fab-menu",elementClass:a,react:e,events:{onBeforeToggle:"beforetoggle",onToggle:"toggle"}}),r=l({tagName:"m3e-fab-menu-item",elementClass:m,react:e,events:{onClick:"click"}}),s=l({tagName:"m3e-fab-menu-trigger",elementClass:n,react:e});export{o as M3eFabMenu,r as M3eFabMenuItem,s as M3eFabMenuTrigger};
 //# sourceMappingURL=fab-menu.min.js.map

package/dist/fab-menu.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab-menu.min.js","sources":["../../src/fab-menu/FabMenu.ts","../../src/fab-menu/FabMenuItem.ts","../../src/fab-menu/FabMenuTrigger.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFabMenuElement } from \"@m3e/web/fab-menu\";\r\nexport type { FabMenuVariant, M3eFabMenuElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu` Web Component from `@m3e/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenu = createComponent({\r\n  tagName: \"m3e-fab-menu\",\r\n  elementClass: M3eFabMenuElement,\r\n  react: React,\r\n  events: {\r\n    onBeforeToggle: \"beforetoggle\",\r\n    onToggle: \"toggle\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFabMenuItemElement } from \"@m3e/web/fab-menu\";\r\nexport type { M3eFabMenuItemElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu-item` Web Component from `@m3e/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu-item>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu-item>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu-item` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenuItem = createComponent({\r\n  tagName: \"m3e-fab-menu-item\",\r\n  elementClass: M3eFabMenuItemElement,\r\n  react: React,\r\n  events: {\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFabMenuTriggerElement } from \"@m3e/web/fab-menu\";\r\nexport type { M3eFabMenuTriggerElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu-trigger` Web Component from `@m3e/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu-trigger>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu-trigger>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu-trigger` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenuTrigger = createComponent({\r\n  tagName: \"m3e-fab-menu-trigger\",\r\n  elementClass: M3eFabMenuTriggerElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eFabMenu","createComponent","tagName","elementClass","M3eFabMenuElement","react","React","events","onBeforeToggle","onToggle","M3eFabMenuItem","M3eFabMenuItemElement","onClick","M3eFabMenuTrigger","M3eFabMenuTriggerElement"],"mappings":";;;;;oLAmBO,MAAMA,EAAaC,EAAgB,CACxCC,QAAS,eACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,eAAgB,eAChBC,SAAU,YCNDC,EAAiBT,EAAgB,CAC5CC,QAAS,oBACTC,aAAcQ,EACdN,MAAOC,EACPC,OAAQ,CACNK,QAAS,WCLAC,EAAoBZ,EAAgB,CAC/CC,QAAS,uBACTC,aAAcW,EACdT,MAAOC"}
+{"version":3,"file":"fab-menu.min.js","sources":["../../src/utils/createComponent.ts","../../src/fab-menu/FabMenu.ts","../../src/fab-menu/FabMenuItem.ts","../../src/fab-menu/FabMenuTrigger.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFabMenuElement } from \"@m3e/web/fab-menu\";\r\nexport type { FabMenuVariant, M3eFabMenuElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu` Web Component from `@m3e/web/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenu = createComponent({\r\n  tagName: \"m3e-fab-menu\",\r\n  elementClass: M3eFabMenuElement,\r\n  react: React,\r\n  events: {\r\n    onBeforeToggle: \"beforetoggle\",\r\n    onToggle: \"toggle\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFabMenuItemElement } from \"@m3e/web/fab-menu\";\r\nexport type { M3eFabMenuItemElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu-item` Web Component from `@m3e/web/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu-item>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu-item>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu-item` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenuItem = createComponent({\r\n  tagName: \"m3e-fab-menu-item\",\r\n  elementClass: M3eFabMenuItemElement,\r\n  react: React,\r\n  events: {\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFabMenuTriggerElement } from \"@m3e/web/fab-menu\";\r\nexport type { M3eFabMenuTriggerElement } from \"@m3e/web/fab-menu\";\r\n\r\n/**\r\n * React binding for the `m3e-fab-menu-trigger` Web Component from `@m3e/web/fab-menu`.\r\n *\r\n * This component renders the underlying `<m3e-fab-menu-trigger>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab-menu-trigger>` instance for imperative access.\r\n *\r\n * See the `m3e-fab-menu-trigger` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFabMenuTrigger = createComponent({\r\n  tagName: \"m3e-fab-menu-trigger\",\r\n  elementClass: M3eFabMenuTriggerElement,\r\n  react: React,\r\n});\r\n"],"names":["createComponent","react","tagName","elementClass","events","displayName","window","createReactComponent","M3eFabMenu","M3eFabMenuElement","React","onBeforeToggle","onToggle","M3eFabMenuItem","M3eFabMenuItemElement","onClick","M3eFabMenuTrigger","M3eFabMenuTriggerElement"],"mappings":";;;;;oLA6BM,SAAUA,GAAkEC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CCpBO,MAAMG,EAAaR,EAAgB,CACxCE,QAAS,eACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,eAAgB,eAChBC,SAAU,YCNDC,EAAiBb,EAAgB,CAC5CE,QAAS,oBACTC,aAAcW,EACdb,MAAOS,EACPN,OAAQ,CACNW,QAAS,WCLAC,EAAoBhB,EAAgB,CAC/CE,QAAS,uBACTC,aAAcc,EACdhB,MAAOS"}

package/dist/fab.js

@@ -6,11 +6,42 @@
  */
 
 import React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent as createComponent$1 } from '@lit/react';
 import { M3eFabElement } from '@m3e/web/fab';
 
 /**
- * React binding for the `m3e-fab` Web Component from `@m3e/fab`.
+ * 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-fab` Web Component from `@m3e/web/fab`.
  *
  * This component renders the underlying `<m3e-fab>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.

package/dist/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sources":["../../src/fab/Fab.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\nexport type { FabSize, FabVariant, M3eFabElement } from \"@m3e/web/fab\";\r\n\r\n/**\r\n * React binding for the `m3e-fab` Web Component from `@m3e/fab`.\r\n *\r\n * This component renders the underlying `<m3e-fab>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab>` instance for imperative access.\r\n *\r\n * See the `m3e-fab` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFab = createComponent({\r\n  tagName: \"m3e-fab\",\r\n  elementClass: M3eFabElement,\r\n  react: React,\r\n  events: {\r\n    onClick: \"click\",\r\n  },\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,MAAM,GAAG,eAAe,CAAC;AACpC,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,YAAY,EAAE,aAAa;AAC3B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"fab.js","sources":["../../src/utils/createComponent.ts","../../src/fab/Fab.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\nexport type { FabSize, FabVariant, M3eFabElement } from \"@m3e/web/fab\";\r\n\r\n/**\r\n * React binding for the `m3e-fab` Web Component from `@m3e/web/fab`.\r\n *\r\n * This component renders the underlying `<m3e-fab>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab>` instance for imperative access.\r\n *\r\n * See the `m3e-fab` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFab = createComponent({\r\n  tagName: \"m3e-fab\",\r\n  elementClass: M3eFabElement,\r\n  react: React,\r\n  events: {\r\n    onClick: \"click\",\r\n  },\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,MAAM,GAAG,eAAe,CAAC;AACpC,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,YAAY,EAAE,aAAa;AAC3B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}

package/dist/fab.min.js

@@ -3,5 +3,5 @@
  * @license MIT
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
- */import e from"react";import{createComponent as t}from"@lit/react";import{M3eFabElement as m}from"@m3e/web/fab";const r=t({tagName:"m3e-fab",elementClass:m,react:e,events:{onClick:"click"}});export{r as M3eFab};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eFabElement as a}from"@m3e/web/fab";const n=function({react:e,tagName:a,elementClass:n,events:m,displayName:r}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:n,events:m,displayName:r}):null}({tagName:"m3e-fab",elementClass:a,react:e,events:{onClick:"click"}});export{n as M3eFab};
 //# sourceMappingURL=fab.min.js.map

package/dist/fab.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.min.js","sources":["../../src/fab/Fab.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\nexport type { FabSize, FabVariant, M3eFabElement } from \"@m3e/web/fab\";\r\n\r\n/**\r\n * React binding for the `m3e-fab` Web Component from `@m3e/fab`.\r\n *\r\n * This component renders the underlying `<m3e-fab>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab>` instance for imperative access.\r\n *\r\n * See the `m3e-fab` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFab = createComponent({\r\n  tagName: \"m3e-fab\",\r\n  elementClass: M3eFabElement,\r\n  react: React,\r\n  events: {\r\n    onClick: \"click\",\r\n  },\r\n});\r\n"],"names":["M3eFab","createComponent","tagName","elementClass","M3eFabElement","react","React","events","onClick"],"mappings":";;;;;kHAmBO,MAAMA,EAASC,EAAgB,CACpCC,QAAS,UACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,QAAS"}
+{"version":3,"file":"fab.min.js","sources":["../../src/fab/Fab.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFabElement } from \"@m3e/web/fab\";\r\nexport type { FabSize, FabVariant, M3eFabElement } from \"@m3e/web/fab\";\r\n\r\n/**\r\n * React binding for the `m3e-fab` Web Component from `@m3e/web/fab`.\r\n *\r\n * This component renders the underlying `<m3e-fab>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-fab>` instance for imperative access.\r\n *\r\n * See the `m3e-fab` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFab = createComponent({\r\n  tagName: \"m3e-fab\",\r\n  elementClass: M3eFabElement,\r\n  react: React,\r\n  events: {\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n"],"names":["M3eFab","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eFabElement","React","onClick"],"mappings":";;;;;kHAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpBsBG,CAAgB,CACpCN,QAAS,UACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,QAAS"}

package/dist/form-field.js

@@ -6,11 +6,42 @@
  */
 
 import React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent as createComponent$1 } from '@lit/react';
 import { M3eFormFieldElement } from '@m3e/web/form-field';
 
 /**
- * React binding for the `m3e-form-field` Web Component from `@m3e/form-field`.
+ * 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-form-field` Web Component from `@m3e/web/form-field`.
  *
  * This component renders the underlying `<m3e-form-field>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.

package/dist/form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sources":["../../src/form-field/FormField.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\nexport type { FloatLabelType, FormFieldVariant, FormFieldControl, M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\n/**\r\n * React binding for the `m3e-form-field` Web Component from `@m3e/form-field`.\r\n *\r\n * This component renders the underlying `<m3e-form-field>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-form-field>` instance for imperative access.\r\n *\r\n * See the `m3e-form-field` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFormField = createComponent({\r\n  tagName: \"m3e-form-field\",\r\n  elementClass: M3eFormFieldElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,eAAe,CAAC;AAC1C,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAE,mBAAmB;AACjC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"form-field.js","sources":["../../src/utils/createComponent.ts","../../src/form-field/FormField.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\nexport type { FloatLabelType, FormFieldVariant, FormFieldControl, M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\n/**\r\n * React binding for the `m3e-form-field` Web Component from `@m3e/web/form-field`.\r\n *\r\n * This component renders the underlying `<m3e-form-field>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-form-field>` instance for imperative access.\r\n *\r\n * See the `m3e-form-field` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFormField = createComponent({\r\n  tagName: \"m3e-form-field\",\r\n  elementClass: M3eFormFieldElement,\r\n  react: React,\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,YAAY,GAAG,eAAe,CAAC;AAC1C,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,YAAY,EAAE,mBAAmB;AACjC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/form-field.min.js

@@ -3,5 +3,5 @@
  * @license MIT
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
- */import e from"react";import{createComponent as m}from"@lit/react";import{M3eFormFieldElement as r}from"@m3e/web/form-field";const t=m({tagName:"m3e-form-field",elementClass:r,react:e});export{t as M3eFormField};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eFormFieldElement as a}from"@m3e/web/form-field";const m=function({react:e,tagName:a,elementClass:m,events:r,displayName:n}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:m,events:r,displayName:n}):null}({tagName:"m3e-form-field",elementClass:a,react:e});export{m as M3eFormField};
 //# sourceMappingURL=form-field.min.js.map

package/dist/form-field.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.min.js","sources":["../../src/form-field/FormField.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\nexport type { FloatLabelType, FormFieldVariant, FormFieldControl, M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\n/**\r\n * React binding for the `m3e-form-field` Web Component from `@m3e/form-field`.\r\n *\r\n * This component renders the underlying `<m3e-form-field>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-form-field>` instance for imperative access.\r\n *\r\n * See the `m3e-form-field` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFormField = createComponent({\r\n  tagName: \"m3e-form-field\",\r\n  elementClass: M3eFormFieldElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eFormField","createComponent","tagName","elementClass","M3eFormFieldElement","react","React"],"mappings":";;;;;+HAmBO,MAAMA,EAAeC,EAAgB,CAC1CC,QAAS,iBACTC,aAAcC,EACdC,MAAOC"}
+{"version":3,"file":"form-field.min.js","sources":["../../src/form-field/FormField.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eFormFieldElement } from \"@m3e/web/form-field\";\r\nexport type { FloatLabelType, FormFieldVariant, FormFieldControl, M3eFormFieldElement } from \"@m3e/web/form-field\";\r\n\r\n/**\r\n * React binding for the `m3e-form-field` Web Component from `@m3e/web/form-field`.\r\n *\r\n * This component renders the underlying `<m3e-form-field>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-form-field>` instance for imperative access.\r\n *\r\n * See the `m3e-form-field` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eFormField = createComponent({\r\n  tagName: \"m3e-form-field\",\r\n  elementClass: M3eFormFieldElement,\r\n  react: React,\r\n});\r\n","import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n"],"names":["M3eFormField","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eFormFieldElement","React"],"mappings":";;;;;+HAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpB4BG,CAAgB,CAC1CN,QAAS,iBACTC,aAAcM,EACdR,MAAOS"}

package/dist/heading.js

@@ -6,11 +6,42 @@
  */
 
 import React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent as createComponent$1 } from '@lit/react';
 import { M3eHeadingElement } from '@m3e/web/heading';
 
 /**
- * React binding for the `m3e-heading` Web Component from `@m3e/heading`.
+ * 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-heading` Web Component from `@m3e/web/heading`.
  *
  * This component renders the underlying `<m3e-heading>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.

package/dist/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../src/heading/Heading.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eHeadingElement } from \"@m3e/web/heading\";\r\nexport type { HeadingLevel, HeadingSize, HeadingVariant, M3eHeadingElement } from \"@m3e/web/heading\";\r\n\r\n/**\r\n * React binding for the `m3e-heading` Web Component from `@m3e/heading`.\r\n *\r\n * This component renders the underlying `<m3e-heading>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-heading>` instance for imperative access.\r\n *\r\n * See the `m3e-heading` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eHeading = createComponent({\r\n  tagName: \"m3e-heading\",\r\n  elementClass: M3eHeadingElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,eAAe,CAAC;AACxC,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAE,iBAAiB;AAC/B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"heading.js","sources":["../../src/utils/createComponent.ts","../../src/heading/Heading.ts"],"sourcesContent":["import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eHeadingElement } from \"@m3e/web/heading\";\r\nexport type { HeadingLevel, HeadingSize, HeadingVariant, M3eHeadingElement } from \"@m3e/web/heading\";\r\n\r\n/**\r\n * React binding for the `m3e-heading` Web Component from `@m3e/web/heading`.\r\n *\r\n * This component renders the underlying `<m3e-heading>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-heading>` instance for imperative access.\r\n *\r\n * See the `m3e-heading` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eHeading = createComponent({\r\n  tagName: \"m3e-heading\",\r\n  elementClass: M3eHeadingElement,\r\n  react: React,\r\n});\r\n"],"names":["createReactComponent"],"mappings":";;;;;;;;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACH;AACM,SAAU,eAAe,CAAmD,EAChF,KAAK,EACL,OAAO,EACP,YAAY,EACZ,MAAM,EACN,WAAW,GACG,EAAA;IACd,OAAO,OAAO,MAAM,KAAK;AACvB,UAAEA,iBAAoB,CAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE;UAC7C,IAAK;AAC9C;;ACjCA;;;;;;;;;;;;AAYG;AACI,MAAM,UAAU,GAAG,eAAe,CAAC;AACxC,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAE,iBAAiB;AAC/B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/heading.min.js

@@ -3,5 +3,5 @@
  * @license MIT
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
- */import e from"react";import{createComponent as t}from"@lit/react";import{M3eHeadingElement as m}from"@m3e/web/heading";const r=t({tagName:"m3e-heading",elementClass:m,react:e});export{r as M3eHeading};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eHeadingElement as a}from"@m3e/web/heading";const n=function({react:e,tagName:a,elementClass:n,events:m,displayName:r}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:n,events:m,displayName:r}):null}({tagName:"m3e-heading",elementClass:a,react:e});export{n as M3eHeading};
 //# sourceMappingURL=heading.min.js.map

package/dist/heading.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.min.js","sources":["../../src/heading/Heading.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eHeadingElement } from \"@m3e/web/heading\";\r\nexport type { HeadingLevel, HeadingSize, HeadingVariant, M3eHeadingElement } from \"@m3e/web/heading\";\r\n\r\n/**\r\n * React binding for the `m3e-heading` Web Component from `@m3e/heading`.\r\n *\r\n * This component renders the underlying `<m3e-heading>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-heading>` instance for imperative access.\r\n *\r\n * See the `m3e-heading` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eHeading = createComponent({\r\n  tagName: \"m3e-heading\",\r\n  elementClass: M3eHeadingElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eHeading","createComponent","tagName","elementClass","M3eHeadingElement","react","React"],"mappings":";;;;;0HAmBO,MAAMA,EAAaC,EAAgB,CACxCC,QAAS,cACTC,aAAcC,EACdC,MAAOC"}
+{"version":3,"file":"heading.min.js","sources":["../../src/heading/Heading.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eHeadingElement } from \"@m3e/web/heading\";\r\nexport type { HeadingLevel, HeadingSize, HeadingVariant, M3eHeadingElement } from \"@m3e/web/heading\";\r\n\r\n/**\r\n * React binding for the `m3e-heading` Web Component from `@m3e/web/heading`.\r\n *\r\n * This component renders the underlying `<m3e-heading>` element and exposes its\r\n * properties, attributes, and events through an idiomatic React interface.\r\n *\r\n * Props map directly to element properties, and event handlers receive the\r\n * native DOM events dispatched by the component. Refs are forwarded to the\r\n * underlying `<m3e-heading>` instance for imperative access.\r\n *\r\n * See the `m3e-heading` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eHeading = createComponent({\r\n  tagName: \"m3e-heading\",\r\n  elementClass: M3eHeadingElement,\r\n  react: React,\r\n});\r\n","import { createComponent as createReactComponent, EventName, Options, ReactWebComponent } from \"@lit/react\";\r\n\r\ntype EventNames = Record<string, EventName | string>;\r\n\r\n/**\r\n * Creates an SSR-safe React component for a custom element. Properties are distinguished\r\n * from attributes automatically, and events can be configured so they are added\r\n * to the custom element as event listeners.\r\n *\r\n * @param options An options bag containing the parameters needed to generate a\r\n * wrapped web component.\r\n *\r\n * @param options.react The React module, typically imported from the `react`\r\n * npm package.\r\n * @param options.tagName The custom element tag name registered via\r\n * `customElements.define`.\r\n * @param options.elementClass The custom element class registered via\r\n * `customElements.define`.\r\n * @param options.events An object listing events to which the component can\r\n * listen. The object keys are the event property names passed in via React\r\n * props and the object values are the names of the corresponding events\r\n * generated by the custom element. For example, given `{onactivate:\r\n * 'activate'}` an event function may be passed via the component's `onactivate`\r\n * prop and will be called when the custom element fires its `activate` event.\r\n * @param options.displayName A React component display name, used in debugging\r\n * messages. Default value is inferred from the name of custom element class\r\n * registered via `customElements.define`.\r\n */\r\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\r\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>({\r\n  react,\r\n  tagName,\r\n  elementClass,\r\n  events,\r\n  displayName,\r\n}: Options<I, E>): ReactWebComponent<I, E> {\r\n  return typeof window !== \"undefined\"\r\n    ? createReactComponent<I, E>({ react, tagName, elementClass, events, displayName })\r\n    : <ReactWebComponent<I, E>>(<unknown>null);\r\n}\r\n"],"names":["M3eHeading","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eHeadingElement","React"],"mappings":";;;;;0HAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpB0BG,CAAgB,CACxCN,QAAS,cACTC,aAAcM,EACdR,MAAOS"}