@m3e/react 2.0.0 → 2.0.1

package/dist/paginator.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.min.js","sources":["../../src/paginator/Paginator.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent, EventName } from \"@lit/react\";\r\n\r\nimport { M3ePaginatorElement, PageEventDetail } from \"@m3e/web/paginator\";\r\nexport type { M3ePaginatorElement, PageEventDetail } from \"@m3e/web/paginator\";\r\n\r\n/**\r\n * React binding for the `m3e-paginator` Web Component from `@m3e/paginator`.\r\n *\r\n * This component renders the underlying `<m3e-paginator>` 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-paginator>` instance for imperative access.\r\n *\r\n * See the `m3e-paginator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3ePaginator = createComponent({\r\n  tagName: \"m3e-paginator\",\r\n  elementClass: M3ePaginatorElement,\r\n  react: React,\r\n  events: {\r\n    onPage: \"page\" as EventName<CustomEvent<PageEventDetail>>,\r\n  },\r\n});\r\n"],"names":["M3ePaginator","createComponent","tagName","elementClass","M3ePaginatorElement","react","React","events","onPage"],"mappings":";;;;;8HAmBO,MAAMA,EAAeC,EAAgB,CAC1CC,QAAS,gBACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,OAAQ"}
+{"version":3,"file":"paginator.min.js","sources":["../../src/paginator/Paginator.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent, EventName } from \"@lit/react\";\r\n\r\nimport { M3ePaginatorElement, PageEventDetail } from \"@m3e/web/paginator\";\r\nexport type { M3ePaginatorElement, PageEventDetail } from \"@m3e/web/paginator\";\r\n\r\n/**\r\n * React binding for the `m3e-paginator` Web Component from `@m3e/web/paginator`.\r\n *\r\n * This component renders the underlying `<m3e-paginator>` 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-paginator>` instance for imperative access.\r\n *\r\n * See the `m3e-paginator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3ePaginator = createComponent({\r\n  tagName: \"m3e-paginator\",\r\n  elementClass: M3ePaginatorElement,\r\n  react: React,\r\n  events: {\r\n    onPage: \"page\" as EventName<CustomEvent<PageEventDetail>>,\r\n  },\r\n});\r\n"],"names":["M3ePaginator","createComponent","tagName","elementClass","M3ePaginatorElement","react","React","events","onPage"],"mappings":";;;;;8HAmBO,MAAMA,EAAeC,EAAgB,CAC1CC,QAAS,gBACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,OAAQ"}

package/dist/progress-indicator.js

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

package/dist/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sources":["../../src/progress-indicator/CircularProgressIndicator.ts","../../src/progress-indicator/LinearProgressIndicator.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eCircularProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\nexport type { M3eCircularProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\n\r\n/**\r\n * React binding for the `m3e-circular-progress-indicator` Web Component from `@m3e/progress-indicator`.\r\n *\r\n * This component renders the underlying `<m3e-circular-progress-indicator>` 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-circular-progress-indicator>` instance for imperative access.\r\n *\r\n * See the `m3e-circular-progress-indicator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eCircularProgressIndicator = createComponent({\r\n  tagName: \"m3e-circular-progress-indicator\",\r\n  elementClass: M3eCircularProgressIndicatorElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eLinearProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\nexport type {\r\n  ProgressIndicatorVariant,\r\n  LinearProgressMode,\r\n  M3eLinearProgressIndicatorElement,\r\n} from \"@m3e/web/progress-indicator\";\r\n\r\n/**\r\n * React binding for the `m3e-linear-progress-indicator` Web Component from `@m3e/progress-indicator`.\r\n *\r\n * This component renders the underlying `<m3e-linear-progress-indicator>` 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-linear-progress-indicator>` instance for imperative access.\r\n *\r\n * See the `m3e-linear-progress-indicator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eLinearProgressIndicator = createComponent({\r\n  tagName: \"m3e-linear-progress-indicator\",\r\n  elementClass: M3eLinearProgressIndicatorElement,\r\n  react: React,\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,4BAA4B,GAAG,eAAe,CAAC;AAC1D,IAAA,OAAO,EAAE,iCAAiC;AAC1C,IAAA,YAAY,EAAE,mCAAmC;AACjD,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACbD;;;;;;;;;;;;AAYG;AACI,MAAM,0BAA0B,GAAG,eAAe,CAAC;AACxD,IAAA,OAAO,EAAE,+BAA+B;AACxC,IAAA,YAAY,EAAE,iCAAiC;AAC/C,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}
+{"version":3,"file":"progress-indicator.js","sources":["../../src/utils/createComponent.ts","../../src/progress-indicator/CircularProgressIndicator.ts","../../src/progress-indicator/LinearProgressIndicator.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 { M3eCircularProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\nexport type { M3eCircularProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\n\r\n/**\r\n * React binding for the `m3e-circular-progress-indicator` Web Component from `@m3e/web/progress-indicator`.\r\n *\r\n * This component renders the underlying `<m3e-circular-progress-indicator>` 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-circular-progress-indicator>` instance for imperative access.\r\n *\r\n * See the `m3e-circular-progress-indicator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eCircularProgressIndicator = createComponent({\r\n  tagName: \"m3e-circular-progress-indicator\",\r\n  elementClass: M3eCircularProgressIndicatorElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eLinearProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\nexport type {\r\n  ProgressIndicatorVariant,\r\n  LinearProgressMode,\r\n  M3eLinearProgressIndicatorElement,\r\n} from \"@m3e/web/progress-indicator\";\r\n\r\n/**\r\n * React binding for the `m3e-linear-progress-indicator` Web Component from `@m3e/web/progress-indicator`.\r\n *\r\n * This component renders the underlying `<m3e-linear-progress-indicator>` 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-linear-progress-indicator>` instance for imperative access.\r\n *\r\n * See the `m3e-linear-progress-indicator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eLinearProgressIndicator = createComponent({\r\n  tagName: \"m3e-linear-progress-indicator\",\r\n  elementClass: M3eLinearProgressIndicatorElement,\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,4BAA4B,GAAG,eAAe,CAAC;AAC1D,IAAA,OAAO,EAAE,iCAAiC;AAC1C,IAAA,YAAY,EAAE,mCAAmC;AACjD,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;ACbD;;;;;;;;;;;;AAYG;AACI,MAAM,0BAA0B,GAAG,eAAe,CAAC;AACxD,IAAA,OAAO,EAAE,+BAA+B;AACxC,IAAA,YAAY,EAAE,iCAAiC;AAC/C,IAAA,KAAK,EAAE,KAAK;AACb,CAAA;;;;"}

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

package/dist/progress-indicator.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.min.js","sources":["../../src/progress-indicator/CircularProgressIndicator.ts","../../src/progress-indicator/LinearProgressIndicator.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eCircularProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\nexport type { M3eCircularProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\n\r\n/**\r\n * React binding for the `m3e-circular-progress-indicator` Web Component from `@m3e/progress-indicator`.\r\n *\r\n * This component renders the underlying `<m3e-circular-progress-indicator>` 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-circular-progress-indicator>` instance for imperative access.\r\n *\r\n * See the `m3e-circular-progress-indicator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eCircularProgressIndicator = createComponent({\r\n  tagName: \"m3e-circular-progress-indicator\",\r\n  elementClass: M3eCircularProgressIndicatorElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eLinearProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\nexport type {\r\n  ProgressIndicatorVariant,\r\n  LinearProgressMode,\r\n  M3eLinearProgressIndicatorElement,\r\n} from \"@m3e/web/progress-indicator\";\r\n\r\n/**\r\n * React binding for the `m3e-linear-progress-indicator` Web Component from `@m3e/progress-indicator`.\r\n *\r\n * This component renders the underlying `<m3e-linear-progress-indicator>` 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-linear-progress-indicator>` instance for imperative access.\r\n *\r\n * See the `m3e-linear-progress-indicator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eLinearProgressIndicator = createComponent({\r\n  tagName: \"m3e-linear-progress-indicator\",\r\n  elementClass: M3eLinearProgressIndicatorElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eCircularProgressIndicator","createComponent","tagName","elementClass","M3eCircularProgressIndicatorElement","react","React","M3eLinearProgressIndicator","M3eLinearProgressIndicatorElement"],"mappings":";;;;;8LAmBO,MAAMA,EAA+BC,EAAgB,CAC1DC,QAAS,kCACTC,aAAcC,EACdC,MAAOC,ICCIC,EAA6BN,EAAgB,CACxDC,QAAS,gCACTC,aAAcK,EACdH,MAAOC"}
+{"version":3,"file":"progress-indicator.min.js","sources":["../../src/utils/createComponent.ts","../../src/progress-indicator/CircularProgressIndicator.ts","../../src/progress-indicator/LinearProgressIndicator.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 { M3eCircularProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\nexport type { M3eCircularProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\n\r\n/**\r\n * React binding for the `m3e-circular-progress-indicator` Web Component from `@m3e/web/progress-indicator`.\r\n *\r\n * This component renders the underlying `<m3e-circular-progress-indicator>` 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-circular-progress-indicator>` instance for imperative access.\r\n *\r\n * See the `m3e-circular-progress-indicator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eCircularProgressIndicator = createComponent({\r\n  tagName: \"m3e-circular-progress-indicator\",\r\n  elementClass: M3eCircularProgressIndicatorElement,\r\n  react: React,\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eLinearProgressIndicatorElement } from \"@m3e/web/progress-indicator\";\r\nexport type {\r\n  ProgressIndicatorVariant,\r\n  LinearProgressMode,\r\n  M3eLinearProgressIndicatorElement,\r\n} from \"@m3e/web/progress-indicator\";\r\n\r\n/**\r\n * React binding for the `m3e-linear-progress-indicator` Web Component from `@m3e/web/progress-indicator`.\r\n *\r\n * This component renders the underlying `<m3e-linear-progress-indicator>` 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-linear-progress-indicator>` instance for imperative access.\r\n *\r\n * See the `m3e-linear-progress-indicator` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eLinearProgressIndicator = createComponent({\r\n  tagName: \"m3e-linear-progress-indicator\",\r\n  elementClass: M3eLinearProgressIndicatorElement,\r\n  react: React,\r\n});\r\n"],"names":["createComponent","react","tagName","elementClass","events","displayName","window","createReactComponent","M3eCircularProgressIndicator","M3eCircularProgressIndicatorElement","React","M3eLinearProgressIndicator","M3eLinearProgressIndicatorElement"],"mappings":";;;;;8LA6BM,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,EAA+BR,EAAgB,CAC1DE,QAAS,kCACTC,aAAcM,EACdR,MAAOS,ICCIC,EAA6BX,EAAgB,CACxDE,QAAS,gCACTC,aAAcS,EACdX,MAAOS"}

package/dist/radio-group.js

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

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sources":["../../src/radio-group/Radio.ts","../../src/radio-group/RadioGroup.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eRadioElement } from \"@m3e/web/radio-group\";\r\nexport type { M3eRadioElement } from \"@m3e/web/radio-group\";\r\n\r\n/**\r\n * React binding for the `m3e-radio` Web Component from `@m3e/radio-group`.\r\n *\r\n * This component renders the underlying `<m3e-radio>` 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-radio>` instance for imperative access.\r\n *\r\n * See the `m3e-radio` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eRadio = createComponent({\r\n  tagName: \"m3e-radio\",\r\n  elementClass: M3eRadioElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eRadioGroupElement } from \"@m3e/web/radio-group\";\r\nexport type { M3eRadioGroupElement } from \"@m3e/web/radio-group\";\r\n\r\n/**\r\n * React binding for the `m3e-radio-group` Web Component from `@m3e/radio-group`.\r\n *\r\n * This component renders the underlying `<m3e-radio-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-radio-group>` instance for imperative access.\r\n *\r\n * See the `m3e-radio-group` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eRadioGroup = createComponent({\r\n  tagName: \"m3e-radio-group\",\r\n  elementClass: M3eRadioGroupElement,\r\n  react: React,\r\n  events: {\r\n    onChange: \"change\",\r\n  },\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;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;ACtBD;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAG,eAAe,CAAC;AAC3C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAE,oBAAoB;AAClC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"radio-group.js","sources":["../../src/utils/createComponent.ts","../../src/radio-group/Radio.ts","../../src/radio-group/RadioGroup.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 { M3eRadioElement } from \"@m3e/web/radio-group\";\r\nexport type { M3eRadioElement } from \"@m3e/web/radio-group\";\r\n\r\n/**\r\n * React binding for the `m3e-radio` Web Component from `@m3e/web/radio-group`.\r\n *\r\n * This component renders the underlying `<m3e-radio>` 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-radio>` instance for imperative access.\r\n *\r\n * See the `m3e-radio` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eRadio = createComponent({\r\n  tagName: \"m3e-radio\",\r\n  elementClass: M3eRadioElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eRadioGroupElement } from \"@m3e/web/radio-group\";\r\nexport type { M3eRadioGroupElement } from \"@m3e/web/radio-group\";\r\n\r\n/**\r\n * React binding for the `m3e-radio-group` Web Component from `@m3e/web/radio-group`.\r\n *\r\n * This component renders the underlying `<m3e-radio-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-radio-group>` instance for imperative access.\r\n *\r\n * See the `m3e-radio-group` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eRadioGroup = createComponent({\r\n  tagName: \"m3e-radio-group\",\r\n  elementClass: M3eRadioGroupElement,\r\n  react: React,\r\n  events: {\r\n    onChange: \"change\",\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,QAAQ,GAAG,eAAe,CAAC;AACtC,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;ACtBD;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAG,eAAe,CAAC;AAC3C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAE,oBAAoB;AAClC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;;;"}

package/dist/radio-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 e from"react";import{createComponent as t}from"@lit/react";import{M3eRadioElement as a,M3eRadioGroupElement as o}from"@m3e/web/radio-group";const n=t({tagName:"m3e-radio",elementClass:a,react:e,events:{onInput:"input",onChange:"change",onClick:"click"}}),r=t({tagName:"m3e-radio-group",elementClass:o,react:e,events:{onChange:"change"}});export{n as M3eRadio,r as M3eRadioGroup};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eRadioElement as a,M3eRadioGroupElement as n}from"@m3e/web/radio-group";function o({react:e,tagName:a,elementClass:n,events:o,displayName:r}){return"undefined"!=typeof window?t({react:e,tagName:a,elementClass:n,events:o,displayName:r}):null}const r=o({tagName:"m3e-radio",elementClass:a,react:e,events:{onInput:"input",onChange:"change",onClick:"click"}}),m=o({tagName:"m3e-radio-group",elementClass:n,react:e,events:{onChange:"change"}});export{r as M3eRadio,m as M3eRadioGroup};
 //# sourceMappingURL=radio-group.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.min.js","sources":["../../src/radio-group/Radio.ts","../../src/radio-group/RadioGroup.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eRadioElement } from \"@m3e/web/radio-group\";\r\nexport type { M3eRadioElement } from \"@m3e/web/radio-group\";\r\n\r\n/**\r\n * React binding for the `m3e-radio` Web Component from `@m3e/radio-group`.\r\n *\r\n * This component renders the underlying `<m3e-radio>` 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-radio>` instance for imperative access.\r\n *\r\n * See the `m3e-radio` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eRadio = createComponent({\r\n  tagName: \"m3e-radio\",\r\n  elementClass: M3eRadioElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eRadioGroupElement } from \"@m3e/web/radio-group\";\r\nexport type { M3eRadioGroupElement } from \"@m3e/web/radio-group\";\r\n\r\n/**\r\n * React binding for the `m3e-radio-group` Web Component from `@m3e/radio-group`.\r\n *\r\n * This component renders the underlying `<m3e-radio-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-radio-group>` instance for imperative access.\r\n *\r\n * See the `m3e-radio-group` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eRadioGroup = createComponent({\r\n  tagName: \"m3e-radio-group\",\r\n  elementClass: M3eRadioGroupElement,\r\n  react: React,\r\n  events: {\r\n    onChange: \"change\",\r\n  },\r\n});\r\n"],"names":["M3eRadio","createComponent","tagName","elementClass","M3eRadioElement","react","React","events","onInput","onChange","onClick","M3eRadioGroup","M3eRadioGroupElement"],"mappings":";;;;;sJAmBO,MAAMA,EAAWC,EAAgB,CACtCC,QAAS,YACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,QAAS,QACTC,SAAU,SACVC,QAAS,WCPAC,EAAgBV,EAAgB,CAC3CC,QAAS,kBACTC,aAAcS,EACdP,MAAOC,EACPC,OAAQ,CACNE,SAAU"}
+{"version":3,"file":"radio-group.min.js","sources":["../../src/utils/createComponent.ts","../../src/radio-group/Radio.ts","../../src/radio-group/RadioGroup.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 { M3eRadioElement } from \"@m3e/web/radio-group\";\r\nexport type { M3eRadioElement } from \"@m3e/web/radio-group\";\r\n\r\n/**\r\n * React binding for the `m3e-radio` Web Component from `@m3e/web/radio-group`.\r\n *\r\n * This component renders the underlying `<m3e-radio>` 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-radio>` instance for imperative access.\r\n *\r\n * See the `m3e-radio` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eRadio = createComponent({\r\n  tagName: \"m3e-radio\",\r\n  elementClass: M3eRadioElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n    onClick: \"click\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eRadioGroupElement } from \"@m3e/web/radio-group\";\r\nexport type { M3eRadioGroupElement } from \"@m3e/web/radio-group\";\r\n\r\n/**\r\n * React binding for the `m3e-radio-group` Web Component from `@m3e/web/radio-group`.\r\n *\r\n * This component renders the underlying `<m3e-radio-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-radio-group>` instance for imperative access.\r\n *\r\n * See the `m3e-radio-group` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eRadioGroup = createComponent({\r\n  tagName: \"m3e-radio-group\",\r\n  elementClass: M3eRadioGroupElement,\r\n  react: React,\r\n  events: {\r\n    onChange: \"change\",\r\n  },\r\n});\r\n"],"names":["createComponent","react","tagName","elementClass","events","displayName","window","createReactComponent","M3eRadio","M3eRadioElement","React","onInput","onChange","onClick","M3eRadioGroup","M3eRadioGroupElement"],"mappings":";;;;;sJA6BM,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,EAAWR,EAAgB,CACtCE,QAAS,YACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,QAAS,QACTC,SAAU,SACVC,QAAS,WCPAC,EAAgBd,EAAgB,CAC3CE,QAAS,kBACTC,aAAcY,EACdd,MAAOS,EACPN,OAAQ,CACNQ,SAAU"}

package/dist/segmented-button.js

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

package/dist/segmented-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.js","sources":["../../src/segmented-button/SegmentedButton.ts","../../src/segmented-button/ButtonSegment.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eSegmentedButtonElement } from \"@m3e/web/segmented-button\";\r\nexport type { M3eSegmentedButtonElement } from \"@m3e/web/segmented-button\";\r\n\r\n/**\r\n * React binding for the `m3e-segmented-button` Web Component from `@m3e/segmented-button`.\r\n *\r\n * This component renders the underlying `<m3e-segmented-button>` 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-segmented-button>` instance for imperative access.\r\n *\r\n * See the `m3e-segmented-button` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSegmentedButton = createComponent({\r\n  tagName: \"m3e-segmented-button\",\r\n  elementClass: M3eSegmentedButtonElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eButtonSegmentElement } from \"@m3e/web/segmented-button\";\r\nexport type { M3eButtonSegmentElement } from \"@m3e/web/segmented-button\";\r\n\r\n/**\r\n * React binding for the `m3e-button-segment` Web Component from `@m3e/segmented-button`.\r\n *\r\n * This component renders the underlying `<m3e-button-segment>` 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-segment>` instance for imperative access.\r\n *\r\n * See the `m3e-button-segment` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eButtonSegment = createComponent({\r\n  tagName: \"m3e-button-segment\",\r\n  elementClass: M3eButtonSegmentElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n    onClick: \"click\",\r\n  },\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,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACrBD;;;;;;;;;;;;AAYG;AACI,MAAM,gBAAgB,GAAG,eAAe,CAAC;AAC9C,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAE,uBAAuB;AACrC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"segmented-button.js","sources":["../../src/utils/createComponent.ts","../../src/segmented-button/SegmentedButton.ts","../../src/segmented-button/ButtonSegment.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 { M3eSegmentedButtonElement } from \"@m3e/web/segmented-button\";\r\nexport type { M3eSegmentedButtonElement } from \"@m3e/web/segmented-button\";\r\n\r\n/**\r\n * React binding for the `m3e-segmented-button` Web Component from `@m3e/web/segmented-button`.\r\n *\r\n * This component renders the underlying `<m3e-segmented-button>` 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-segmented-button>` instance for imperative access.\r\n *\r\n * See the `m3e-segmented-button` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSegmentedButton = createComponent({\r\n  tagName: \"m3e-segmented-button\",\r\n  elementClass: M3eSegmentedButtonElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eButtonSegmentElement } from \"@m3e/web/segmented-button\";\r\nexport type { M3eButtonSegmentElement } from \"@m3e/web/segmented-button\";\r\n\r\n/**\r\n * React binding for the `m3e-button-segment` Web Component from `@m3e/web/segmented-button`.\r\n *\r\n * This component renders the underlying `<m3e-button-segment>` 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-segment>` instance for imperative access.\r\n *\r\n * See the `m3e-button-segment` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eButtonSegment = createComponent({\r\n  tagName: \"m3e-button-segment\",\r\n  elementClass: M3eButtonSegmentElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\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,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,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;ACrBD;;;;;;;;;;;;AAYG;AACI,MAAM,gBAAgB,GAAG,eAAe,CAAC;AAC9C,IAAA,OAAO,EAAE,oBAAoB;AAC7B,IAAA,YAAY,EAAE,uBAAuB;AACrC,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AAClB,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;;;"}

package/dist/segmented-button.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{M3eSegmentedButtonElement as n,M3eButtonSegmentElement as m}from"@m3e/web/segmented-button";const o=t({tagName:"m3e-segmented-button",elementClass:n,react:e,events:{onInput:"input",onChange:"change"}}),a=t({tagName:"m3e-button-segment",elementClass:m,react:e,events:{onInput:"input",onChange:"change",onClick:"click"}});export{a as M3eButtonSegment,o as M3eSegmentedButton};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eSegmentedButtonElement as n,M3eButtonSegmentElement as a}from"@m3e/web/segmented-button";function m({react:e,tagName:n,elementClass:a,events:m,displayName:o}){return"undefined"!=typeof window?t({react:e,tagName:n,elementClass:a,events:m,displayName:o}):null}const o=m({tagName:"m3e-segmented-button",elementClass:n,react:e,events:{onInput:"input",onChange:"change"}}),s=m({tagName:"m3e-button-segment",elementClass:a,react:e,events:{onInput:"input",onChange:"change",onClick:"click"}});export{s as M3eButtonSegment,o as M3eSegmentedButton};
 //# sourceMappingURL=segmented-button.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.min.js","sources":["../../src/segmented-button/SegmentedButton.ts","../../src/segmented-button/ButtonSegment.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eSegmentedButtonElement } from \"@m3e/web/segmented-button\";\r\nexport type { M3eSegmentedButtonElement } from \"@m3e/web/segmented-button\";\r\n\r\n/**\r\n * React binding for the `m3e-segmented-button` Web Component from `@m3e/segmented-button`.\r\n *\r\n * This component renders the underlying `<m3e-segmented-button>` 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-segmented-button>` instance for imperative access.\r\n *\r\n * See the `m3e-segmented-button` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSegmentedButton = createComponent({\r\n  tagName: \"m3e-segmented-button\",\r\n  elementClass: M3eSegmentedButtonElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eButtonSegmentElement } from \"@m3e/web/segmented-button\";\r\nexport type { M3eButtonSegmentElement } from \"@m3e/web/segmented-button\";\r\n\r\n/**\r\n * React binding for the `m3e-button-segment` Web Component from `@m3e/segmented-button`.\r\n *\r\n * This component renders the underlying `<m3e-button-segment>` 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-segment>` instance for imperative access.\r\n *\r\n * See the `m3e-button-segment` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eButtonSegment = createComponent({\r\n  tagName: \"m3e-button-segment\",\r\n  elementClass: M3eButtonSegmentElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n    onClick: \"click\",\r\n  },\r\n});\r\n"],"names":["M3eSegmentedButton","createComponent","tagName","elementClass","M3eSegmentedButtonElement","react","React","events","onInput","onChange","M3eButtonSegment","M3eButtonSegmentElement","onClick"],"mappings":";;;;;wKAmBO,MAAMA,EAAqBC,EAAgB,CAChDC,QAAS,uBACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,QAAS,QACTC,SAAU,YCNDC,EAAmBT,EAAgB,CAC9CC,QAAS,qBACTC,aAAcQ,EACdN,MAAOC,EACPC,OAAQ,CACNC,QAAS,QACTC,SAAU,SACVG,QAAS"}
+{"version":3,"file":"segmented-button.min.js","sources":["../../src/utils/createComponent.ts","../../src/segmented-button/SegmentedButton.ts","../../src/segmented-button/ButtonSegment.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 { M3eSegmentedButtonElement } from \"@m3e/web/segmented-button\";\r\nexport type { M3eSegmentedButtonElement } from \"@m3e/web/segmented-button\";\r\n\r\n/**\r\n * React binding for the `m3e-segmented-button` Web Component from `@m3e/web/segmented-button`.\r\n *\r\n * This component renders the underlying `<m3e-segmented-button>` 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-segmented-button>` instance for imperative access.\r\n *\r\n * See the `m3e-segmented-button` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSegmentedButton = createComponent({\r\n  tagName: \"m3e-segmented-button\",\r\n  elementClass: M3eSegmentedButtonElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n  },\r\n});\r\n","import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eButtonSegmentElement } from \"@m3e/web/segmented-button\";\r\nexport type { M3eButtonSegmentElement } from \"@m3e/web/segmented-button\";\r\n\r\n/**\r\n * React binding for the `m3e-button-segment` Web Component from `@m3e/web/segmented-button`.\r\n *\r\n * This component renders the underlying `<m3e-button-segment>` 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-segment>` instance for imperative access.\r\n *\r\n * See the `m3e-button-segment` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eButtonSegment = createComponent({\r\n  tagName: \"m3e-button-segment\",\r\n  elementClass: M3eButtonSegmentElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n    onClick: \"click\",\r\n  },\r\n});\r\n"],"names":["createComponent","react","tagName","elementClass","events","displayName","window","createReactComponent","M3eSegmentedButton","M3eSegmentedButtonElement","React","onInput","onChange","M3eButtonSegment","M3eButtonSegmentElement","onClick"],"mappings":";;;;;wKA6BM,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,QAAS,QACTC,SAAU,YCNDC,EAAmBb,EAAgB,CAC9CE,QAAS,qBACTC,aAAcW,EACdb,MAAOS,EACPN,OAAQ,CACNO,QAAS,QACTC,SAAU,SACVG,QAAS"}

package/dist/select.js

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

package/dist/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../src/select/Select.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eSelectElement } from \"@m3e/web/select\";\r\nexport type { M3eSelectElement } from \"@m3e/web/select\";\r\n\r\n/**\r\n * React binding for the `m3e-select` Web Component from `@m3e/select`.\r\n *\r\n * This component renders the underlying `<m3e-select>` 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-select>` instance for imperative access.\r\n *\r\n * See the `m3e-select` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSelect = createComponent({\r\n  tagName: \"m3e-select\",\r\n  elementClass: M3eSelectElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n  },\r\n});\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AACI,MAAM,SAAS,GAAG,eAAe,CAAC;AACvC,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAE,gBAAgB;AAC9B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"select.js","sources":["../../src/utils/createComponent.ts","../../src/select/Select.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 { M3eSelectElement } from \"@m3e/web/select\";\r\nexport type { M3eSelectElement } from \"@m3e/web/select\";\r\n\r\n/**\r\n * React binding for the `m3e-select` Web Component from `@m3e/web/select`.\r\n *\r\n * This component renders the underlying `<m3e-select>` 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-select>` instance for imperative access.\r\n *\r\n * See the `m3e-select` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSelect = createComponent({\r\n  tagName: \"m3e-select\",\r\n  elementClass: M3eSelectElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\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,SAAS,GAAG,eAAe,CAAC;AACvC,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAE,gBAAgB;AAC9B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,QAAQ,EAAE,QAAQ;AACnB,KAAA;AACF,CAAA;;;;"}

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

package/dist/select.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.min.js","sources":["../../src/select/Select.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eSelectElement } from \"@m3e/web/select\";\r\nexport type { M3eSelectElement } from \"@m3e/web/select\";\r\n\r\n/**\r\n * React binding for the `m3e-select` Web Component from `@m3e/select`.\r\n *\r\n * This component renders the underlying `<m3e-select>` 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-select>` instance for imperative access.\r\n *\r\n * See the `m3e-select` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSelect = createComponent({\r\n  tagName: \"m3e-select\",\r\n  elementClass: M3eSelectElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\r\n  },\r\n});\r\n"],"names":["M3eSelect","createComponent","tagName","elementClass","M3eSelectElement","react","React","events","onInput","onChange"],"mappings":";;;;;wHAmBO,MAAMA,EAAYC,EAAgB,CACvCC,QAAS,aACTC,aAAcC,EACdC,MAAOC,EACPC,OAAQ,CACNC,QAAS,QACTC,SAAU"}
+{"version":3,"file":"select.min.js","sources":["../../src/select/Select.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eSelectElement } from \"@m3e/web/select\";\r\nexport type { M3eSelectElement } from \"@m3e/web/select\";\r\n\r\n/**\r\n * React binding for the `m3e-select` Web Component from `@m3e/web/select`.\r\n *\r\n * This component renders the underlying `<m3e-select>` 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-select>` instance for imperative access.\r\n *\r\n * See the `m3e-select` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eSelect = createComponent({\r\n  tagName: \"m3e-select\",\r\n  elementClass: M3eSelectElement,\r\n  react: React,\r\n  events: {\r\n    onInput: \"input\",\r\n    onChange: \"change\",\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":["M3eSelect","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eSelectElement","React","onInput","onChange"],"mappings":";;;;;wHAmBO,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,aACTC,aAAcM,EACdR,MAAOS,EACPN,OAAQ,CACNO,QAAS,QACTC,SAAU"}

package/dist/shape.js

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

package/dist/shape.js.map

@@ -1 +1 @@
-{"version":3,"file":"shape.js","sources":["../../src/shape/Shape.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eShapeElement } from \"@m3e/web/shape\";\r\nexport type { M3eShapeElement, ShapeName } from \"@m3e/web/shape\";\r\n\r\n/**\r\n * React binding for the `m3e-shape` Web Component from `@m3e/shape`.\r\n *\r\n * This component renders the underlying `<m3e-shape>` 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-shape>` instance for imperative access.\r\n *\r\n * See the `m3e-shape` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eShape = createComponent({\r\n  tagName: \"m3e-shape\",\r\n  elementClass: M3eShapeElement,\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":"shape.js","sources":["../../src/utils/createComponent.ts","../../src/shape/Shape.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 { M3eShapeElement } from \"@m3e/web/shape\";\r\nexport type { M3eShapeElement, ShapeName } from \"@m3e/web/shape\";\r\n\r\n/**\r\n * React binding for the `m3e-shape` Web Component from `@m3e/web/shape`.\r\n *\r\n * This component renders the underlying `<m3e-shape>` 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-shape>` instance for imperative access.\r\n *\r\n * See the `m3e-shape` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eShape = createComponent({\r\n  tagName: \"m3e-shape\",\r\n  elementClass: M3eShapeElement,\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/shape.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{M3eShapeElement as m}from"@m3e/web/shape";const r=t({tagName:"m3e-shape",elementClass:m,react:e});export{r as M3eShape};
+ */import e from"react";import{createComponent as t}from"@lit/react";import{M3eShapeElement as a}from"@m3e/web/shape";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-shape",elementClass:a,react:e});export{m as M3eShape};
 //# sourceMappingURL=shape.min.js.map

package/dist/shape.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"shape.min.js","sources":["../../src/shape/Shape.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"@lit/react\";\r\n\r\nimport { M3eShapeElement } from \"@m3e/web/shape\";\r\nexport type { M3eShapeElement, ShapeName } from \"@m3e/web/shape\";\r\n\r\n/**\r\n * React binding for the `m3e-shape` Web Component from `@m3e/shape`.\r\n *\r\n * This component renders the underlying `<m3e-shape>` 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-shape>` instance for imperative access.\r\n *\r\n * See the `m3e-shape` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eShape = createComponent({\r\n  tagName: \"m3e-shape\",\r\n  elementClass: M3eShapeElement,\r\n  react: React,\r\n});\r\n"],"names":["M3eShape","createComponent","tagName","elementClass","M3eShapeElement","react","React"],"mappings":";;;;;sHAmBO,MAAMA,EAAWC,EAAgB,CACtCC,QAAS,YACTC,aAAcC,EACdC,MAAOC"}
+{"version":3,"file":"shape.min.js","sources":["../../src/shape/Shape.ts","../../src/utils/createComponent.ts"],"sourcesContent":["import React from \"react\";\r\nimport { createComponent } from \"../utils\";\r\n\r\nimport { M3eShapeElement } from \"@m3e/web/shape\";\r\nexport type { M3eShapeElement, ShapeName } from \"@m3e/web/shape\";\r\n\r\n/**\r\n * React binding for the `m3e-shape` Web Component from `@m3e/web/shape`.\r\n *\r\n * This component renders the underlying `<m3e-shape>` 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-shape>` instance for imperative access.\r\n *\r\n * See the `m3e-shape` documentation for full details on behavior, styling,\r\n * accessibility, and supported events.\r\n */\r\nexport const M3eShape = createComponent({\r\n  tagName: \"m3e-shape\",\r\n  elementClass: M3eShapeElement,\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":["M3eShape","react","tagName","elementClass","events","displayName","window","createReactComponent","createComponent","M3eShapeElement","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/slide-group.js

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

package/dist/slide-group.js.map

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

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