@ticketlayer/elements-react 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ticketlayer Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# @ticketlayer/elements-react
+
+React wrappers for [Ticketlayer Elements](https://github.com/ticketlayer/live-elements).
+Each `Tl*` component renders the matching `<tl-*>` custom element from
+`@ticketlayer/elements`, which is a peer dependency: install both.
+
+```bash
+npm install @ticketlayer/elements @ticketlayer/elements-react
+```
+
+```tsx
+import { useEffect } from 'react';
+import { createLiveClient } from '@ticketlayer/live';
+import { defineCustomElements, setSDK, TlEventList, TlCartBadge } from '@ticketlayer/elements-react';
+
+function App() {
+  useEffect(() => {
+    // Register the custom elements after hydration, then hand Elements the
+    // Live client so they can read the catalogue and share one cart.
+    defineCustomElements();
+    createLiveClient({ baseUrl: 'https://live-api.ticketlayer.com', publishableKey: 'tlpk_...' }).then(setSDK);
+  }, []);
+
+  return (
+    <>
+      <TlCartBadge />
+      <TlEventList />
+    </>
+  );
+}
+```
+
+Events are exposed as `onTl*` props (`onTlAddToCart`, `onTlError`, ...) and
+receive the `CustomEvent`; the payload is on `event.detail`. The component
+reference, props and events for every element are in the elements package's
+`elements.catalogue.json` and `docs/COMPONENTS.md`.
+
+The wrapper set is generated from the elements build, so
+`@ticketlayer/elements-react` always ships against the same major of
+`@ticketlayer/elements`.

package/dist/cjs/components.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TlTicketSelector = exports.TlTicket = exports.TlSeatMap = exports.TlPromoCode = exports.TlOrderTickets = exports.TlOrderConfirmation = exports.TlOccurrenceSelector = exports.TlMyOrders = exports.TlLogin = exports.TlEventList = exports.TlEventCard = exports.TlCheckoutWrapper = exports.TlCartDrawer = exports.TlCartBadge = exports.TlCart = exports.TlBuyTicketsWrapper = exports.TlBuyTicketsButton = exports.TlBuyModal = exports.defineCustomElements = void 0;
+/* eslint-disable */
+/* GENERATED by scripts/build-react.mjs - do not edit. */
+const react_component_lib_1 = require("./react-component-lib");
+// Registers the custom elements. TicketlayerProvider calls this after
+// hydration; do NOT call it at import time (SSR/hydration mismatch).
+var loader_1 = require("@ticketlayer/elements/loader");
+Object.defineProperty(exports, "defineCustomElements", { enumerable: true, get: function () { return loader_1.defineCustomElements; } });
+// Props are `any`: the element types come from @ticketlayer/elements at runtime.
+exports.TlBuyModal = (0, react_component_lib_1.createReactComponent)('tl-buy-modal');
+exports.TlBuyTicketsButton = (0, react_component_lib_1.createReactComponent)('tl-buy-tickets-button');
+exports.TlBuyTicketsWrapper = (0, react_component_lib_1.createReactComponent)('tl-buy-tickets-wrapper');
+exports.TlCart = (0, react_component_lib_1.createReactComponent)('tl-cart');
+exports.TlCartBadge = (0, react_component_lib_1.createReactComponent)('tl-cart-badge');
+exports.TlCartDrawer = (0, react_component_lib_1.createReactComponent)('tl-cart-drawer');
+exports.TlCheckoutWrapper = (0, react_component_lib_1.createReactComponent)('tl-checkout-wrapper');
+exports.TlEventCard = (0, react_component_lib_1.createReactComponent)('tl-event-card');
+exports.TlEventList = (0, react_component_lib_1.createReactComponent)('tl-event-list');
+exports.TlLogin = (0, react_component_lib_1.createReactComponent)('tl-login');
+exports.TlMyOrders = (0, react_component_lib_1.createReactComponent)('tl-my-orders');
+exports.TlOccurrenceSelector = (0, react_component_lib_1.createReactComponent)('tl-occurrence-selector');
+exports.TlOrderConfirmation = (0, react_component_lib_1.createReactComponent)('tl-order-confirmation');
+exports.TlOrderTickets = (0, react_component_lib_1.createReactComponent)('tl-order-tickets');
+exports.TlPromoCode = (0, react_component_lib_1.createReactComponent)('tl-promo-code');
+exports.TlSeatMap = (0, react_component_lib_1.createReactComponent)('tl-seat-map');
+exports.TlTicket = (0, react_component_lib_1.createReactComponent)('tl-ticket');
+exports.TlTicketSelector = (0, react_component_lib_1.createReactComponent)('tl-ticket-selector');

package/dist/cjs/index.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * @ticketlayer/elements-react
+ *
+ * React wrappers for Ticketlayer Elements. Each Tl* component renders the
+ * matching custom element from @ticketlayer/elements (a peer dependency);
+ * call defineCustomElements() once, after hydration, to register them.
+ *
+ * components.ts is written by scripts/build-react.mjs from the Stencil
+ * build, so the exported set always matches the elements package.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onSDKEvent = exports.getSDK = exports.hasSDK = exports.setSDK = void 0;
+__exportStar(require("./components"), exports);
+// SDK connector: how a host hands its @ticketlayer/live client to Elements
+var elements_1 = require("@ticketlayer/elements");
+Object.defineProperty(exports, "setSDK", { enumerable: true, get: function () { return elements_1.setSDK; } });
+Object.defineProperty(exports, "hasSDK", { enumerable: true, get: function () { return elements_1.hasSDK; } });
+Object.defineProperty(exports, "getSDK", { enumerable: true, get: function () { return elements_1.getSDK; } });
+Object.defineProperty(exports, "onSDKEvent", { enumerable: true, get: function () { return elements_1.onSDKEvent; } });

package/dist/cjs/react-component-lib/createComponent.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReactComponent = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("./utils");
+const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const displayName = (0, utils_1.dashToPascalCase)(tagName);
+    const ReactComponent = class extends react_1.default.Component {
+        constructor(props) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(prevProps) {
+            (0, utils_1.attachProps)(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                    const eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && (0, utils_1.isCoveredByReact)(eventName)) {
+                        acc[name] = value;
+                    }
+                }
+                else {
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    const type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[(0, utils_1.camelToDashCase)(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = {
+                ...propsToPass,
+                ref: (0, utils_1.mergeRefs)(forwardedRef, this.setComponentElRef),
+                style,
+            };
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return (0, react_1.createElement)(tagName, newProps, children);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
+    // If context was passed to createReactComponent then conditionally add it to the Component Class
+    if (ReactComponentContext) {
+        ReactComponent.contextType = ReactComponentContext;
+    }
+    return (0, utils_1.createForwardRef)(ReactComponent, displayName);
+};
+exports.createReactComponent = createReactComponent;

package/dist/cjs/react-component-lib/createOverlayComponent.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createOverlayComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const utils_1 = require("./utils");
+const createOverlayComponent = (tagName, controller, customElement) => {
+    (0, utils_1.defineCustomElement)(tagName, customElement);
+    const displayName = (0, utils_1.dashToPascalCase)(tagName);
+    const didDismissEventName = `on${displayName}DidDismiss`;
+    const didPresentEventName = `on${displayName}DidPresent`;
+    const willDismissEventName = `on${displayName}WillDismiss`;
+    const willPresentEventName = `on${displayName}WillPresent`;
+    let isDismissing = false;
+    class Overlay extends react_1.default.Component {
+        constructor(props) {
+            super(props);
+            if (typeof document !== 'undefined') {
+                this.el = document.createElement('div');
+            }
+            this.handleDismiss = this.handleDismiss.bind(this);
+        }
+        static get displayName() {
+            return displayName;
+        }
+        componentDidMount() {
+            if (this.props.isOpen) {
+                this.present();
+            }
+        }
+        componentWillUnmount() {
+            if (this.overlay) {
+                this.overlay.dismiss();
+            }
+        }
+        handleDismiss(event) {
+            if (this.props.onDidDismiss) {
+                this.props.onDidDismiss(event);
+            }
+            (0, utils_1.setRef)(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(nextProps) {
+            // Check if the overlay component is about to dismiss
+            if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
+                isDismissing = true;
+            }
+            return true;
+        }
+        async componentDidUpdate(prevProps) {
+            if (this.overlay) {
+                (0, utils_1.attachProps)(this.overlay, this.props, prevProps);
+            }
+            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                this.present(prevProps);
+            }
+            if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                await this.overlay.dismiss();
+                isDismissing = false;
+                /**
+                 * Now that the overlay is dismissed
+                 * we need to render again so that any
+                 * inner components will be unmounted
+                 */
+                this.forceUpdate();
+            }
+        }
+        async present(prevProps) {
+            const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+            const elementProps = {
+                ...cProps,
+                ref: this.props.forwardedRef,
+                [didDismissEventName]: this.handleDismiss,
+                [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e),
+                [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+                [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e),
+            };
+            this.overlay = await controller.create({
+                ...elementProps,
+                component: this.el,
+                componentProps: {},
+            });
+            (0, utils_1.setRef)(this.props.forwardedRef, this.overlay);
+            (0, utils_1.attachProps)(this.overlay, elementProps, prevProps);
+            await this.overlay.present();
+        }
+        render() {
+            /**
+             * Continue to render the component even when
+             * overlay is dismissing otherwise component
+             * will be hidden before animation is done.
+             */
+            return react_dom_1.default.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
+        }
+    }
+    return react_1.default.forwardRef((props, ref) => {
+        return react_1.default.createElement(Overlay, { ...props, forwardedRef: ref });
+    });
+};
+exports.createOverlayComponent = createOverlayComponent;

package/dist/cjs/react-component-lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createOverlayComponent = exports.createReactComponent = void 0;
+var createComponent_1 = require("./createComponent");
+Object.defineProperty(exports, "createReactComponent", { enumerable: true, get: function () { return createComponent_1.createReactComponent; } });
+var createOverlayComponent_1 = require("./createOverlayComponent");
+Object.defineProperty(exports, "createOverlayComponent", { enumerable: true, get: function () { return createOverlayComponent_1.createOverlayComponent; } });

package/dist/cjs/react-component-lib/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/react-component-lib/utils/attachProps.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.syncEvent = exports.isCoveredByReact = exports.transformReactEventName = exports.getClassName = exports.attachProps = void 0;
+const case_1 = require("./case");
+const attachProps = (node, newProps, oldProps = {}) => {
+    // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+    if (node instanceof Element) {
+        // add any classes in className to the class list
+        const className = (0, exports.getClassName)(node.classList, newProps, oldProps);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach((name) => {
+            if (name === 'children' ||
+                name === 'style' ||
+                name === 'ref' ||
+                name === 'class' ||
+                name === 'className' ||
+                name === 'forwardedRef') {
+                return;
+            }
+            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                const eventName = name.substring(2);
+                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                if (!(0, exports.isCoveredByReact)(eventNameLc)) {
+                    (0, exports.syncEvent)(node, eventNameLc, newProps[name]);
+                }
+            }
+            else {
+                node[name] = newProps[name];
+                const propType = typeof newProps[name];
+                if (propType === 'string') {
+                    node.setAttribute((0, case_1.camelToDashCase)(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+exports.attachProps = attachProps;
+const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const oldClassProp = oldProps.className || oldProps.class;
+    // map the classes to Maps for performance
+    const currentClasses = arrayToMap(classList);
+    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    const finalClassNames = [];
+    // loop through each of the current classes on the component
+    // to see if it should be a part of the classNames added
+    currentClasses.forEach((currentClass) => {
+        if (incomingPropClasses.has(currentClass)) {
+            // add it as its already included in classnames coming in from newProps
+            finalClassNames.push(currentClass);
+            incomingPropClasses.delete(currentClass);
+        }
+        else if (!oldPropClasses.has(currentClass)) {
+            // add it as it has NOT been removed by user
+            finalClassNames.push(currentClass);
+        }
+    });
+    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    return finalClassNames.join(' ');
+};
+exports.getClassName = getClassName;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+const transformReactEventName = (eventNameSuffix) => {
+    switch (eventNameSuffix) {
+        case 'doubleclick':
+            return 'dblclick';
+    }
+    return eventNameSuffix;
+};
+exports.transformReactEventName = transformReactEventName;
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        const eventName = 'on' + (0, exports.transformReactEventName)(eventNameSuffix);
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
+};
+exports.isCoveredByReact = isCoveredByReact;
+const syncEvent = (node, eventName, newEventHandler) => {
+    const eventStore = node.__events || (node.__events = {});
+    const oldEventHandler = eventStore[eventName];
+    // Remove old listener so they don't double up.
+    if (oldEventHandler) {
+        node.removeEventListener(eventName, oldEventHandler);
+    }
+    // Bind new listener.
+    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+exports.syncEvent = syncEvent;
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+};

package/dist/cjs/react-component-lib/utils/case.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.camelToDashCase = exports.dashToPascalCase = void 0;
+const dashToPascalCase = (str) => str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+exports.dashToPascalCase = dashToPascalCase;
+const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+exports.camelToDashCase = camelToDashCase;

package/dist/cjs/react-component-lib/utils/dev.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deprecationWarning = exports.isDevMode = void 0;
+const isDevMode = () => {
+    return process && process.env && process.env.NODE_ENV === 'development';
+};
+exports.isDevMode = isDevMode;
+const warnings = {};
+const deprecationWarning = (key, message) => {
+    if ((0, exports.isDevMode)()) {
+        if (!warnings[key]) {
+            console.warn(message);
+            warnings[key] = true;
+        }
+    }
+};
+exports.deprecationWarning = deprecationWarning;

package/dist/cjs/react-component-lib/utils/index.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineCustomElement = exports.createForwardRef = exports.mergeRefs = exports.setRef = void 0;
+const react_1 = __importDefault(require("react"));
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+exports.setRef = setRef;
+const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            (0, exports.setRef)(ref, value);
+        });
+    };
+};
+exports.mergeRefs = mergeRefs;
+const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return react_1.default.createElement(ReactComponent, { ...props, forwardedRef: ref });
+    };
+    forwardRef.displayName = displayName;
+    // Cast to any to allow flexible props from Stencil components
+    return react_1.default.forwardRef(forwardRef);
+};
+exports.createForwardRef = createForwardRef;
+const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+exports.defineCustomElement = defineCustomElement;
+__exportStar(require("./attachProps"), exports);
+__exportStar(require("./case"), exports);

package/dist/esm/components.d.ts

@@ -0,0 +1,19 @@
+export { defineCustomElements } from '@ticketlayer/elements/loader';
+export declare const TlBuyModal: import("react").ForwardRefExoticComponent<any>;
+export declare const TlBuyTicketsButton: import("react").ForwardRefExoticComponent<any>;
+export declare const TlBuyTicketsWrapper: import("react").ForwardRefExoticComponent<any>;
+export declare const TlCart: import("react").ForwardRefExoticComponent<any>;
+export declare const TlCartBadge: import("react").ForwardRefExoticComponent<any>;
+export declare const TlCartDrawer: import("react").ForwardRefExoticComponent<any>;
+export declare const TlCheckoutWrapper: import("react").ForwardRefExoticComponent<any>;
+export declare const TlEventCard: import("react").ForwardRefExoticComponent<any>;
+export declare const TlEventList: import("react").ForwardRefExoticComponent<any>;
+export declare const TlLogin: import("react").ForwardRefExoticComponent<any>;
+export declare const TlMyOrders: import("react").ForwardRefExoticComponent<any>;
+export declare const TlOccurrenceSelector: import("react").ForwardRefExoticComponent<any>;
+export declare const TlOrderConfirmation: import("react").ForwardRefExoticComponent<any>;
+export declare const TlOrderTickets: import("react").ForwardRefExoticComponent<any>;
+export declare const TlPromoCode: import("react").ForwardRefExoticComponent<any>;
+export declare const TlSeatMap: import("react").ForwardRefExoticComponent<any>;
+export declare const TlTicket: import("react").ForwardRefExoticComponent<any>;
+export declare const TlTicketSelector: import("react").ForwardRefExoticComponent<any>;

package/dist/esm/components.js

@@ -0,0 +1,25 @@
+/* eslint-disable */
+/* GENERATED by scripts/build-react.mjs - do not edit. */
+import { createReactComponent } from './react-component-lib';
+// Registers the custom elements. TicketlayerProvider calls this after
+// hydration; do NOT call it at import time (SSR/hydration mismatch).
+export { defineCustomElements } from '@ticketlayer/elements/loader';
+// Props are `any`: the element types come from @ticketlayer/elements at runtime.
+export const TlBuyModal = /*@__PURE__*/ createReactComponent('tl-buy-modal');
+export const TlBuyTicketsButton = /*@__PURE__*/ createReactComponent('tl-buy-tickets-button');
+export const TlBuyTicketsWrapper = /*@__PURE__*/ createReactComponent('tl-buy-tickets-wrapper');
+export const TlCart = /*@__PURE__*/ createReactComponent('tl-cart');
+export const TlCartBadge = /*@__PURE__*/ createReactComponent('tl-cart-badge');
+export const TlCartDrawer = /*@__PURE__*/ createReactComponent('tl-cart-drawer');
+export const TlCheckoutWrapper = /*@__PURE__*/ createReactComponent('tl-checkout-wrapper');
+export const TlEventCard = /*@__PURE__*/ createReactComponent('tl-event-card');
+export const TlEventList = /*@__PURE__*/ createReactComponent('tl-event-list');
+export const TlLogin = /*@__PURE__*/ createReactComponent('tl-login');
+export const TlMyOrders = /*@__PURE__*/ createReactComponent('tl-my-orders');
+export const TlOccurrenceSelector = /*@__PURE__*/ createReactComponent('tl-occurrence-selector');
+export const TlOrderConfirmation = /*@__PURE__*/ createReactComponent('tl-order-confirmation');
+export const TlOrderTickets = /*@__PURE__*/ createReactComponent('tl-order-tickets');
+export const TlPromoCode = /*@__PURE__*/ createReactComponent('tl-promo-code');
+export const TlSeatMap = /*@__PURE__*/ createReactComponent('tl-seat-map');
+export const TlTicket = /*@__PURE__*/ createReactComponent('tl-ticket');
+export const TlTicketSelector = /*@__PURE__*/ createReactComponent('tl-ticket-selector');

package/dist/esm/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @ticketlayer/elements-react
+ *
+ * React wrappers for Ticketlayer Elements. Each Tl* component renders the
+ * matching custom element from @ticketlayer/elements (a peer dependency);
+ * call defineCustomElements() once, after hydration, to register them.
+ *
+ * components.ts is written by scripts/build-react.mjs from the Stencil
+ * build, so the exported set always matches the elements package.
+ */
+export * from './components';
+export { setSDK, hasSDK, getSDK, onSDKEvent } from '@ticketlayer/elements';
+export type { TicketlayerSDK, ModalOptions, OrderResult } from '@ticketlayer/elements';

package/dist/esm/index.js

@@ -0,0 +1,13 @@
+/**
+ * @ticketlayer/elements-react
+ *
+ * React wrappers for Ticketlayer Elements. Each Tl* component renders the
+ * matching custom element from @ticketlayer/elements (a peer dependency);
+ * call defineCustomElements() once, after hydration, to register them.
+ *
+ * components.ts is written by scripts/build-react.mjs from the Stencil
+ * build, so the exported set always matches the elements package.
+ */
+export * from './components';
+// SDK connector: how a host hands its @ticketlayer/live client to Elements
+export { setSDK, hasSDK, getSDK, onSDKEvent } from '@ticketlayer/elements';

package/dist/esm/react-component-lib/createComponent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface HTMLStencilElement extends HTMLElement {
+    componentOnReady(): Promise<this>;
+}
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+    forwardedRef: React.RefObject<ElementType>;
+    ref?: React.Ref<any>;
+}
+export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes, defineCustomElement?: () => void) => React.ForwardRefExoticComponent<PropType & React.RefAttributes<ElementType>>;
+export {};

package/dist/esm/react-component-lib/createComponent.js

@@ -0,0 +1,67 @@
+import React, { createElement } from 'react';
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+export const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
+    if (defineCustomElement !== undefined) {
+        defineCustomElement();
+    }
+    const displayName = dashToPascalCase(tagName);
+    const ReactComponent = class extends React.Component {
+        constructor(props) {
+            super(props);
+            this.setComponentElRef = (element) => {
+                this.componentEl = element;
+            };
+        }
+        componentDidMount() {
+            this.componentDidUpdate(this.props);
+        }
+        componentDidUpdate(prevProps) {
+            attachProps(this.componentEl, this.props, prevProps);
+        }
+        render() {
+            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+                const value = cProps[name];
+                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                    const eventName = name.substring(2).toLowerCase();
+                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+                        acc[name] = value;
+                    }
+                }
+                else {
+                    // we should only render strings, booleans, and numbers as attrs in html.
+                    // objects, functions, arrays etc get synced via properties on mount.
+                    const type = typeof value;
+                    if (type === 'string' || type === 'boolean' || type === 'number') {
+                        acc[camelToDashCase(name)] = value;
+                    }
+                }
+                return acc;
+            }, {});
+            if (manipulatePropsFunction) {
+                propsToPass = manipulatePropsFunction(this.props, propsToPass);
+            }
+            const newProps = {
+                ...propsToPass,
+                ref: mergeRefs(forwardedRef, this.setComponentElRef),
+                style,
+            };
+            /**
+             * We use createElement here instead of
+             * React.createElement to work around a
+             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+             * React.createElement causes all elements to be rendered
+             * as <tagname> instead of the actual Web Component.
+             */
+            return createElement(tagName, newProps, children);
+        }
+        static get displayName() {
+            return displayName;
+        }
+    };
+    // If context was passed to createReactComponent then conditionally add it to the Component Class
+    if (ReactComponentContext) {
+        ReactComponent.contextType = ReactComponentContext;
+    }
+    return createForwardRef(ReactComponent, displayName);
+};

package/dist/esm/react-component-lib/createOverlayComponent.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { OverlayEventDetail } from './interfaces';
+import { StencilReactForwardedRef } from './utils';
+interface OverlayElement extends HTMLElement {
+    present: () => Promise<void>;
+    dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+export interface ReactOverlayProps {
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+    onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(tagName: string, controller: {
+    create: (options: any) => Promise<OverlayType>;
+}, customElement?: any) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
+    forwardedRef?: StencilReactForwardedRef<OverlayType>;
+}> & React.RefAttributes<OverlayType>>;
+export {};

package/dist/esm/react-component-lib/createOverlayComponent.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+export const createOverlayComponent = (tagName, controller, customElement) => {
+    defineCustomElement(tagName, customElement);
+    const displayName = dashToPascalCase(tagName);
+    const didDismissEventName = `on${displayName}DidDismiss`;
+    const didPresentEventName = `on${displayName}DidPresent`;
+    const willDismissEventName = `on${displayName}WillDismiss`;
+    const willPresentEventName = `on${displayName}WillPresent`;
+    let isDismissing = false;
+    class Overlay extends React.Component {
+        constructor(props) {
+            super(props);
+            if (typeof document !== 'undefined') {
+                this.el = document.createElement('div');
+            }
+            this.handleDismiss = this.handleDismiss.bind(this);
+        }
+        static get displayName() {
+            return displayName;
+        }
+        componentDidMount() {
+            if (this.props.isOpen) {
+                this.present();
+            }
+        }
+        componentWillUnmount() {
+            if (this.overlay) {
+                this.overlay.dismiss();
+            }
+        }
+        handleDismiss(event) {
+            if (this.props.onDidDismiss) {
+                this.props.onDidDismiss(event);
+            }
+            setRef(this.props.forwardedRef, null);
+        }
+        shouldComponentUpdate(nextProps) {
+            // Check if the overlay component is about to dismiss
+            if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
+                isDismissing = true;
+            }
+            return true;
+        }
+        async componentDidUpdate(prevProps) {
+            if (this.overlay) {
+                attachProps(this.overlay, this.props, prevProps);
+            }
+            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                this.present(prevProps);
+            }
+            if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                await this.overlay.dismiss();
+                isDismissing = false;
+                /**
+                 * Now that the overlay is dismissed
+                 * we need to render again so that any
+                 * inner components will be unmounted
+                 */
+                this.forceUpdate();
+            }
+        }
+        async present(prevProps) {
+            const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+            const elementProps = {
+                ...cProps,
+                ref: this.props.forwardedRef,
+                [didDismissEventName]: this.handleDismiss,
+                [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e),
+                [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+                [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e),
+            };
+            this.overlay = await controller.create({
+                ...elementProps,
+                component: this.el,
+                componentProps: {},
+            });
+            setRef(this.props.forwardedRef, this.overlay);
+            attachProps(this.overlay, elementProps, prevProps);
+            await this.overlay.present();
+        }
+        render() {
+            /**
+             * Continue to render the component even when
+             * overlay is dismissing otherwise component
+             * will be hidden before animation is done.
+             */
+            return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
+        }
+    }
+    return React.forwardRef((props, ref) => {
+        return React.createElement(Overlay, { ...props, forwardedRef: ref });
+    });
+};

package/dist/esm/react-component-lib/index.d.ts

@@ -0,0 +1,2 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

package/dist/esm/react-component-lib/index.js

@@ -0,0 +1,2 @@
+export { createReactComponent } from './createComponent';
+export { createOverlayComponent } from './createOverlayComponent';

package/dist/esm/react-component-lib/interfaces.d.ts

@@ -0,0 +1,29 @@
+export interface EventEmitter<T = any> {
+    emit: (data?: T) => CustomEvent<T>;
+}
+export interface StyleReactProps {
+    class?: string;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+}
+export interface OverlayEventDetail<T = any> {
+    data?: T;
+    role?: string;
+}
+export interface OverlayInterface {
+    el: HTMLElement;
+    animated: boolean;
+    keyboardClose: boolean;
+    overlayIndex: number;
+    presented: boolean;
+    enterAnimation?: any;
+    leaveAnimation?: any;
+    didPresent: EventEmitter<void>;
+    willPresent: EventEmitter<void>;
+    willDismiss: EventEmitter<OverlayEventDetail>;
+    didDismiss: EventEmitter<OverlayEventDetail>;
+    present(): Promise<void>;
+    dismiss(data?: any, role?: string): Promise<boolean>;
+}

package/dist/esm/react-component-lib/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/react-component-lib/utils/attachProps.d.ts

@@ -0,0 +1,16 @@
+export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
+export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export declare const transformReactEventName: (eventNameSuffix: string) => string;
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export declare const isCoveredByReact: (eventNameSuffix: string) => boolean;
+export declare const syncEvent: (node: Element & {
+    __events?: {
+        [key: string]: ((e: Event) => any) | undefined;
+    };
+}, eventName: string, newEventHandler?: (e: Event) => any) => void;

package/dist/esm/react-component-lib/utils/attachProps.js

@@ -0,0 +1,107 @@
+import { camelToDashCase } from './case';
+export const attachProps = (node, newProps, oldProps = {}) => {
+    // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+    if (node instanceof Element) {
+        // add any classes in className to the class list
+        const className = getClassName(node.classList, newProps, oldProps);
+        if (className !== '') {
+            node.className = className;
+        }
+        Object.keys(newProps).forEach((name) => {
+            if (name === 'children' ||
+                name === 'style' ||
+                name === 'ref' ||
+                name === 'class' ||
+                name === 'className' ||
+                name === 'forwardedRef') {
+                return;
+            }
+            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+                const eventName = name.substring(2);
+                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+                if (!isCoveredByReact(eventNameLc)) {
+                    syncEvent(node, eventNameLc, newProps[name]);
+                }
+            }
+            else {
+                node[name] = newProps[name];
+                const propType = typeof newProps[name];
+                if (propType === 'string') {
+                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                }
+            }
+        });
+    }
+};
+export const getClassName = (classList, newProps, oldProps) => {
+    const newClassProp = newProps.className || newProps.class;
+    const oldClassProp = oldProps.className || oldProps.class;
+    // map the classes to Maps for performance
+    const currentClasses = arrayToMap(classList);
+    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+    const finalClassNames = [];
+    // loop through each of the current classes on the component
+    // to see if it should be a part of the classNames added
+    currentClasses.forEach((currentClass) => {
+        if (incomingPropClasses.has(currentClass)) {
+            // add it as its already included in classnames coming in from newProps
+            finalClassNames.push(currentClass);
+            incomingPropClasses.delete(currentClass);
+        }
+        else if (!oldPropClasses.has(currentClass)) {
+            // add it as it has NOT been removed by user
+            finalClassNames.push(currentClass);
+        }
+    });
+    incomingPropClasses.forEach((s) => finalClassNames.push(s));
+    return finalClassNames.join(' ');
+};
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix) => {
+    switch (eventNameSuffix) {
+        case 'doubleclick':
+            return 'dblclick';
+    }
+    return eventNameSuffix;
+};
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export const isCoveredByReact = (eventNameSuffix) => {
+    if (typeof document === 'undefined') {
+        return true;
+    }
+    else {
+        const eventName = 'on' + transformReactEventName(eventNameSuffix);
+        let isSupported = eventName in document;
+        if (!isSupported) {
+            const element = document.createElement('div');
+            element.setAttribute(eventName, 'return;');
+            isSupported = typeof element[eventName] === 'function';
+        }
+        return isSupported;
+    }
+};
+export const syncEvent = (node, eventName, newEventHandler) => {
+    const eventStore = node.__events || (node.__events = {});
+    const oldEventHandler = eventStore[eventName];
+    // Remove old listener so they don't double up.
+    if (oldEventHandler) {
+        node.removeEventListener(eventName, oldEventHandler);
+    }
+    // Bind new listener.
+    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
+        if (newEventHandler) {
+            newEventHandler.call(this, e);
+        }
+    }));
+};
+const arrayToMap = (arr) => {
+    const map = new Map();
+    arr.forEach((s) => map.set(s, s));
+    return map;
+};

package/dist/esm/react-component-lib/utils/case.d.ts

@@ -0,0 +1,2 @@
+export declare const dashToPascalCase: (str: string) => string;
+export declare const camelToDashCase: (str: string) => string;

package/dist/esm/react-component-lib/utils/case.js

@@ -0,0 +1,6 @@
+export const dashToPascalCase = (str) => str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+export const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);

package/dist/esm/react-component-lib/utils/dev.d.ts

@@ -0,0 +1,2 @@
+export declare const isDevMode: () => boolean;
+export declare const deprecationWarning: (key: string, message: string) => void;

package/dist/esm/react-component-lib/utils/dev.js

@@ -0,0 +1,12 @@
+export const isDevMode = () => {
+    return process && process.env && process.env.NODE_ENV === 'development';
+};
+const warnings = {};
+export const deprecationWarning = (key, message) => {
+    if (isDevMode()) {
+        if (!warnings[key]) {
+            console.warn(message);
+            warnings[key] = true;
+        }
+    }
+};

package/dist/esm/react-component-lib/utils/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { StyleReactProps } from '../interfaces';
+export type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
+export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+export declare const setRef: (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => void;
+export declare const mergeRefs: (...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]) => React.RefCallback<any>;
+export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<PropType & React.RefAttributes<ElementType>>;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export * from './attachProps';
+export * from './case';

package/dist/esm/react-component-lib/utils/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+export const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref != null) {
+        // Cast as a MutableRef so we can assign current
+        ref.current = value;
+    }
+};
+export const mergeRefs = (...refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            setRef(ref, value);
+        });
+    };
+};
+export const createForwardRef = (ReactComponent, displayName) => {
+    const forwardRef = (props, ref) => {
+        return React.createElement(ReactComponent, { ...props, forwardedRef: ref });
+    };
+    forwardRef.displayName = displayName;
+    // Cast to any to allow flexible props from Stencil components
+    return React.forwardRef(forwardRef);
+};
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+export * from './attachProps';
+export * from './case';

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@ticketlayer/elements-react",
+  "version": "0.2.0",
+  "description": "React wrappers for Ticketlayer Elements",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "node ../scripts/build-react.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ticketlayer/live-elements.git",
+    "directory": "react"
+  },
+  "homepage": "https://docs.ticketlayer.com/elements",
+  "bugs": {
+    "url": "https://github.com/ticketlayer/live-elements/issues"
+  },
+  "keywords": [
+    "ticketlayer",
+    "elements",
+    "react",
+    "web-components",
+    "ticketing"
+  ],
+  "author": "Ticketlayer",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "@ticketlayer/elements": ">=0.1.0 <1.0.0",
+    "@ticketlayer/live": "^0.1.0",
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@ticketlayer/live": {
+      "optional": true
+    }
+  }
+}