@m3e/react 2.0.0 → 2.0.2

package/dist/app-bar.js

@@ -6,11 +6,42 @@
  */
 
 import React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent as createComponent$1 } from '@lit/react';
 import { M3eAppBarElement } from '@m3e/web/app-bar';
 
 /**
- * React binding for the `m3e-app-bar` Web Component from `@m3e/app-bar`.
+ * Creates an SSR-safe React component for a custom element. Properties are distinguished
+ * from attributes automatically, and events can be configured so they are added
+ * to the custom element as event listeners.
+ *
+ * @param options An options bag containing the parameters needed to generate a
+ * wrapped web component.
+ *
+ * @param options.react The React module, typically imported from the `react`
+ * npm package.
+ * @param options.tagName The custom element tag name registered via
+ * `customElements.define`.
+ * @param options.elementClass The custom element class registered via
+ * `customElements.define`.
+ * @param options.events An object listing events to which the component can
+ * listen. The object keys are the event property names passed in via React
+ * props and the object values are the names of the corresponding events
+ * generated by the custom element. For example, given `{onactivate:
+ * 'activate'}` an event function may be passed via the component's `onactivate`
+ * prop and will be called when the custom element fires its `activate` event.
+ * @param options.displayName A React component display name, used in debugging
+ * messages. Default value is inferred from the name of custom element class
+ * registered via `customElements.define`.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+function createComponent({ react, tagName, elementClass, events, displayName, }) {
+    return typeof window !== "undefined"
+        ? createComponent$1({ react, tagName, elementClass, events, displayName })
+        : null;
+}
+
+/**
+ * React binding for the `m3e-app-bar` Web Component from `@m3e/web/app-bar`.
  *
  * This component renders the underlying `<m3e-app-bar>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.

package/dist/app-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-bar.js","sources":["../../src/app-bar/AppBar.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAppBarElement } from \"@m3e/web/app-bar\";\r\nexport type { AppBarSize, M3eAppBarElement } from \"@m3e/web/app-bar\";\r\n\r\n/**\r\n * React binding for the `m3e-app-bar` Web Component from `@m3e/app-bar`.\r\n *\r\n * This component renders the underlying `<m3e-app-bar>` 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-app-bar>` instance for imperative access.\r\n *\r\n * See the `m3e-app-bar` documentation in `@m3e/app-bar` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAppBar = createComponent({\r\n  tagName: \"m3e-app-bar\",\r\n  elementClass: M3eAppBarElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,SAAS,GAAG,eAAe,CAAC;AACvC,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAE,gBAAgB;AAC9B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"app-bar.js","sources":["../../src/utils/createComponent.ts","../../src/app-bar/AppBar.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 { M3eAppBarElement } from \"@m3e/web/app-bar\";\r\nexport type { AppBarSize, M3eAppBarElement } from \"@m3e/web/app-bar\";\r\n\r\n/**\r\n * React binding for the `m3e-app-bar` Web Component from `@m3e/web/app-bar`.\r\n *\r\n * This component renders the underlying `<m3e-app-bar>` 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-app-bar>` instance for imperative access.\r\n *\r\n * See the `m3e-app-bar` documentation in `@m3e/app-bar` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAppBar = createComponent({\r\n  tagName: \"m3e-app-bar\",\r\n  elementClass: M3eAppBarElement,\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,SAAS,GAAG,eAAe,CAAC;AACvC,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAE,gBAAgB;AAC9B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/app-bar.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{M3eAppBarElement as t}from"@m3e/web/app-bar";const a=r({tagName:"m3e-app-bar",elementClass:t,react:e});export{a as M3eAppBar};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eAppBarElement as a}from"@m3e/web/app-bar";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-app-bar",elementClass:a,react:e});export{m as M3eAppBar};
 //# sourceMappingURL=app-bar.min.js.map

package/dist/app-bar.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-bar.min.js","sources":["../../src/app-bar/AppBar.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAppBarElement } from \"@m3e/web/app-bar\";\r\nexport type { AppBarSize, M3eAppBarElement } from \"@m3e/web/app-bar\";\r\n\r\n/**\r\n * React binding for the `m3e-app-bar` Web Component from `@m3e/app-bar`.\r\n *\r\n * This component renders the underlying `<m3e-app-bar>` 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-app-bar>` instance for imperative access.\r\n *\r\n * See the `m3e-app-bar` documentation in `@m3e/app-bar` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAppBar = createComponent({\r\n  tagName: \"m3e-app-bar\",\r\n  elementClass: M3eAppBarElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eAppBar","createComponent","tagName","elementClass","M3eAppBarElement","react","React"],"mappings":";;;;;yHAmBO,MAAMA,EAAYC,EAAgB,CACvCC,QAAS,cACTC,aAAcC,EACdC,MAAOC"}
+{"version":3,"file":"app-bar.min.js","sources":["../../src/app-bar/AppBar.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eAppBarElement } from \"@m3e/web/app-bar\";\r\nexport type { AppBarSize, M3eAppBarElement } from \"@m3e/web/app-bar\";\r\n\r\n/**\r\n * React binding for the `m3e-app-bar` Web Component from `@m3e/web/app-bar`.\r\n *\r\n * This component renders the underlying `<m3e-app-bar>` 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-app-bar>` instance for imperative access.\r\n *\r\n * See the `m3e-app-bar` documentation in `@m3e/app-bar` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAppBar = createComponent({\r\n  tagName: \"m3e-app-bar\",\r\n  elementClass: M3eAppBarElement,\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":["M3eAppBar","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eAppBarElement","React"],"mappings":";;;;;yHAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpByBG,CAAgB,CACvCN,QAAS,cACTC,aAAcM,EACdR,MAAOS"}

package/dist/autocomplete.js

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

package/dist/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sources":["../../src/autocomplete/Autocomplete.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAutocompleteElement } from \"@m3e/web/autocomplete\";\r\nexport type { M3eAutocompleteElement } from \"@m3e/web/autocomplete\";\r\n\r\n/**\r\n * React binding for the `m3e-autocomplete` Web Component from `@m3e/autocomplete`.\r\n *\r\n * This component renders the underlying `<m3e-autocomplete>` 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-autocomplete>` instance for imperative access.\r\n *\r\n * See the `m3e-autocomplete` documentation in `@m3e/autocomplete` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAutocomplete = createComponent({\r\n  tagName: \"m3e-autocomplete\",\r\n  elementClass: M3eAutocompleteElement,\r\n  react: React,\r\n  events: {\r\n    onToggle: \"toggle\",\r\n  },\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,eAAe,GAAG,eAAe,CAAC;AAC7C,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAE,sBAAsB;AACpC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"autocomplete.js","sources":["../../src/utils/createComponent.ts","../../src/autocomplete/Autocomplete.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 { M3eAutocompleteElement } from \"@m3e/web/autocomplete\";\r\nexport type { M3eAutocompleteElement } from \"@m3e/web/autocomplete\";\r\n\r\n/**\r\n * React binding for the `m3e-autocomplete` Web Component from `@m3e/web/autocomplete`.\r\n *\r\n * This component renders the underlying `<m3e-autocomplete>` 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-autocomplete>` instance for imperative access.\r\n *\r\n * See the `m3e-autocomplete` documentation in `@m3e/autocomplete` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAutocomplete = createComponent({\r\n  tagName: \"m3e-autocomplete\",\r\n  elementClass: M3eAutocompleteElement,\r\n  react: React,\r\n  events: {\r\n    onToggle: \"toggle\",\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,eAAe,GAAG,eAAe,CAAC;AAC7C,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAE,sBAAsB;AACpC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;;;"}

package/dist/autocomplete.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{M3eAutocompleteElement as o}from"@m3e/web/autocomplete";const m=t({tagName:"m3e-autocomplete",elementClass:o,react:e,events:{onToggle:"toggle"}});export{m as M3eAutocomplete};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eAutocompleteElement as a}from"@m3e/web/autocomplete";const o=function({react:e,tagName:a,elementClass:o,events:m,displayName:n}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:o,events:m,displayName:n}):null}({tagName:"m3e-autocomplete",elementClass:a,react:e,events:{onToggle:"toggle"}});export{o as M3eAutocomplete};
 //# sourceMappingURL=autocomplete.min.js.map

package/dist/autocomplete.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.min.js","sources":["../../src/autocomplete/Autocomplete.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAutocompleteElement } from \"@m3e/web/autocomplete\";\r\nexport type { M3eAutocompleteElement } from \"@m3e/web/autocomplete\";\r\n\r\n/**\r\n * React binding for the `m3e-autocomplete` Web Component from `@m3e/autocomplete`.\r\n *\r\n * This component renders the underlying `<m3e-autocomplete>` 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-autocomplete>` instance for imperative access.\r\n *\r\n * See the `m3e-autocomplete` documentation in `@m3e/autocomplete` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAutocomplete = createComponent({\r\n  tagName: \"m3e-autocomplete\",\r\n  elementClass: M3eAutocompleteElement,\r\n  react: React,\r\n  events: {\r\n    onToggle: \"toggle\",\r\n  },\r\n});\r\n"],"names":["M3eAutocomplete","createComponent","tagName","elementClass","M3eAutocompleteElement","react","React","events","onToggle"],"mappings":";;;;;oIAmBO,MAAMA,EAAkBC,EAAgB,CAC7CC,QAAS,mBACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,SAAU"}
+{"version":3,"file":"autocomplete.min.js","sources":["../../src/autocomplete/Autocomplete.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eAutocompleteElement } from \"@m3e/web/autocomplete\";\r\nexport type { M3eAutocompleteElement } from \"@m3e/web/autocomplete\";\r\n\r\n/**\r\n * React binding for the `m3e-autocomplete` Web Component from `@m3e/web/autocomplete`.\r\n *\r\n * This component renders the underlying `<m3e-autocomplete>` 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-autocomplete>` instance for imperative access.\r\n *\r\n * See the `m3e-autocomplete` documentation in `@m3e/autocomplete` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAutocomplete = createComponent({\r\n  tagName: \"m3e-autocomplete\",\r\n  elementClass: M3eAutocompleteElement,\r\n  react: React,\r\n  events: {\r\n    onToggle: \"toggle\",\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":["M3eAutocomplete","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eAutocompleteElement","React","onToggle"],"mappings":";;;;;oIAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpB+BG,CAAgB,CAC7CN,QAAS,mBACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,SAAU"}

package/dist/avatar.js

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

package/dist/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../src/avatar/Avatar.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAvatarElement } from \"@m3e/web/avatar\";\r\nexport type { M3eAvatarElement } from \"@m3e/web/avatar\";\r\n/**\r\n * React binding for the `m3e-avatar` Web Component from `@m3e/avatar`.\r\n *\r\n * This component renders the underlying `<m3e-avatar>` 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-avatar>` instance for imperative access.\r\n *\r\n * See the `m3e-avatar` documentation in `@m3e/avatar` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAvatar = createComponent({\r\n  tagName: \"m3e-avatar\",\r\n  elementClass: M3eAvatarElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAKA;;;;;;;;;;;;AAYG;AACI,MAAM,SAAS,GAAG,eAAe,CAAC;AACvC,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAE,gBAAgB;AAC9B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"avatar.js","sources":["../../src/utils/createComponent.ts","../../src/avatar/Avatar.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 { M3eAvatarElement } from \"@m3e/web/avatar\";\r\nexport type { M3eAvatarElement } from \"@m3e/web/avatar\";\r\n/**\r\n * React binding for the `m3e-avatar` Web Component from `@m3e/web/avatar`.\r\n *\r\n * This component renders the underlying `<m3e-avatar>` 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-avatar>` instance for imperative access.\r\n *\r\n * See the `m3e-avatar` documentation in `@m3e/avatar` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAvatar = createComponent({\r\n  tagName: \"m3e-avatar\",\r\n  elementClass: M3eAvatarElement,\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;;AClCA;;;;;;;;;;;;AAYG;AACI,MAAM,SAAS,GAAG,eAAe,CAAC;AACvC,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAE,gBAAgB;AAC9B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/avatar.min.js

@@ -3,5 +3,5 @@
  * @license MIT
  * Copyright (c) 2025 matraic
  * See LICENSE file in the project root for full license text.
- */import t from"react";import{createComponent as e}from"@lit/react";import{M3eAvatarElement as a}from"@m3e/web/avatar";const r=e({tagName:"m3e-avatar",elementClass:a,react:t});export{r as M3eAvatar};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eAvatarElement as a}from"@m3e/web/avatar";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-avatar",elementClass:a,react:e});export{m as M3eAvatar};
 //# sourceMappingURL=avatar.min.js.map

package/dist/avatar.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.min.js","sources":["../../src/avatar/Avatar.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eAvatarElement } from \"@m3e/web/avatar\";\r\nexport type { M3eAvatarElement } from \"@m3e/web/avatar\";\r\n/**\r\n * React binding for the `m3e-avatar` Web Component from `@m3e/avatar`.\r\n *\r\n * This component renders the underlying `<m3e-avatar>` 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-avatar>` instance for imperative access.\r\n *\r\n * See the `m3e-avatar` documentation in `@m3e/avatar` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAvatar = createComponent({\r\n  tagName: \"m3e-avatar\",\r\n  elementClass: M3eAvatarElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eAvatar","createComponent","tagName","elementClass","M3eAvatarElement","react","React"],"mappings":";;;;;wHAkBO,MAAMA,EAAYC,EAAgB,CACvCC,QAAS,aACTC,aAAcC,EACdC,MAAOC"}
+{"version":3,"file":"avatar.min.js","sources":["../../src/avatar/Avatar.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eAvatarElement } from \"@m3e/web/avatar\";\r\nexport type { M3eAvatarElement } from \"@m3e/web/avatar\";\r\n/**\r\n * React binding for the `m3e-avatar` Web Component from `@m3e/web/avatar`.\r\n *\r\n * This component renders the underlying `<m3e-avatar>` 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-avatar>` instance for imperative access.\r\n *\r\n * See the `m3e-avatar` documentation in `@m3e/avatar` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eAvatar = createComponent({\r\n  tagName: \"m3e-avatar\",\r\n  elementClass: M3eAvatarElement,\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":["M3eAvatar","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eAvatarElement","React"],"mappings":";;;;;wHAkBO,MAAMA,ECWP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDrByBG,CAAgB,CACvCN,QAAS,aACTC,aAAcM,EACdR,MAAOS"}

package/dist/badge.js

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

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../src/badge/Badge.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eBadgeElement } from \"@m3e/web/badge\";\r\nexport type { BadgeSize, BadgePosition, M3eBadgeElement } from \"@m3e/web/badge\";\r\n\r\n/**\r\n * React binding for the `m3e-badge` Web Component from `@m3e/badge`.\r\n *\r\n * This component renders the underlying `<m3e-badge>` 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-badge>` instance for imperative access.\r\n *\r\n * See the `m3e-badge` documentation in `@m3e/badge` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eBadge = createComponent({\r\n  tagName: \"m3e-badge\",\r\n  elementClass: M3eBadgeElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,QAAQ,GAAG,eAAe,CAAC;AACtC,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"badge.js","sources":["../../src/utils/createComponent.ts","../../src/badge/Badge.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 { M3eBadgeElement } from \"@m3e/web/badge\";\r\nexport type { BadgeSize, BadgePosition, M3eBadgeElement } from \"@m3e/web/badge\";\r\n\r\n/**\r\n * React binding for the `m3e-badge` Web Component from `@m3e/web/badge`.\r\n *\r\n * This component renders the underlying `<m3e-badge>` 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-badge>` instance for imperative access.\r\n *\r\n * See the `m3e-badge` documentation in `@m3e/badge` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eBadge = createComponent({\r\n  tagName: \"m3e-badge\",\r\n  elementClass: M3eBadgeElement,\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,QAAQ,GAAG,eAAe,CAAC;AACtC,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/badge.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{M3eBadgeElement as m}from"@m3e/web/badge";const r=t({tagName:"m3e-badge",elementClass:m,react:e});export{r as M3eBadge};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eBadgeElement as a}from"@m3e/web/badge";const m=function({react:e,tagName:a,elementClass:m,events:n,displayName:r}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:m,events:n,displayName:r}):null}({tagName:"m3e-badge",elementClass:a,react:e});export{m as M3eBadge};
 //# sourceMappingURL=badge.min.js.map

package/dist/badge.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.min.js","sources":["../../src/badge/Badge.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eBadgeElement } from \"@m3e/web/badge\";\r\nexport type { BadgeSize, BadgePosition, M3eBadgeElement } from \"@m3e/web/badge\";\r\n\r\n/**\r\n * React binding for the `m3e-badge` Web Component from `@m3e/badge`.\r\n *\r\n * This component renders the underlying `<m3e-badge>` 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-badge>` instance for imperative access.\r\n *\r\n * See the `m3e-badge` documentation in `@m3e/badge` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eBadge = createComponent({\r\n  tagName: \"m3e-badge\",\r\n  elementClass: M3eBadgeElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eBadge","createComponent","tagName","elementClass","M3eBadgeElement","react","React"],"mappings":";;;;;sHAmBO,MAAMA,EAAWC,EAAgB,CACtCC,QAAS,YACTC,aAAcC,EACdC,MAAOC"}
+{"version":3,"file":"badge.min.js","sources":["../../src/badge/Badge.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eBadgeElement } from \"@m3e/web/badge\";\r\nexport type { BadgeSize, BadgePosition, M3eBadgeElement } from \"@m3e/web/badge\";\r\n\r\n/**\r\n * React binding for the `m3e-badge` Web Component from `@m3e/web/badge`.\r\n *\r\n * This component renders the underlying `<m3e-badge>` 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-badge>` instance for imperative access.\r\n *\r\n * See the `m3e-badge` documentation in `@m3e/badge` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eBadge = createComponent({\r\n  tagName: \"m3e-badge\",\r\n  elementClass: M3eBadgeElement,\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":["M3eBadge","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eBadgeElement","React"],"mappings":";;;;;sHAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpBwBG,CAAgB,CACtCN,QAAS,YACTC,aAAcM,EACdR,MAAOS"}

package/dist/bottom-sheet.js

@@ -6,11 +6,42 @@
  */
 
 import React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent as createComponent$1 } from '@lit/react';
 import { M3eBottomSheetElement, M3eBottomSheetActionElement, M3eBottomSheetTriggerElement } from '@m3e/web/bottom-sheet';
 
 /**
- * React binding for the `m3e-bottom-sheet` Web Component from `@m3e/bottom-sheet`.
+ * 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-bottom-sheet` Web Component from `@m3e/web/bottom-sheet`.
  *
  * This component renders the underlying `<m3e-bottom-sheet>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.
@@ -36,7 +67,7 @@ const M3eBottomSheet = createComponent({
 });
 
 /**
- * React binding for the `m3e-bottom-sheet-action` Web Component from `@m3e/bottom-sheet`.
+ * React binding for the `m3e-bottom-sheet-action` Web Component from `@m3e/web/bottom-sheet`.
  *
  * This component renders the underlying `<m3e-bottom-sheet-action>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.
@@ -55,7 +86,7 @@ const M3eBottomSheetAction = createComponent({
 });
 
 /**
- * React binding for the `m3e-bottom-sheet-trigger` Web Component from `@m3e/bottom-sheet`.
+ * React binding for the `m3e-bottom-sheet-trigger` Web Component from `@m3e/web/bottom-sheet`.
  *
  * This component renders the underlying `<m3e-bottom-sheet-trigger>` element and exposes its
  * properties, attributes, and events through an idiomatic React interface.

package/dist/bottom-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-sheet.js","sources":["../../src/bottom-sheet/BottomSheet.ts","../../src/bottom-sheet/BottomSheetAction.ts","../../src/bottom-sheet/BottomSheetTrigger.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eBottomSheetElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetElement } from \"@m3e/web/bottom-sheet\";\r\n/**\r\n * React binding for the `m3e-bottom-sheet` Web Component from `@m3e/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet>` 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-bottom-sheet>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheet = createComponent({\r\n  tagName: \"m3e-bottom-sheet\",\r\n  elementClass: M3eBottomSheetElement,\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    onCancel: \"cancel\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eBottomSheetActionElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetActionElement } from \"@m3e/web/bottom-sheet\";\r\n\r\n/**\r\n * React binding for the `m3e-bottom-sheet-action` Web Component from `@m3e/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet-action>` 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-bottom-sheet-action>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet-action` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheetAction = createComponent({\r\n  tagName: \"m3e-bottom-sheet-action\",\r\n  elementClass: M3eBottomSheetActionElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eBottomSheetTriggerElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetTriggerElement } from \"@m3e/web/bottom-sheet\";\r\n\r\n/**\r\n * React binding for the `m3e-bottom-sheet-trigger` Web Component from `@m3e/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet-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-bottom-sheet-trigger>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet-trigger` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheetTrigger = createComponent({\r\n  tagName: \"m3e-bottom-sheet-trigger\",\r\n  elementClass: M3eBottomSheetTriggerElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAKA;;;;;;;;;;;;AAYG;AACI,MAAM,cAAc,GAAG,eAAe,CAAC;AAC5C,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAE,qBAAqB;AACnC,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;AAClB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACvBD;;;;;;;;;;;;AAYG;AACI,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAClD,IAAA,OAAO,EAAE,yBAAyB;AAClC,IAAA,YAAY,EAAE,2BAA2B;AACzC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACjBD;;;;;;;;;;;;AAYG;AACI,MAAM,qBAAqB,GAAG,eAAe,CAAC;AACnD,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,YAAY,EAAE,4BAA4B;AAC1C,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"bottom-sheet.js","sources":["../../src/utils/createComponent.ts","../../src/bottom-sheet/BottomSheet.ts","../../src/bottom-sheet/BottomSheetAction.ts","../../src/bottom-sheet/BottomSheetTrigger.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 { M3eBottomSheetElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetElement } from \"@m3e/web/bottom-sheet\";\r\n/**\r\n * React binding for the `m3e-bottom-sheet` Web Component from `@m3e/web/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet>` 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-bottom-sheet>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheet = createComponent({\r\n  tagName: \"m3e-bottom-sheet\",\r\n  elementClass: M3eBottomSheetElement,\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    onCancel: \"cancel\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eBottomSheetActionElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetActionElement } from \"@m3e/web/bottom-sheet\";\r\n\r\n/**\r\n * React binding for the `m3e-bottom-sheet-action` Web Component from `@m3e/web/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet-action>` 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-bottom-sheet-action>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet-action` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheetAction = createComponent({\r\n  tagName: \"m3e-bottom-sheet-action\",\r\n  elementClass: M3eBottomSheetActionElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eBottomSheetTriggerElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetTriggerElement } from \"@m3e/web/bottom-sheet\";\r\n\r\n/**\r\n * React binding for the `m3e-bottom-sheet-trigger` Web Component from `@m3e/web/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet-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-bottom-sheet-trigger>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet-trigger` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheetTrigger = createComponent({\r\n  tagName: \"m3e-bottom-sheet-trigger\",\r\n  elementClass: M3eBottomSheetTriggerElement,\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;;AClCA;;;;;;;;;;;;AAYG;AACI,MAAM,cAAc,GAAG,eAAe,CAAC;AAC5C,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAE,qBAAqB;AACnC,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;AAClB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACvBD;;;;;;;;;;;;AAYG;AACI,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAClD,IAAA,OAAO,EAAE,yBAAyB;AAClC,IAAA,YAAY,EAAE,2BAA2B;AACzC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACjBD;;;;;;;;;;;;AAYG;AACI,MAAM,qBAAqB,GAAG,eAAe,CAAC;AACnD,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,YAAY,EAAE,4BAA4B;AAC1C,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/bottom-sheet.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{M3eBottomSheetElement as o,M3eBottomSheetActionElement as n,M3eBottomSheetTriggerElement as m}from"@m3e/web/bottom-sheet";const a=t({tagName:"m3e-bottom-sheet",elementClass:o,react:e,events:{onOpening:"opening",onOpened:"opened",onClosing:"closing",onClosed:"closed",onCancel:"cancel"}}),s=t({tagName:"m3e-bottom-sheet-action",elementClass:n,react:e}),l=t({tagName:"m3e-bottom-sheet-trigger",elementClass:m,react:e});export{a as M3eBottomSheet,s as M3eBottomSheetAction,l as M3eBottomSheetTrigger};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eBottomSheetElement as n,M3eBottomSheetActionElement as o,M3eBottomSheetTriggerElement as a}from"@m3e/web/bottom-sheet";function m({react:e,tagName:n,elementClass:o,events:a,displayName:m}){return"undefined"!=typeof window?t({react:e,tagName:n,elementClass:o,events:a,displayName:m}):null}const s=m({tagName:"m3e-bottom-sheet",elementClass:n,react:e,events:{onOpening:"opening",onOpened:"opened",onClosing:"closing",onClosed:"closed",onCancel:"cancel"}}),l=m({tagName:"m3e-bottom-sheet-action",elementClass:o,react:e}),r=m({tagName:"m3e-bottom-sheet-trigger",elementClass:a,react:e});export{s as M3eBottomSheet,l as M3eBottomSheetAction,r as M3eBottomSheetTrigger};
 //# sourceMappingURL=bottom-sheet.min.js.map

package/dist/bottom-sheet.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-sheet.min.js","sources":["../../src/bottom-sheet/BottomSheet.ts","../../src/bottom-sheet/BottomSheetAction.ts","../../src/bottom-sheet/BottomSheetTrigger.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eBottomSheetElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetElement } from \"@m3e/web/bottom-sheet\";\r\n/**\r\n * React binding for the `m3e-bottom-sheet` Web Component from `@m3e/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet>` 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-bottom-sheet>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheet = createComponent({\r\n  tagName: \"m3e-bottom-sheet\",\r\n  elementClass: M3eBottomSheetElement,\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    onCancel: \"cancel\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eBottomSheetActionElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetActionElement } from \"@m3e/web/bottom-sheet\";\r\n\r\n/**\r\n * React binding for the `m3e-bottom-sheet-action` Web Component from `@m3e/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet-action>` 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-bottom-sheet-action>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet-action` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheetAction = createComponent({\r\n  tagName: \"m3e-bottom-sheet-action\",\r\n  elementClass: M3eBottomSheetActionElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eBottomSheetTriggerElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetTriggerElement } from \"@m3e/web/bottom-sheet\";\r\n\r\n/**\r\n * React binding for the `m3e-bottom-sheet-trigger` Web Component from `@m3e/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet-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-bottom-sheet-trigger>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet-trigger` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheetTrigger = createComponent({\r\n  tagName: \"m3e-bottom-sheet-trigger\",\r\n  elementClass: M3eBottomSheetTriggerElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eBottomSheet","createComponent","tagName","elementClass","M3eBottomSheetElement","react","React","events","onOpening","onOpened","onClosing","onClosed","onCancel","M3eBottomSheetAction","M3eBottomSheetActionElement","M3eBottomSheetTrigger","M3eBottomSheetTriggerElement"],"mappings":";;;;;sMAkBO,MAAMA,EAAiBC,EAAgB,CAC5CC,QAAS,mBACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,UAAW,UACXC,SAAU,SACVC,UAAW,UACXC,SAAU,SACVC,SAAU,YCRDC,EAAuBZ,EAAgB,CAClDC,QAAS,0BACTC,aAAcW,EACdT,MAAOC,ICHIS,EAAwBd,EAAgB,CACnDC,QAAS,2BACTC,aAAca,EACdX,MAAOC"}
+{"version":3,"file":"bottom-sheet.min.js","sources":["../../src/utils/createComponent.ts","../../src/bottom-sheet/BottomSheet.ts","../../src/bottom-sheet/BottomSheetAction.ts","../../src/bottom-sheet/BottomSheetTrigger.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 { M3eBottomSheetElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetElement } from \"@m3e/web/bottom-sheet\";\r\n/**\r\n * React binding for the `m3e-bottom-sheet` Web Component from `@m3e/web/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet>` 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-bottom-sheet>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheet = createComponent({\r\n  tagName: \"m3e-bottom-sheet\",\r\n  elementClass: M3eBottomSheetElement,\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    onCancel: \"cancel\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eBottomSheetActionElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetActionElement } from \"@m3e/web/bottom-sheet\";\r\n\r\n/**\r\n * React binding for the `m3e-bottom-sheet-action` Web Component from `@m3e/web/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet-action>` 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-bottom-sheet-action>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet-action` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheetAction = createComponent({\r\n  tagName: \"m3e-bottom-sheet-action\",\r\n  elementClass: M3eBottomSheetActionElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eBottomSheetTriggerElement } from \"@m3e/web/bottom-sheet\";\r\nexport type { M3eBottomSheetTriggerElement } from \"@m3e/web/bottom-sheet\";\r\n\r\n/**\r\n * React binding for the `m3e-bottom-sheet-trigger` Web Component from `@m3e/web/bottom-sheet`.\r\n *\r\n * This component renders the underlying `<m3e-bottom-sheet-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-bottom-sheet-trigger>` instance for imperative access.\r\n *\r\n * See the `m3e-bottom-sheet-trigger` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eBottomSheetTrigger = createComponent({\r\n  tagName: \"m3e-bottom-sheet-trigger\",\r\n  elementClass: M3eBottomSheetTriggerElement,\r\n  react: React,\r\n});\r\n"],"names":["createComponent","react","tagName","elementClass","events","displayName","window","createReactComponent","M3eBottomSheet","M3eBottomSheetElement","React","onOpening","onOpened","onClosing","onClosed","onCancel","M3eBottomSheetAction","M3eBottomSheetActionElement","M3eBottomSheetTrigger","M3eBottomSheetTriggerElement"],"mappings":";;;;;sMA6BM,SAAUA,GAAkEC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CCrBO,MAAMG,EAAiBR,EAAgB,CAC5CE,QAAS,mBACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,UAAW,UACXC,SAAU,SACVC,UAAW,UACXC,SAAU,SACVC,SAAU,YCRDC,EAAuBhB,EAAgB,CAClDE,QAAS,0BACTC,aAAcc,EACdhB,MAAOS,ICHIQ,EAAwBlB,EAAgB,CACnDE,QAAS,2BACTC,aAAcgB,EACdlB,MAAOS"}

package/dist/button-group.js

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

package/dist/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../src/button-group/ButtonGroup.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eButtonGroupElement } from \"@m3e/web/button-group\";\r\nexport type { ButtonGroupSize, ButtonGroupVariant, M3eButtonGroupElement } from \"@m3e/web/button-group\";\r\n\r\n/**\r\n * React binding for the `m3e-button-group` Web Component from `@m3e/button-group`.\r\n *\r\n * This component renders the underlying `<m3e-button-group>` 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-button-group>` instance for imperative access.\r\n *\r\n * See the `m3e-button-group` documentation in `@m3e/button-group` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eButtonGroup = createComponent({\r\n  tagName: \"m3e-button-group\",\r\n  elementClass: M3eButtonGroupElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,cAAc,GAAG,eAAe,CAAC;AAC5C,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAE,qBAAqB;AACnC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"button-group.js","sources":["../../src/utils/createComponent.ts","../../src/button-group/ButtonGroup.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 { M3eButtonGroupElement } from \"@m3e/web/button-group\";\r\nexport type { ButtonGroupSize, ButtonGroupVariant, M3eButtonGroupElement } from \"@m3e/web/button-group\";\r\n\r\n/**\r\n * React binding for the `m3e-button-group` Web Component from `@m3e/web/button-group`.\r\n *\r\n * This component renders the underlying `<m3e-button-group>` 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-button-group>` instance for imperative access.\r\n *\r\n * See the `m3e-button-group` documentation in `@m3e/button-group` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eButtonGroup = createComponent({\r\n  tagName: \"m3e-button-group\",\r\n  elementClass: M3eButtonGroupElement,\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,cAAc,GAAG,eAAe,CAAC;AAC5C,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAE,qBAAqB;AACnC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

package/dist/button-group.min.js

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

package/dist/button-group.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.min.js","sources":["../../src/button-group/ButtonGroup.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eButtonGroupElement } from \"@m3e/web/button-group\";\r\nexport type { ButtonGroupSize, ButtonGroupVariant, M3eButtonGroupElement } from \"@m3e/web/button-group\";\r\n\r\n/**\r\n * React binding for the `m3e-button-group` Web Component from `@m3e/button-group`.\r\n *\r\n * This component renders the underlying `<m3e-button-group>` 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-button-group>` instance for imperative access.\r\n *\r\n * See the `m3e-button-group` documentation in `@m3e/button-group` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eButtonGroup = createComponent({\r\n  tagName: \"m3e-button-group\",\r\n  elementClass: M3eButtonGroupElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eButtonGroup","createComponent","tagName","elementClass","M3eButtonGroupElement","react","React"],"mappings":";;;;;mIAmBO,MAAMA,EAAiBC,EAAgB,CAC5CC,QAAS,mBACTC,aAAcC,EACdC,MAAOC"}
+{"version":3,"file":"button-group.min.js","sources":["../../src/button-group/ButtonGroup.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eButtonGroupElement } from \"@m3e/web/button-group\";\r\nexport type { ButtonGroupSize, ButtonGroupVariant, M3eButtonGroupElement } from \"@m3e/web/button-group\";\r\n\r\n/**\r\n * React binding for the `m3e-button-group` Web Component from `@m3e/web/button-group`.\r\n *\r\n * This component renders the underlying `<m3e-button-group>` 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-button-group>` instance for imperative access.\r\n *\r\n * See the `m3e-button-group` documentation in `@m3e/button-group` for full details on behavior,\r\n * styling, accessibility, and supported events.\r\n */\r\nexport const M3eButtonGroup = createComponent({\r\n  tagName: \"m3e-button-group\",\r\n  elementClass: M3eButtonGroupElement,\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":["M3eButtonGroup","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eButtonGroupElement","React"],"mappings":";;;;;mIAmBO,MAAMA,ECUP,UAA4EC,MAChFA,EAAKC,QACLA,EAAOC,aACPA,EAAYC,OACZA,EAAMC,YACNA,IAEA,MAAyB,oBAAXC,OACVC,EAA2B,CAAEN,QAAOC,UAASC,eAAcC,SAAQC,gBAChC,IACzC,CDpB8BG,CAAgB,CAC5CN,QAAS,mBACTC,aAAcM,EACdR,MAAOS"}