@revvue/embed-react 0.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/README.md +1 -0
  2. package/dist/css/dialog.css +1 -0
  3. package/dist/css/drawer.css +1 -0
  4. package/dist/css/popover.css +1 -0
  5. package/dist/css/widget.css +1 -0
  6. package/dist/package.cjs +173 -0
  7. package/dist/package.mjs +169 -0
  8. package/dist/types/components/dialog/build-stable-deps.d.ts +3 -0
  9. package/dist/types/components/dialog/build-stable-deps.d.ts.map +1 -0
  10. package/dist/types/components/dialog/dialog.d.ts +6 -0
  11. package/dist/types/components/dialog/dialog.d.ts.map +1 -0
  12. package/dist/types/components/dialog/index.d.ts +2 -0
  13. package/dist/types/components/dialog/index.d.ts.map +1 -0
  14. package/dist/types/components/drawer/build-stable-deps.d.ts +3 -0
  15. package/dist/types/components/drawer/build-stable-deps.d.ts.map +1 -0
  16. package/dist/types/components/drawer/drawer.d.ts +6 -0
  17. package/dist/types/components/drawer/drawer.d.ts.map +1 -0
  18. package/dist/types/components/drawer/index.d.ts +2 -0
  19. package/dist/types/components/drawer/index.d.ts.map +1 -0
  20. package/dist/types/components/index.d.ts +5 -0
  21. package/dist/types/components/index.d.ts.map +1 -0
  22. package/dist/types/components/popover/build-stable-deps.d.ts +3 -0
  23. package/dist/types/components/popover/build-stable-deps.d.ts.map +1 -0
  24. package/dist/types/components/popover/index.d.ts +2 -0
  25. package/dist/types/components/popover/index.d.ts.map +1 -0
  26. package/dist/types/components/popover/popover.d.ts +29 -0
  27. package/dist/types/components/popover/popover.d.ts.map +1 -0
  28. package/dist/types/components/widget/build-stable-deps.d.ts +3 -0
  29. package/dist/types/components/widget/build-stable-deps.d.ts.map +1 -0
  30. package/dist/types/components/widget/index.d.ts +2 -0
  31. package/dist/types/components/widget/index.d.ts.map +1 -0
  32. package/dist/types/components/widget/widget.d.ts +11 -0
  33. package/dist/types/components/widget/widget.d.ts.map +1 -0
  34. package/dist/types/index.d.ts +2 -0
  35. package/dist/types/index.d.ts.map +1 -0
  36. package/package.json +62 -0
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # `embed-react`
@@ -0,0 +1 @@
1
+ @layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:var(--rvv-z-index);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex;position:fixed}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s;bottom:24px}.rvv-button--trigger[data-position=right]{right:24px}.rvv-button--trigger[data-position=left]{left:24px}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button{bottom:16px}.rvv-button[data-position=right]{right:16px}.rvv-button[data-position=left]{left:16px}}dialog.rvv-dialog{border-radius:var(--radius-base);opacity:0;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);transition:opacity .2s ease,transform .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:0 0;border:none;margin:auto;padding:0;overflow:visible;transform:scale(.96)translateY(10px)}dialog.rvv-dialog[open]{opacity:1;transform:scale(1)translateY(0)}@starting-style{dialog.rvv-dialog[open]{opacity:0;transform:scale(.96)translateY(10px)}}dialog.rvv-dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease,display allow-discrete .2s,overlay allow-discrete .2s;background:#00000080}dialog.rvv-dialog[open]::backdrop{opacity:1}@starting-style{dialog.rvv-dialog[open]::backdrop{opacity:0}}.rvv-dialog-wrapper{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);overflow:hidden}.rvv-dialog-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){dialog.rvv-dialog{border-radius:0;max-width:100vw;max-height:100dvh;margin:0}.rvv-dialog-wrapper{border-radius:0;width:100vw;height:100dvh}}
@@ -0,0 +1 @@
1
+ @layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:var(--rvv-z-index);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex;position:fixed}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s;bottom:24px}.rvv-button--trigger[data-position=right]{right:24px}.rvv-button--trigger[data-position=left]{left:24px}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button{bottom:16px}.rvv-button[data-position=right]{right:16px}.rvv-button[data-position=left]{left:16px}}.rvv-drawer{pointer-events:none;z-index:var(--rvv-z-index);background-color:#0000;transition:background-color .35s;position:fixed;inset:0}.rvv-drawer.open{pointer-events:auto;background-color:#0006}.rvv-drawer.open .rvv-drawer-wrapper{transform:translate(0)}.rvv-drawer-wrapper{background-color:var(--rvv-color-background);transition:transform .35s cubic-bezier(.4,0,.2,1);position:absolute;top:0;bottom:0;right:0;overflow:hidden;transform:translate(100%);box-shadow:-4px 0 24px #0000001f}.rvv-drawer-wrapper iframe{border:none;width:100%;height:100%;display:block}@media (width<=480px){.rvv-drawer-wrapper{width:100vw}}
@@ -0,0 +1 @@
1
+ @layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-button{all:unset;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:var(--rvv-z-index);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex;position:fixed}.rvv-button--trigger{background-color:var(--rvv-button-color);box-shadow:var(--rvv-shadow-base);color:var(--rvv-button-text-color);white-space:nowrap;border-radius:100px;padding:12px 20px;font-size:15px;font-weight:500;transition:transform .15s,box-shadow .15s;bottom:24px}.rvv-button--trigger[data-position=right]{right:24px}.rvv-button--trigger[data-position=left]{left:24px}.rvv-button--trigger:hover{color:var(--rvv-button-text-color);transform:scale(1.05)}.rvv-button--trigger:active,.rvv-button--trigger:hover{box-shadow:var(--rvv-shadow-base-hover)}.rvv-button--trigger:active{transform:scale(.95)}.rvv-button:has(.rvv-button-icon):not(:has(.rvv-button-label)){aspect-ratio:1;border-radius:50%;padding:14px}.rvv-button-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:1.15em;display:inline-flex;position:relative}.rvv-button-icon svg{fill:currentColor;width:1em;height:1em}.rvv-button-icon--close,.rvv-button-icon--open{justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:inline-flex}.rvv-button-icon--close{opacity:0;position:absolute;inset:0;transform:rotate(45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--open{opacity:0;transform:rotate(-45deg)scale(.5)}.rvv-button[data-open=true] .rvv-button-icon--close{opacity:1;transform:rotate(0)scale(1)}.rvv-button-label{flex:1 0 auto}@media (width<=480px){.rvv-button{bottom:16px}.rvv-button[data-position=right]{right:16px}.rvv-button[data-position=left]{left:16px}}.rvv-popover{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);opacity:0;transform-origin:100% 100%;max-width:100%;transition:opacity .15s ease,transform .15s ease,display allow-discrete .15s,overlay allow-discrete .15s;z-index:var(--rvv-z-index);display:none;position:fixed;bottom:96px;right:16px;overflow:hidden;transform:translateY(6px)scale(.99)}.rvv-popover.open{opacity:1;display:flex;transform:translateY(0)scale(1)}@starting-style{.rvv-popover.open{opacity:0;transform:translateY(6px)scale(.99)}}.rvv-popover iframe{border:none;width:100%;min-height:100%}.rvv-popover-wrapper{width:100%;min-width:360px;min-height:400px}@media (width<=480px){.rvv-popover{border-radius:var(--radius-base) var(--radius-base) 0 0;transform-origin:bottom;min-width:0;bottom:0;left:0;right:0;width:100%!important}}
@@ -0,0 +1 @@
1
+ @layer tokens{:root{--rvv-z-index:10001;--rvv-color-background:#fff;--rvv-color-foreground:#151426;--rvv-shadow-base:0 2px 12px 0 #0000001a;--rvv-shadow-base-hover:0 2px 12px 0 #0003;--radius-base:10px;--rvv-button-color:var(--rvv-color-foreground);--rvv-button-text-color:#fff}}.rvv-widget{background-color:var(--rvv-color-background);border-radius:var(--radius-base);box-shadow:var(--rvv-shadow-base);height:100%;min-height:inherit;width:100%;position:relative;overflow:hidden}.rvv-widget iframe{height:100%;min-height:inherit;border:none;width:100%;display:block}
@@ -0,0 +1,173 @@
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ let _revvue_embed = require("@revvue/embed");
3
+ let react = require("react");
4
+ let react_jsx_runtime = require("react/jsx-runtime");
5
+ //#region src/components/dialog/build-stable-deps.ts
6
+ function buildStableDeps$3(props) {
7
+ return [
8
+ props.tenant,
9
+ props.type,
10
+ props.app,
11
+ props.formId,
12
+ props.width,
13
+ props.height
14
+ ];
15
+ }
16
+ //#endregion
17
+ //#region src/components/dialog/dialog.tsx
18
+ var Dialog = (0, react.forwardRef)(function Dialog(props, ref) {
19
+ const instanceRef = (0, react.useRef)(null);
20
+ (0, react.useImperativeHandle)(ref, () => ({
21
+ open: () => void instanceRef.current?.open(),
22
+ close: () => void instanceRef.current?.close(),
23
+ toggle: () => void instanceRef.current?.toggle(),
24
+ refresh: () => void instanceRef.current?.refresh(),
25
+ focus: () => void instanceRef.current?.focus()
26
+ }), []);
27
+ (0, react.useEffect)(() => {
28
+ const instance = (0, _revvue_embed.createDialog)(props);
29
+ instanceRef.current = instance;
30
+ return () => {
31
+ instance.unmount();
32
+ instanceRef.current = null;
33
+ };
34
+ }, [...buildStableDeps$3(props)]);
35
+ return null;
36
+ });
37
+ //#endregion
38
+ //#region src/components/drawer/build-stable-deps.ts
39
+ function buildStableDeps$2(props) {
40
+ return [
41
+ props.tenant,
42
+ props.type,
43
+ props.app,
44
+ props.formId,
45
+ props.width,
46
+ props.height,
47
+ props.label,
48
+ props.icon,
49
+ props.position,
50
+ props.color,
51
+ props.textColor,
52
+ props.autoOpen,
53
+ props.autoOpenDelay
54
+ ];
55
+ }
56
+ //#endregion
57
+ //#region src/components/drawer/drawer.tsx
58
+ var Drawer = (0, react.forwardRef)(function Drawer(props, ref) {
59
+ const instanceRef = (0, react.useRef)(null);
60
+ (0, react.useImperativeHandle)(ref, () => ({
61
+ open: () => void instanceRef.current?.open(),
62
+ close: () => void instanceRef.current?.close(),
63
+ toggle: () => void instanceRef.current?.toggle(),
64
+ refresh: () => void instanceRef.current?.refresh(),
65
+ focus: () => void instanceRef.current?.focus()
66
+ }), []);
67
+ (0, react.useEffect)(() => {
68
+ const instance = (0, _revvue_embed.createDrawer)(props);
69
+ instanceRef.current = instance;
70
+ return () => {
71
+ instance.unmount();
72
+ instanceRef.current = null;
73
+ };
74
+ }, [...buildStableDeps$2(props)]);
75
+ return null;
76
+ });
77
+ //#endregion
78
+ //#region src/components/popover/build-stable-deps.ts
79
+ function buildStableDeps$1(props) {
80
+ return [
81
+ props.tenant,
82
+ props.type,
83
+ props.app,
84
+ props.formId,
85
+ props.width,
86
+ props.height,
87
+ props.label,
88
+ props.icon,
89
+ props.position,
90
+ props.color,
91
+ props.textColor,
92
+ props.autoOpen,
93
+ props.autoOpenDelay
94
+ ];
95
+ }
96
+ //#endregion
97
+ //#region src/components/popover/popover.tsx
98
+ /**
99
+ * Renders an embedded Revvue form/chat as a floating popover button.
100
+ *
101
+ * The component manages no DOM of its own — it delegates entirely to the
102
+ * `createPopover` factory, which appends the button and panel to `document.body`.
103
+ * Use the forwarded ref to imperatively open, close, or toggle the popover.
104
+ *
105
+ * @example
106
+ * ```tsx
107
+ * const ref = useRef<PopoverRef>(null)
108
+ *
109
+ * <Popover ref={ref} tenant="acme" app="chat" type="popover" label="Chat with us" />
110
+ *
111
+ * <button onClick={() => ref.current?.open()}>Open popover</button>
112
+ * ```
113
+ */
114
+ var Popover = (0, react.forwardRef)(function Popover(props, ref) {
115
+ const instanceRef = (0, react.useRef)(null);
116
+ (0, react.useImperativeHandle)(ref, () => ({
117
+ open: () => void instanceRef.current?.open(),
118
+ close: () => void instanceRef.current?.close(),
119
+ toggle: () => void instanceRef.current?.toggle(),
120
+ refresh: () => void instanceRef.current?.refresh(),
121
+ focus: () => void instanceRef.current?.focus()
122
+ }), []);
123
+ (0, react.useEffect)(() => {
124
+ const instance = (0, _revvue_embed.createPopover)(props);
125
+ instanceRef.current = instance;
126
+ return () => {
127
+ instance.unmount();
128
+ instanceRef.current = null;
129
+ };
130
+ }, [...buildStableDeps$1(props)]);
131
+ return null;
132
+ });
133
+ //#endregion
134
+ //#region src/components/widget/build-stable-deps.ts
135
+ function buildStableDeps(props) {
136
+ return [
137
+ props.tenant,
138
+ props.type,
139
+ props.app,
140
+ props.formId,
141
+ props.width,
142
+ props.height
143
+ ];
144
+ }
145
+ //#endregion
146
+ //#region src/components/widget/widget.tsx
147
+ var Widget = (0, react.forwardRef)(function Widget({ className, style, ...props }, ref) {
148
+ const containerRef = (0, react.useRef)(null);
149
+ const instanceRef = (0, react.useRef)(null);
150
+ (0, react.useImperativeHandle)(ref, () => ({
151
+ refresh: () => void instanceRef.current?.refresh(),
152
+ focus: () => void instanceRef.current?.focus()
153
+ }), []);
154
+ (0, react.useEffect)(() => {
155
+ if (!containerRef.current) return;
156
+ const instance = (0, _revvue_embed.createWidget)(props, containerRef.current);
157
+ instanceRef.current = instance;
158
+ return () => {
159
+ instance.unmount();
160
+ instanceRef.current = null;
161
+ };
162
+ }, [...buildStableDeps(props)]);
163
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
164
+ ref: containerRef,
165
+ className,
166
+ style
167
+ });
168
+ });
169
+ //#endregion
170
+ exports.Dialog = Dialog;
171
+ exports.Drawer = Drawer;
172
+ exports.Popover = Popover;
173
+ exports.Widget = Widget;
@@ -0,0 +1,169 @@
1
+ import { createDialog, createDrawer, createPopover, createWidget } from "@revvue/embed";
2
+ import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/dialog/build-stable-deps.ts
5
+ function buildStableDeps$3(props) {
6
+ return [
7
+ props.tenant,
8
+ props.type,
9
+ props.app,
10
+ props.formId,
11
+ props.width,
12
+ props.height
13
+ ];
14
+ }
15
+ //#endregion
16
+ //#region src/components/dialog/dialog.tsx
17
+ var Dialog = forwardRef(function Dialog(props, ref) {
18
+ const instanceRef = useRef(null);
19
+ useImperativeHandle(ref, () => ({
20
+ open: () => void instanceRef.current?.open(),
21
+ close: () => void instanceRef.current?.close(),
22
+ toggle: () => void instanceRef.current?.toggle(),
23
+ refresh: () => void instanceRef.current?.refresh(),
24
+ focus: () => void instanceRef.current?.focus()
25
+ }), []);
26
+ useEffect(() => {
27
+ const instance = createDialog(props);
28
+ instanceRef.current = instance;
29
+ return () => {
30
+ instance.unmount();
31
+ instanceRef.current = null;
32
+ };
33
+ }, [...buildStableDeps$3(props)]);
34
+ return null;
35
+ });
36
+ //#endregion
37
+ //#region src/components/drawer/build-stable-deps.ts
38
+ function buildStableDeps$2(props) {
39
+ return [
40
+ props.tenant,
41
+ props.type,
42
+ props.app,
43
+ props.formId,
44
+ props.width,
45
+ props.height,
46
+ props.label,
47
+ props.icon,
48
+ props.position,
49
+ props.color,
50
+ props.textColor,
51
+ props.autoOpen,
52
+ props.autoOpenDelay
53
+ ];
54
+ }
55
+ //#endregion
56
+ //#region src/components/drawer/drawer.tsx
57
+ var Drawer = forwardRef(function Drawer(props, ref) {
58
+ const instanceRef = useRef(null);
59
+ useImperativeHandle(ref, () => ({
60
+ open: () => void instanceRef.current?.open(),
61
+ close: () => void instanceRef.current?.close(),
62
+ toggle: () => void instanceRef.current?.toggle(),
63
+ refresh: () => void instanceRef.current?.refresh(),
64
+ focus: () => void instanceRef.current?.focus()
65
+ }), []);
66
+ useEffect(() => {
67
+ const instance = createDrawer(props);
68
+ instanceRef.current = instance;
69
+ return () => {
70
+ instance.unmount();
71
+ instanceRef.current = null;
72
+ };
73
+ }, [...buildStableDeps$2(props)]);
74
+ return null;
75
+ });
76
+ //#endregion
77
+ //#region src/components/popover/build-stable-deps.ts
78
+ function buildStableDeps$1(props) {
79
+ return [
80
+ props.tenant,
81
+ props.type,
82
+ props.app,
83
+ props.formId,
84
+ props.width,
85
+ props.height,
86
+ props.label,
87
+ props.icon,
88
+ props.position,
89
+ props.color,
90
+ props.textColor,
91
+ props.autoOpen,
92
+ props.autoOpenDelay
93
+ ];
94
+ }
95
+ //#endregion
96
+ //#region src/components/popover/popover.tsx
97
+ /**
98
+ * Renders an embedded Revvue form/chat as a floating popover button.
99
+ *
100
+ * The component manages no DOM of its own — it delegates entirely to the
101
+ * `createPopover` factory, which appends the button and panel to `document.body`.
102
+ * Use the forwarded ref to imperatively open, close, or toggle the popover.
103
+ *
104
+ * @example
105
+ * ```tsx
106
+ * const ref = useRef<PopoverRef>(null)
107
+ *
108
+ * <Popover ref={ref} tenant="acme" app="chat" type="popover" label="Chat with us" />
109
+ *
110
+ * <button onClick={() => ref.current?.open()}>Open popover</button>
111
+ * ```
112
+ */
113
+ var Popover = forwardRef(function Popover(props, ref) {
114
+ const instanceRef = useRef(null);
115
+ useImperativeHandle(ref, () => ({
116
+ open: () => void instanceRef.current?.open(),
117
+ close: () => void instanceRef.current?.close(),
118
+ toggle: () => void instanceRef.current?.toggle(),
119
+ refresh: () => void instanceRef.current?.refresh(),
120
+ focus: () => void instanceRef.current?.focus()
121
+ }), []);
122
+ useEffect(() => {
123
+ const instance = createPopover(props);
124
+ instanceRef.current = instance;
125
+ return () => {
126
+ instance.unmount();
127
+ instanceRef.current = null;
128
+ };
129
+ }, [...buildStableDeps$1(props)]);
130
+ return null;
131
+ });
132
+ //#endregion
133
+ //#region src/components/widget/build-stable-deps.ts
134
+ function buildStableDeps(props) {
135
+ return [
136
+ props.tenant,
137
+ props.type,
138
+ props.app,
139
+ props.formId,
140
+ props.width,
141
+ props.height
142
+ ];
143
+ }
144
+ //#endregion
145
+ //#region src/components/widget/widget.tsx
146
+ var Widget = forwardRef(function Widget({ className, style, ...props }, ref) {
147
+ const containerRef = useRef(null);
148
+ const instanceRef = useRef(null);
149
+ useImperativeHandle(ref, () => ({
150
+ refresh: () => void instanceRef.current?.refresh(),
151
+ focus: () => void instanceRef.current?.focus()
152
+ }), []);
153
+ useEffect(() => {
154
+ if (!containerRef.current) return;
155
+ const instance = createWidget(props, containerRef.current);
156
+ instanceRef.current = instance;
157
+ return () => {
158
+ instance.unmount();
159
+ instanceRef.current = null;
160
+ };
161
+ }, [...buildStableDeps(props)]);
162
+ return /* @__PURE__ */ jsx("div", {
163
+ ref: containerRef,
164
+ className,
165
+ style
166
+ });
167
+ });
168
+ //#endregion
169
+ export { Dialog, Drawer, Popover, Widget };
@@ -0,0 +1,3 @@
1
+ import { DialogProps } from './dialog';
2
+ export declare function buildStableDeps(props: DialogProps): (string | number | undefined)[];
3
+ //# sourceMappingURL=build-stable-deps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,mCAEjD"}
@@ -0,0 +1,6 @@
1
+ import { Dialog as DialogInstance, createDialog } from '@revvue/embed';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export type DialogProps = Parameters<typeof createDialog>[0];
4
+ export type DialogRef = Omit<DialogInstance, "unmount">;
5
+ export declare const Dialog: ForwardRefExoticComponent<DialogProps & RefAttributes<DialogRef>>;
6
+ //# sourceMappingURL=dialog.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,KAAK,yBAAyB,EAAc,KAAK,aAAa,EAA0C,MAAM,OAAO,CAAC;AAG/H,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7D,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;AAExD,eAAO,MAAM,MAAM,EAAE,yBAAyB,CAAC,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,CA4BpF,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './dialog';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { DrawerProps } from './drawer';
2
+ export declare function buildStableDeps(props: DrawerProps): (string | number | boolean | undefined)[];
3
+ //# sourceMappingURL=build-stable-deps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,6CAgBjD"}
@@ -0,0 +1,6 @@
1
+ import { Drawer as DrawerInstance, createDrawer } from '@revvue/embed';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export type DrawerProps = Parameters<typeof createDrawer>[0];
4
+ export type DrawerRef = Omit<DrawerInstance, "unmount">;
5
+ export declare const Drawer: ForwardRefExoticComponent<DrawerProps & RefAttributes<DrawerRef>>;
6
+ //# sourceMappingURL=drawer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,KAAK,yBAAyB,EAAc,KAAK,aAAa,EAA0C,MAAM,OAAO,CAAC;AAG/H,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7D,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;AAExD,eAAO,MAAM,MAAM,EAAE,yBAAyB,CAAC,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,CA4BpF,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './drawer';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
@@ -0,0 +1,5 @@
1
+ export * from './dialog';
2
+ export * from './drawer';
3
+ export * from './popover';
4
+ export * from './widget';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { PopoverProps } from './popover';
2
+ export declare function buildStableDeps(props: PopoverProps): (string | number | boolean | undefined)[];
3
+ //# sourceMappingURL=build-stable-deps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,6CAoBlD"}
@@ -0,0 +1,2 @@
1
+ export * from './popover';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
@@ -0,0 +1,29 @@
1
+ import { Popover as PopoverInstance, createPopover } from '@revvue/embed';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ /**
4
+ * All options accepted by the underlying `createPopover` factory.
5
+ * Derived from the factory signature so it stays in sync automatically.
6
+ */
7
+ export type PopoverProps = Parameters<typeof createPopover>[0];
8
+ /**
9
+ * Imperative handle exposed via `ref` on the `<Popover>` component.
10
+ */
11
+ export type PopoverRef = Omit<PopoverInstance, "unmount">;
12
+ /**
13
+ * Renders an embedded Revvue form/chat as a floating popover button.
14
+ *
15
+ * The component manages no DOM of its own — it delegates entirely to the
16
+ * `createPopover` factory, which appends the button and panel to `document.body`.
17
+ * Use the forwarded ref to imperatively open, close, or toggle the popover.
18
+ *
19
+ * @example
20
+ * ```tsx
21
+ * const ref = useRef<PopoverRef>(null)
22
+ *
23
+ * <Popover ref={ref} tenant="acme" app="chat" type="popover" label="Chat with us" />
24
+ *
25
+ * <button onClick={() => ref.current?.open()}>Open popover</button>
26
+ * ```
27
+ */
28
+ export declare const Popover: ForwardRefExoticComponent<PopoverProps & RefAttributes<PopoverRef>>;
29
+ //# sourceMappingURL=popover.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,KAAK,yBAAyB,EAAc,KAAK,aAAa,EAA0C,MAAM,OAAO,CAAC;AAG/H;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;AAE1D;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,OAAO,EAAE,yBAAyB,CAAC,YAAY,GAAG,aAAa,CAAC,UAAU,CAAC,CA+BvF,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { WidgetProps } from './widget';
2
+ export declare function buildStableDeps(props: WidgetProps): (string | number | undefined)[];
3
+ //# sourceMappingURL=build-stable-deps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"build-stable-deps.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/build-stable-deps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,mCAEjD"}
@@ -0,0 +1,2 @@
1
+ export * from './widget';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
@@ -0,0 +1,11 @@
1
+ import { Widget as WidgetInstance, createWidget } from '@revvue/embed';
2
+ import { CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';
3
+ export type WidgetProps = Parameters<typeof createWidget>[0] & {
4
+ /** CSS class applied to the widget container div. */
5
+ className?: string;
6
+ /** Inline styles applied to the widget container div. */
7
+ style?: CSSProperties;
8
+ };
9
+ export type WidgetRef = Omit<WidgetInstance, "unmount">;
10
+ export declare const Widget: ForwardRefExoticComponent<WidgetProps & RefAttributes<WidgetRef>>;
11
+ //# sourceMappingURL=widget.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,yBAAyB,EAAc,KAAK,aAAa,EAA0C,MAAM,OAAO,CAAC;AAGnJ,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG;IAC7D,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;AAExD,eAAO,MAAM,MAAM,EAAE,yBAAyB,CAAC,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,CA4BnF,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './components';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
package/package.json ADDED
@@ -0,0 +1,62 @@
1
+ {
2
+ "name": "@revvue/embed-react",
3
+ "version": "0.0.0-beta.1",
4
+ "private": false,
5
+ "type": "module",
6
+ "publishConfig": {
7
+ "registry": "https://registry.npmjs.org",
8
+ "access": "public"
9
+ },
10
+ "exports": {
11
+ ".": {
12
+ "types": "./dist/types/index.d.ts",
13
+ "import": "./dist/package.mjs",
14
+ "require": "./dist/package.cjs"
15
+ },
16
+ "./css/popover.css": "./dist/css/popover.css",
17
+ "./css/drawer.css": "./dist/css/drawer.css",
18
+ "./css/widget.css": "./dist/css/widget.css",
19
+ "./css/dialog.css": "./dist/css/dialog.css"
20
+ },
21
+ "main": "./dist/package.cjs",
22
+ "module": "./dist/package.mjs",
23
+ "types": "./dist/types/index.d.ts",
24
+ "files": [
25
+ "dist"
26
+ ],
27
+ "scripts": {
28
+ "build": "vite build && node scripts/copy-css.mjs",
29
+ "dev": "vite build --watch",
30
+ "test": "vitest run",
31
+ "test:watch": "vitest",
32
+ "lint": "biome lint ./src",
33
+ "check-types": "tsc --noEmit"
34
+ },
35
+ "peerDependencies": {
36
+ "react": ">=17",
37
+ "react-dom": ">=17"
38
+ },
39
+ "peerDependenciesMeta": {
40
+ "react-dom": {
41
+ "optional": true
42
+ }
43
+ },
44
+ "dependencies": {
45
+ "@revvue/embed": "workspace:*"
46
+ },
47
+ "devDependencies": {
48
+ "@repo/typescript-config": "workspace:*",
49
+ "@testing-library/jest-dom": "^6.6.3",
50
+ "@testing-library/react": "^16.1.0",
51
+ "@types/react": "^19.0.0",
52
+ "@types/react-dom": "^19.0.0",
53
+ "@vitejs/plugin-react": "^6.0.1",
54
+ "@vitest/coverage-v8": "^4.1.5",
55
+ "jsdom": "^26.1.0",
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0",
58
+ "vite": "^8.0.10",
59
+ "vite-plugin-dts": "^4.5.4",
60
+ "vitest": "^4.1.5"
61
+ }
62
+ }