@revvue/embed 0.0.0-beta.3 → 0.0.0-beta.4

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 (41) hide show
  1. package/dist/browser/css/dialog.css +1 -1
  2. package/dist/browser/css/drawer.css +1 -1
  3. package/dist/browser/css/popover.css +1 -1
  4. package/dist/browser/embed.js +2 -2
  5. package/dist/package/css/dialog.css +1 -1
  6. package/dist/package/css/drawer.css +1 -1
  7. package/dist/package/css/popover.css +1 -1
  8. package/dist/package/package.cjs +225 -101
  9. package/dist/package/package.mjs +225 -101
  10. package/dist/package/types/core/button-options.d.ts +13 -0
  11. package/dist/package/types/core/button-options.d.ts.map +1 -1
  12. package/dist/package/types/core/create-iframe.d.ts +2 -0
  13. package/dist/package/types/core/create-iframe.d.ts.map +1 -1
  14. package/dist/package/types/core/embed-types.d.ts +12 -0
  15. package/dist/package/types/core/embed-types.d.ts.map +1 -1
  16. package/dist/package/types/core/iframe-messages.d.ts +6 -0
  17. package/dist/package/types/core/iframe-messages.d.ts.map +1 -0
  18. package/dist/package/types/factories/create-dialog/create-dialog.d.ts +2 -1
  19. package/dist/package/types/factories/create-dialog/create-dialog.d.ts.map +1 -1
  20. package/dist/package/types/factories/create-drawer/create-drawer.d.ts +2 -2
  21. package/dist/package/types/factories/create-drawer/create-drawer.d.ts.map +1 -1
  22. package/dist/package/types/factories/create-popover/create-popover.d.ts +2 -1
  23. package/dist/package/types/factories/create-popover/create-popover.d.ts.map +1 -1
  24. package/dist/package/types/factories/create-widget/create-widget.d.ts +2 -1
  25. package/dist/package/types/factories/create-widget/create-widget.d.ts.map +1 -1
  26. package/dist/package/types/package.d.ts +1 -0
  27. package/dist/package/types/package.d.ts.map +1 -1
  28. package/dist/package/types/utils/brand-types.d.ts +7 -0
  29. package/dist/package/types/utils/brand-types.d.ts.map +1 -1
  30. package/dist/package/types/utils/built-button/built-button.d.ts.map +1 -1
  31. package/dist/package/types/utils/create-closing-guard.d.ts +6 -0
  32. package/dist/package/types/utils/create-closing-guard.d.ts.map +1 -0
  33. package/dist/package/types/utils/icons.d.ts +3 -0
  34. package/dist/package/types/utils/icons.d.ts.map +1 -0
  35. package/dist/package/types/utils/open-state-store/index.d.ts +2 -0
  36. package/dist/package/types/utils/open-state-store/index.d.ts.map +1 -0
  37. package/dist/package/types/utils/open-state-store/open-state-store.d.ts +18 -0
  38. package/dist/package/types/utils/open-state-store/open-state-store.d.ts.map +1 -0
  39. package/dist/package/types/utils/open-state-store/open-state-store.spec.d.ts +2 -0
  40. package/dist/package/types/utils/open-state-store/open-state-store.spec.d.ts.map +1 -0
  41. package/package.json +1 -1
package/dist/browser/css/dialog.css CHANGED
@@ -1 +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}}
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;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.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}.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--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.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--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[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}}
package/dist/browser/css/drawer.css CHANGED
@@ -1 +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}}
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;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.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}.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--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.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--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[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}}
package/dist/browser/css/popover.css CHANGED
@@ -1 +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}}
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;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.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}.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--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.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--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[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}}
package/dist/browser/embed.js CHANGED
@@ -1,2 +1,2 @@
1
- var rvv=(function(){var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r},n=e=>e;function r(e){if(e){let t=e.src;if(t.includes(`&refresh`))e.src=t.split(`&refresh#`).join(`#`);else{let n=t.split(`#`);n[0]=`${n[0]}&refresh`,e.src=n.join(`#`)}}}function i(){return`http://localhost:5173/`}function a(e){let t=i(),n=crypto.randomUUID(),a=document.createElement(`iframe`);return a.src=t,a.dataset.testid=`iframe`,a.style.border=`0px`,a.allow=`microphone; camera`,a.id=n,{iframe:a,focus:()=>{a.contentWindow?.postMessage(`rvv-embed-focus`,`*`)},refresh:()=>r(a),embedId:n}}var o=e=>s(e)&&c(e),s=e=>!!e.parentNode,c=e=>e.style.display!==`none`,l={open:o,inPage:s,visible:c,browser:()=>typeof document<`u`&&typeof window<`u`};function u(e){let t=new AbortController;return window.addEventListener(`keydown`,e,{signal:t.signal}),t}function d(e){let t=u(n=>{n.key===`Escape`&&(e(),t.abort())})}var f=e=>typeof e==`string`&&!e.match(/^[0-9]+$/)?e:`${e}px`,p=(e,{width:t,height:n})=>(t&&(e.style.width=f(t)),n&&(e.style.height=f(n)),e);function m(){let e=document.createElement(`dialog`);return e.classList.add(`rvv-dialog`),e}function h(){let e=document.createElement(`div`);return e.classList.add(`rvv-dialog-wrapper`),e}function g(e){e.remove()}function _(e,t){if(!l.browser())return{toggle:()=>{},open:()=>{},close:()=>{},unmount:()=>{},refresh:()=>{},focus:()=>{}};let{iframe:n,refresh:r,focus:i}=a(e),o=t??document.body,s=m(),c=h();p(c,{width:e.width,height:e.height}),o.append(s),c.append(n),n.onload=e=>{e?.isTrusted&&(s.showModal(),d(f))};function u(){l.open(c)||(s.append(c),s.showModal())}function f(){l.open(c)&&(s.close(),g(c))}function _(){l.open(c)?f():u()}function v(){g(s)}return{toggle:_,open:u,close:f,unmount:v,refresh:r,focus:i}}var v=`
2
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-icon lucide-message-square"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>`,y=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;function b(){let e=document.createElement(`span`);e.classList.add(`rvv-button-icon--open`),e.innerHTML=v;let t=document.createElement(`span`);return t.classList.add(`rvv-button-icon--close`),t.innerHTML=y,{openEl:e,closeEl:t}}function x(e){let t=document.createElement(`button`);t.classList.add(`rvv-button`,`rvv-button--trigger`),t.setAttribute(`type`,`button`),t.dataset.position=e.position??`right`,t.dataset.open=`false`,e.color&&t.style.setProperty(`--rvv-button-color`,e.color),e.textColor&&t.style.setProperty(`--rvv-button-text-color`,e.textColor);let n=document.createElement(`span`);if(n.classList.add(`rvv-button-icon`),n.setAttribute(`aria-hidden`,`true`),e.label){let n=document.createElement(`span`);n.classList.add(`rvv-button-label`),n.textContent=e.label,t.append(n)}if(e.icon)n.innerHTML=e.icon;else if(!e.label){let{openEl:e,closeEl:t}=b();n.append(e,t)}n.childNodes.length>0&&t.append(n);function r(e){t.dataset.open=String(e)}return{el:t,setOpen:r}}function S(){let e=document.createElement(`div`);return e.classList.add(`rvv-drawer`),e}function C(){let e=document.createElement(`div`);return e.classList.add(`rvv-drawer-wrapper`),e}function w(e){e.remove()}function T(e,t){if(!l.browser())return{toggle:()=>{},open:()=>{},close:()=>{},unmount:()=>{},refresh:()=>{},focus:()=>{}};let{iframe:n,refresh:r,focus:i}=a(e),o=t??document.body,s=S(),c=C();p(c,{width:e.width,height:e.height}),o.append(s),c.append(n);let{autoOpen:u=!1,autoOpenDelay:f=0}=e,m=()=>{},{el:h,setOpen:g}=x(e);m=g,h.addEventListener(`click`,()=>y()),document.body.append(h),n.onload=e=>{e?.isTrusted&&(s.classList.add(`open`),d(v))};function _(){l.open(c)||(s.append(c),m(!0))}function v(){l.open(c)&&(w(c),s.classList.remove(`open`),m(!1))}function y(){l.open(c)?v():_()}function b(){h?.remove(),w(s)}return u&&(f>0?setTimeout(()=>_(),f):_()),{toggle:y,open:_,close:v,unmount:b,refresh:r,focus:i}}function E(){let e=document.createElement(`div`);return e.classList.add(`rvv-popover`),e}function D(){let e=document.createElement(`div`);return e.classList.add(`rvv-popover-wrapper`),e}function O(e){e.remove()}function k(e,t){if(!l.browser())return{toggle:()=>{},close:()=>{},open:()=>{},unmount:()=>{},refresh:()=>{},focus:()=>{}};let{iframe:n,refresh:r,focus:i}=a(e),o=t??document.body,s=E(),c=D();p(c,{width:e.width,height:e.height}),o.append(s),c.append(n);let{autoOpen:u=!1,autoOpenDelay:f=0}=e,m=()=>{},{el:h,setOpen:g}=x(e);m=g,h.addEventListener(`click`,()=>_()),document.body.append(h);function _(){l.open(c)?y():v()}n.onload=e=>{e?.isTrusted&&(s.classList.add(`open`),d(y))};function v(){l.open(c)||(s.append(c),m(!0))}function y(){l.open(c)&&(s.classList.remove(`open`),m(!1),s.addEventListener(`transitionend`,()=>O(c),{once:!0}))}function b(){h?.remove(),O(s)}return u&&(f>0?setTimeout(()=>v(),f):v()),{toggle:_,close:y,open:v,unmount:b,refresh:r,focus:i}}function A(e,t){if(!l.browser())return{unmount:()=>{},refresh:()=>{},focus:()=>{}};let{iframe:n,refresh:r,focus:i}=a(e),o=t??document.body,s=document.createElement(`div`);s.classList.add(`rvv-widget`),o.append(s),p(s,{width:e.width,height:e.height}),s.append(n);function c(){n.remove()}return{unmount:c,refresh:r,focus:i}}var j=t({createDialog:()=>_,createDrawer:()=>T,createPopover:()=>k,createWidget:()=>A});function M(e,t={}){let n={};for(let r in e){let i=e[r],a=t[r];if(a!==void 0)n[r]=i.parse?i.parse(a):a;else if(i.default!==void 0)n[r]=i.default;else if(i.required)throw Error(`[embed] Missing required env variable: ${r}`)}return n}var N=e=>e.replace(/\/$/,``),P=M({CHAT_URL:{default:`https://app.revvue.ai/chat`,parse:N},FORM_URL:{default:`https://app.revvue.ai/survey`,parse:N},CDN_URL:{default:`https://cdn.revvue.ai/v1`,parse:N},EMBED_LOOKUP_URL:{default:`https://app.revvue.ai/api/v1/embeds`,parse:N},DEBUG:{default:!1,parse:e=>e===`true`}},{BASE_URL:`/`,DEV:!1,MODE:`production`,PROD:!0,SSR:!1}),F={widget:`widget.css`,popover:`popover.css`,drawer:`drawer.css`,dialog:`dialog.css`},I=e=>`${P.CDN_URL}/css/${F[e]}`,L=e=>{let t=I(e);if(!document.querySelector(`link[href="${t}"]`)){let e=document.createElement(`link`);e.rel=`stylesheet`,e.href=t,document.head.append(e)}};async function R(e){let t=await fetch(`${P.EMBED_LOOKUP_URL}/${e}`);if(!t.ok)throw Error(`[rvv] Failed to resolve embed "${e}": ${t.status} ${t.statusText}`);return await t.json()}var z={popover:k,widget:A,drawer:T,dialog:_};async function B(e){if(e.dataset.rvvLoaded===`true`||e.dataset.rvvLoading===`true`)return;let t=e.getAttribute(`data-rvv-embed`);if(!t)throw Error(`[rvv] Missing id on data-rvv-embed`);e.dataset.rvvLoading=`true`;try{let r=await R(n(t));if(!r.type)throw Error(`[rvv] Missing type on embed options`);L(r.type),z[r.type](r,e),e.dataset.rvvLoaded=`true`}finally{delete e.dataset.rvvLoading}}async function V(e=document){let t=Array.from(e.querySelectorAll(`[data-rvv-embed]`));await Promise.all(t.map(B))}function H(){V()}return document.addEventListener(`DOMContentLoaded`,H,!1),(document.readyState===`interactive`||document.readyState===`complete`)&&H(),{...j,load:H}})();
1
+ var rvv=(function(){var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r},n=e=>e;function r(e){if(e){let t=e.src;if(t.includes(`&refresh`))e.src=t.split(`&refresh#`).join(`#`);else{let n=t.split(`#`);n[0]=`${n[0]}&refresh`,e.src=n.join(`#`)}}}var i={close:`rvv-embed-close`,focus:`rvv-embed-focus`};function a(){return`http://localhost:5173/`}function o(e){let t=a(),n=crypto.randomUUID(),o=document.createElement(`iframe`);return o.src=t,o.dataset.testid=`iframe`,o.style.border=`0px`,o.allow=`microphone; camera`,o.id=n,{iframe:o,focus:()=>{o.contentWindow?.postMessage(i.focus,`*`)},refresh:()=>r(o),embedId:n,onMessage:e=>{let t=t=>{t.source===o.contentWindow&&e(t.data)};return window.addEventListener(`message`,t),()=>window.removeEventListener(`message`,t)}}}function s(){let e=null;function t(){return e!==null}function n(t,n){let r=new AbortController;t.addEventListener(`transitionend`,()=>{e=null,n()},{signal:r.signal,once:!0}),e=()=>{r.abort(),e=null}}function r(){e?.()}return{isClosing:t,scheduleClose:n,cancelPendingClose:r}}var c=e=>l(e)&&u(e),l=e=>!!e.parentNode,u=e=>e.style.display!==`none`,d={open:c,inPage:l,visible:u,browser:()=>typeof document<`u`&&typeof window<`u`};function f(e){let t=new AbortController;return window.addEventListener(`keydown`,e,{signal:t.signal}),t}function p(e){let t=f(n=>{n.key===`Escape`&&(e(),t.abort())})}function m(e=!1){let t=e,n=new Set;return{getState:()=>t,setState(e){if(t!==e){t=e;for(let e of n)e()}},subscribe(e){return n.add(e),()=>{n.delete(e)}}}}var h=e=>typeof e==`string`&&!e.match(/^[0-9]+$/)?e:`${e}px`,g=(e,{width:t,height:n})=>(t&&(e.style.width=h(t)),n&&(e.style.height=h(n)),e),_=()=>{};function v(){let e=document.createElement(`dialog`);return e.classList.add(`rvv-dialog`),e}function y(){let e=document.createElement(`div`);return e.classList.add(`rvv-dialog-wrapper`),e}function b(e){e.remove()}function x(e,t){let n=m();if(!d.browser())return{toggle:_,open:_,close:_,unmount:_,refresh:_,focus:_,isOpen:n.getState,subscribe:n.subscribe};let{iframe:r,refresh:a,focus:c,onMessage:l}=o(e),u=t??document.body,f=v(),h=y();g(h,{width:e.width,height:e.height}),u.append(f),h.append(r),r.onload=e=>{e?.isTrusted&&(f.showModal(),p(C))};let x=s();function S(){if(d.open(h)){if(x.isClosing()){x.cancelPendingClose(),n.setState(!0);return}return}f.append(h),f.showModal(),n.setState(!0)}function C(){d.open(h)&&(f.close(),x.scheduleClose(f,()=>b(h)),n.setState(!1))}function w(){d.open(h)?C():S()}let T=l(e=>{e===i.close&&C()});function E(){b(f),T()}return{toggle:w,open:S,close:C,unmount:E,refresh:a,focus:c,isOpen:n.getState,subscribe:n.subscribe}}var S=()=>{};function C(){let e=document.createElement(`div`);return e.classList.add(`rvv-drawer`),e}function w(){let e=document.createElement(`div`);return e.classList.add(`rvv-drawer-wrapper`),e}function T(e){e.remove()}function E(e,t){let n=m();if(!d.browser())return{toggle:S,open:S,close:S,unmount:S,refresh:S,focus:S,isOpen:n.getState,subscribe:n.subscribe};let{iframe:r,refresh:a,focus:c,onMessage:l}=o(e),u=t??document.body,f=C(),h=w();g(h,{width:e.width,height:e.height}),u.append(f),h.append(r),r.onload=e=>{e?.isTrusted&&(f.classList.add(`open`),p(y))};let _=s();function v(){if(d.open(h)){if(_.isClosing()){_.cancelPendingClose(),f.classList.add(`open`),n.setState(!0);return}return}f.append(h),n.setState(!0)}function y(){d.open(h)&&(f.classList.remove(`open`),n.setState(!1),_.scheduleClose(f,()=>T(h)))}function b(){d.open(h)?y():v()}let x=l(e=>{e===i.close&&y()});function E(){T(f),x()}return{toggle:b,open:v,close:y,unmount:E,refresh:a,focus:c,isOpen:n.getState,subscribe:n.subscribe}}var D=`
2
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-icon lucide-message-square"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>`,O=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;function k(){let e=document.createElement(`span`);e.classList.add(`rvv-button-icon--open`),e.innerHTML=D;let t=document.createElement(`span`);return t.classList.add(`rvv-button-icon--close`),t.innerHTML=O,{openEl:e,closeEl:t}}function A(e){let t=document.createElement(`button`);t.classList.add(`rvv-button`,`rvv-button--trigger`),t.setAttribute(`type`,`button`),t.dataset.position=e.position??`right`,t.dataset.open=`false`,e.color&&t.style.setProperty(`--rvv-button-color`,e.color),e.textColor&&t.style.setProperty(`--rvv-button-text-color`,e.textColor);let n=document.createElement(`span`);if(n.classList.add(`rvv-button-icon`),n.setAttribute(`aria-hidden`,`true`),e.label){let n=document.createElement(`span`);n.classList.add(`rvv-button-label`),n.textContent=e.label,t.append(n)}if(e.icon)n.innerHTML=e.icon;else if(!e.label){let{openEl:e,closeEl:t}=k();n.append(e,t)}n.childNodes.length>0&&t.append(n);function r(e){t.dataset.open=String(e)}return{el:t,setOpen:r}}var j=()=>{};function M(){let e=document.createElement(`div`);return e.classList.add(`rvv-popover`),e}function N(){let e=document.createElement(`div`);return e.classList.add(`rvv-popover-wrapper`),e}function P(e){e.remove()}function F(e,t){let n=m();if(!d.browser())return{toggle:j,close:j,open:j,unmount:j,refresh:j,focus:j,isOpen:n.getState,subscribe:n.subscribe};let{iframe:r,refresh:a,focus:c,onMessage:l}=o(e),u=t??document.body,f=M(),h=N();g(h,{width:e.width,height:e.height}),u.append(f),h.append(r);let{autoOpen:_=!1,autoOpenDelay:v=0,trigger:y=`default`}=e,b=j,x=j;if(y===`default`){let{el:t,setOpen:n}=A(e);t.classList.add(`rvv-button--trigger-popover`),b=n,t.addEventListener(`click`,()=>S()),document.body.append(t),x=()=>t.remove()}function S(){d.open(h)?T():w()}r.onload=e=>{e?.isTrusted&&(f.classList.add(`open`),p(T))};let C=s();function w(){if(d.open(h)){if(C.isClosing()){C.cancelPendingClose(),f.classList.add(`open`),n.setState(!0);return}return}f.append(h),b(!0),n.setState(!0)}function T(){d.open(h)&&(f.classList.remove(`open`),b(!1),n.setState(!1),C.scheduleClose(f,()=>P(h)))}let E=l(e=>{e===i.close&&T()});function D(){x(),P(f),E()}return _&&(v>0?setTimeout(()=>w(),v):w()),{toggle:S,close:T,open:w,unmount:D,refresh:a,focus:c,isOpen:n.getState,subscribe:n.subscribe}}var I=()=>{};function L(e,t){if(!d.browser())return{unmount:I,refresh:I,focus:I};let{iframe:n,refresh:r,focus:i}=o(e),a=t??document.body,s=document.createElement(`div`);s.classList.add(`rvv-widget`),a.append(s),g(s,{width:e.width,height:e.height}),s.append(n);function c(){n.remove()}return{unmount:c,refresh:r,focus:i}}var R=t({createDialog:()=>x,createDrawer:()=>E,createPopover:()=>F,createWidget:()=>L});function z(e,t={}){let n={};for(let r in e){let i=e[r],a=t[r];if(a!==void 0)n[r]=i.parse?i.parse(a):a;else if(i.default!==void 0)n[r]=i.default;else if(i.required)throw Error(`[embed] Missing required env variable: ${r}`)}return n}var B=e=>e.replace(/\/$/,``),V=z({CHAT_URL:{default:`https://app.revvue.ai/chat`,parse:B},FORM_URL:{default:`https://app.revvue.ai/survey`,parse:B},CDN_URL:{default:`https://cdn.revvue.ai/v1`,parse:B},EMBED_LOOKUP_URL:{default:`https://app.revvue.ai/api/v1/embeds`,parse:B},DEBUG:{default:!1,parse:e=>e===`true`}},{BASE_URL:`/`,DEV:!1,MODE:`production`,PROD:!0,SSR:!1}),H={widget:`widget.css`,popover:`popover.css`,drawer:`drawer.css`,dialog:`dialog.css`},U=e=>`${V.CDN_URL}/css/${H[e]}`,W=e=>{let t=U(e);if(!document.querySelector(`link[href="${t}"]`)){let e=document.createElement(`link`);e.rel=`stylesheet`,e.href=t,document.head.append(e)}};async function G(e){let t=await fetch(`${V.EMBED_LOOKUP_URL}/${e}`);if(!t.ok)throw Error(`[rvv] Failed to resolve embed "${e}": ${t.status} ${t.statusText}`);return await t.json()}var K={popover:F,widget:L,drawer:E,dialog:x};async function q(e){if(e.dataset.rvvLoaded===`true`||e.dataset.rvvLoading===`true`)return;let t=e.getAttribute(`data-rvv-embed`);if(!t)throw Error(`[rvv] Missing id on data-rvv-embed`);e.dataset.rvvLoading=`true`;try{let r=await G(n(t));if(!r.type)throw Error(`[rvv] Missing type on embed options`);W(r.type),K[r.type](r,e),e.dataset.rvvLoaded=`true`}finally{delete e.dataset.rvvLoading}}async function J(e=document){let t=Array.from(e.querySelectorAll(`[data-rvv-embed]`));await Promise.all(t.map(q))}function Y(){J()}return document.addEventListener(`DOMContentLoaded`,Y,!1),(document.readyState===`interactive`||document.readyState===`complete`)&&Y(),{...R,load:Y}})();
package/dist/package/css/dialog.css CHANGED
@@ -1 +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}}
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;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.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}.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--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.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--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[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}}
package/dist/package/css/drawer.css CHANGED
@@ -1 +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}}
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;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.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}.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--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.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--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[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}}
package/dist/package/css/popover.css CHANGED
@@ -1 +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}}
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;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:8px;font-family:inherit;line-height:1;display:inline-flex}.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}.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--trigger-popover{z-index:var(--rvv-z-index);position:fixed;bottom:24px}.rvv-button--trigger-popover[data-position=right]{right:24px}.rvv-button--trigger-popover[data-position=left]{left:24px}.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--trigger-popover{bottom:16px}.rvv-button--trigger-popover[data-position=right]{right:16px}.rvv-button--trigger-popover[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}}
package/dist/package/package.cjs CHANGED
@@ -17,6 +17,12 @@ function refreshIframe(iframe) {
17
17
  }
18
18
  }
19
19
  //#endregion
20
+ //#region src/core/iframe-messages.ts
21
+ var IFRAME_MESSAGES = {
22
+ close: "rvv-embed-close",
23
+ focus: "rvv-embed-focus"
24
+ };
25
+ //#endregion
20
26
  //#region src/core/create-iframe.ts
21
27
  function getIframeSrc() {
22
28
  return "http://localhost:5173/";
@@ -32,13 +38,52 @@ function createIframe(_options) {
32
38
  iframe.id = embedId;
33
39
  const refresh = () => refreshIframe(iframe);
34
40
  const focus = () => {
35
- iframe.contentWindow?.postMessage("rvv-embed-focus", "*");
41
+ iframe.contentWindow?.postMessage(IFRAME_MESSAGES.focus, "*");
42
+ };
43
+ const onMessage = (handler) => {
44
+ const listener = (event) => {
45
+ if (event.source !== iframe.contentWindow) return;
46
+ handler(event.data);
47
+ };
48
+ window.addEventListener("message", listener);
49
+ return () => window.removeEventListener("message", listener);
36
50
  };
37
51
  return {
38
52
  iframe,
39
53
  focus,
40
54
  refresh,
41
- embedId
55
+ embedId,
56
+ onMessage
57
+ };
58
+ }
59
+ //#endregion
60
+ //#region src/utils/create-closing-guard.ts
61
+ function createClosingGuard() {
62
+ let cancelClose = null;
63
+ function isClosing() {
64
+ return cancelClose !== null;
65
+ }
66
+ function scheduleClose(element, onDone) {
67
+ const abortController = new AbortController();
68
+ element.addEventListener("transitionend", () => {
69
+ cancelClose = null;
70
+ onDone();
71
+ }, {
72
+ signal: abortController.signal,
73
+ once: true
74
+ });
75
+ cancelClose = () => {
76
+ abortController.abort();
77
+ cancelClose = null;
78
+ };
79
+ }
80
+ function cancelPendingClose() {
81
+ cancelClose?.();
82
+ }
83
+ return {
84
+ isClosing,
85
+ scheduleClose,
86
+ cancelPendingClose
42
87
  };
43
88
  }
44
89
  //#endregion
@@ -73,6 +118,26 @@ function onEscape(callback) {
73
118
  });
74
119
  }
75
120
  //#endregion
121
+ //#region src/utils/open-state-store/open-state-store.ts
122
+ function createOpenStateStore(initial = false) {
123
+ let state = initial;
124
+ const listeners = /* @__PURE__ */ new Set();
125
+ return {
126
+ getState: () => state,
127
+ setState(next) {
128
+ if (state === next) return;
129
+ state = next;
130
+ for (const listener of listeners) listener();
131
+ },
132
+ subscribe(listener) {
133
+ listeners.add(listener);
134
+ return () => {
135
+ listeners.delete(listener);
136
+ };
137
+ }
138
+ };
139
+ }
140
+ //#endregion
76
141
  //#region src/utils/set-element-size.ts
77
142
  var getValueWithUnits = (value) => {
78
143
  if (typeof value === "string" && !value.match(/^[0-9]+$/)) return value;
@@ -85,6 +150,7 @@ var setElementSize = (element, { width, height }) => {
85
150
  };
86
151
  //#endregion
87
152
  //#region src/factories/create-dialog/create-dialog.ts
153
+ var noop$3 = () => {};
88
154
  function createDialogElement() {
89
155
  const container = document.createElement("dialog");
90
156
  container.classList.add("rvv-dialog");
@@ -99,15 +165,18 @@ function unmountElement$2(element) {
99
165
  element.remove();
100
166
  }
101
167
  function createDialog(options, element) {
168
+ const store = createOpenStateStore();
102
169
  if (!is.browser()) return {
103
- toggle: () => {},
104
- open: () => {},
105
- close: () => {},
106
- unmount: () => {},
107
- refresh: () => {},
108
- focus: () => {}
170
+ toggle: noop$3,
171
+ open: noop$3,
172
+ close: noop$3,
173
+ unmount: noop$3,
174
+ refresh: noop$3,
175
+ focus: noop$3,
176
+ isOpen: store.getState,
177
+ subscribe: store.subscribe
109
178
  };
110
- const { iframe, refresh, focus } = createIframe(options);
179
+ const { iframe, refresh, focus, onMessage } = createIframe(options);
111
180
  const container = element ?? document.body;
112
181
  const dialog = createDialogElement();
113
182
  const wrapper = createDialogWrapper();
@@ -123,21 +192,35 @@ function createDialog(options, element) {
123
192
  onEscape(close);
124
193
  }
125
194
  };
195
+ const guard = createClosingGuard();
126
196
  function open() {
127
- if (is.open(wrapper)) return;
197
+ if (is.open(wrapper)) {
198
+ if (guard.isClosing()) {
199
+ guard.cancelPendingClose();
200
+ store.setState(true);
201
+ return;
202
+ }
203
+ return;
204
+ }
128
205
  dialog.append(wrapper);
129
206
  dialog.showModal();
207
+ store.setState(true);
130
208
  }
131
209
  function close() {
132
210
  if (!is.open(wrapper)) return;
133
211
  dialog.close();
134
- unmountElement$2(wrapper);
212
+ guard.scheduleClose(dialog, () => unmountElement$2(wrapper));
213
+ store.setState(false);
135
214
  }
136
215
  function toggle() {
137
216
  is.open(wrapper) ? close() : open();
138
217
  }
218
+ const removeOnMessageHandler = onMessage((msg) => {
219
+ if (msg === IFRAME_MESSAGES.close) close();
220
+ });
139
221
  function unmount() {
140
222
  unmountElement$2(dialog);
223
+ removeOnMessageHandler();
141
224
  }
142
225
  return {
143
226
  toggle,
@@ -145,59 +228,14 @@ function createDialog(options, element) {
145
228
  close,
146
229
  unmount,
147
230
  refresh,
148
- focus
149
- };
150
- }
151
- //#endregion
152
- //#region src/utils/built-button/built-button.ts
153
- var defaultIcon = `
154
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-icon lucide-message-square"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>`;
155
- var closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
156
- function buildDefaultIcons() {
157
- const openEl = document.createElement("span");
158
- openEl.classList.add("rvv-button-icon--open");
159
- openEl.innerHTML = defaultIcon;
160
- const closeEl = document.createElement("span");
161
- closeEl.classList.add("rvv-button-icon--close");
162
- closeEl.innerHTML = closeIcon;
163
- return {
164
- openEl,
165
- closeEl
166
- };
167
- }
168
- function buildButtonElement(options) {
169
- const button = document.createElement("button");
170
- button.classList.add("rvv-button", "rvv-button--trigger");
171
- button.setAttribute("type", "button");
172
- button.dataset.position = options.position ?? "right";
173
- button.dataset.open = "false";
174
- if (options.color) button.style.setProperty("--rvv-button-color", options.color);
175
- if (options.textColor) button.style.setProperty("--rvv-button-text-color", options.textColor);
176
- const iconWrapper = document.createElement("span");
177
- iconWrapper.classList.add("rvv-button-icon");
178
- iconWrapper.setAttribute("aria-hidden", "true");
179
- if (options.label) {
180
- const labelEl = document.createElement("span");
181
- labelEl.classList.add("rvv-button-label");
182
- labelEl.textContent = options.label;
183
- button.append(labelEl);
184
- }
185
- if (options.icon) iconWrapper.innerHTML = options.icon;
186
- else if (!options.label) {
187
- const { openEl, closeEl } = buildDefaultIcons();
188
- iconWrapper.append(openEl, closeEl);
189
- }
190
- if (iconWrapper.childNodes.length > 0) button.append(iconWrapper);
191
- function setOpen(isOpen) {
192
- button.dataset.open = String(isOpen);
193
- }
194
- return {
195
- el: button,
196
- setOpen
231
+ focus,
232
+ isOpen: store.getState,
233
+ subscribe: store.subscribe
197
234
  };
198
235
  }
199
236
  //#endregion
200
237
  //#region src/factories/create-drawer/create-drawer.ts
238
+ var noop$2 = () => {};
201
239
  function createDrawerElement() {
202
240
  const container = document.createElement("div");
203
241
  container.classList.add("rvv-drawer");
@@ -212,15 +250,18 @@ function unmountElement$1(element) {
212
250
  element.remove();
213
251
  }
214
252
  function createDrawer(options, element) {
253
+ const store = createOpenStateStore();
215
254
  if (!is.browser()) return {
216
- toggle: () => {},
217
- open: () => {},
218
- close: () => {},
219
- unmount: () => {},
220
- refresh: () => {},
221
- focus: () => {}
255
+ toggle: noop$2,
256
+ open: noop$2,
257
+ close: noop$2,
258
+ unmount: noop$2,
259
+ refresh: noop$2,
260
+ focus: noop$2,
261
+ isOpen: store.getState,
262
+ subscribe: store.subscribe
222
263
  };
223
- const { iframe, refresh, focus } = createIframe(options);
264
+ const { iframe, refresh, focus, onMessage } = createIframe(options);
224
265
  const container = element ?? document.body;
225
266
  const drawer = createDrawerElement();
226
267
  const wrapper = createDrawerWrapper();
@@ -230,49 +271,106 @@ function createDrawer(options, element) {
230
271
  });
231
272
  container.append(drawer);
232
273
  wrapper.append(iframe);
233
- const { autoOpen = false, autoOpenDelay = 0 } = options;
234
- let setButtonOpen = () => {};
235
- const { el: buttonEl, setOpen } = buildButtonElement(options);
236
- setButtonOpen = setOpen;
237
- buttonEl.addEventListener("click", () => toggle());
238
- document.body.append(buttonEl);
239
274
  iframe.onload = (event) => {
240
275
  if (event?.isTrusted) {
241
276
  drawer.classList.add("open");
242
277
  onEscape(close);
243
278
  }
244
279
  };
280
+ const guard = createClosingGuard();
245
281
  function open() {
246
- if (is.open(wrapper)) return;
282
+ if (is.open(wrapper)) {
283
+ if (guard.isClosing()) {
284
+ guard.cancelPendingClose();
285
+ drawer.classList.add("open");
286
+ store.setState(true);
287
+ return;
288
+ }
289
+ return;
290
+ }
247
291
  drawer.append(wrapper);
248
- setButtonOpen(true);
292
+ store.setState(true);
249
293
  }
250
294
  function close() {
251
295
  if (!is.open(wrapper)) return;
252
- unmountElement$1(wrapper);
253
296
  drawer.classList.remove("open");
254
- setButtonOpen(false);
297
+ store.setState(false);
298
+ guard.scheduleClose(drawer, () => unmountElement$1(wrapper));
255
299
  }
256
300
  function toggle() {
257
301
  is.open(wrapper) ? close() : open();
258
302
  }
303
+ const removeOnMessageHandler = onMessage((msg) => {
304
+ if (msg === IFRAME_MESSAGES.close) close();
305
+ });
259
306
  function unmount() {
260
- buttonEl?.remove();
261
307
  unmountElement$1(drawer);
308
+ removeOnMessageHandler();
262
309
  }
263
- if (autoOpen) if (autoOpenDelay > 0) setTimeout(() => open(), autoOpenDelay);
264
- else open();
265
310
  return {
266
311
  toggle,
267
312
  open,
268
313
  close,
269
314
  unmount,
270
315
  refresh,
271
- focus
316
+ focus,
317
+ isOpen: store.getState,
318
+ subscribe: store.subscribe
319
+ };
320
+ }
321
+ //#endregion
322
+ //#region src/utils/icons.ts
323
+ var chatIcon = `
324
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-icon lucide-message-square"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>`;
325
+ var closeIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
326
+ //#endregion
327
+ //#region src/utils/built-button/built-button.ts
328
+ function buildDefaultIcons() {
329
+ const openEl = document.createElement("span");
330
+ openEl.classList.add("rvv-button-icon--open");
331
+ openEl.innerHTML = chatIcon;
332
+ const closeEl = document.createElement("span");
333
+ closeEl.classList.add("rvv-button-icon--close");
334
+ closeEl.innerHTML = closeIcon;
335
+ return {
336
+ openEl,
337
+ closeEl
338
+ };
339
+ }
340
+ function buildButtonElement(options) {
341
+ const button = document.createElement("button");
342
+ button.classList.add("rvv-button", "rvv-button--trigger");
343
+ button.setAttribute("type", "button");
344
+ button.dataset.position = options.position ?? "right";
345
+ button.dataset.open = "false";
346
+ if (options.color) button.style.setProperty("--rvv-button-color", options.color);
347
+ if (options.textColor) button.style.setProperty("--rvv-button-text-color", options.textColor);
348
+ const iconWrapper = document.createElement("span");
349
+ iconWrapper.classList.add("rvv-button-icon");
350
+ iconWrapper.setAttribute("aria-hidden", "true");
351
+ if (options.label) {
352
+ const labelEl = document.createElement("span");
353
+ labelEl.classList.add("rvv-button-label");
354
+ labelEl.textContent = options.label;
355
+ button.append(labelEl);
356
+ }
357
+ if (options.icon) iconWrapper.innerHTML = options.icon;
358
+ else if (!options.label) {
359
+ const { openEl, closeEl } = buildDefaultIcons();
360
+ iconWrapper.append(openEl, closeEl);
361
+ }
362
+ if (iconWrapper.childNodes.length > 0) button.append(iconWrapper);
363
+ function setOpen(isOpen) {
364
+ button.dataset.open = String(isOpen);
365
+ }
366
+ return {
367
+ el: button,
368
+ setOpen
272
369
  };
273
370
  }
274
371
  //#endregion
275
372
  //#region src/factories/create-popover/create-popover.ts
373
+ var noop$1 = () => {};
276
374
  function createPopoverElement() {
277
375
  const container = document.createElement("div");
278
376
  container.classList.add("rvv-popover");
@@ -287,15 +385,18 @@ function unmountElement(element) {
287
385
  element.remove();
288
386
  }
289
387
  function createPopover(options, element) {
388
+ const store = createOpenStateStore();
290
389
  if (!is.browser()) return {
291
- toggle: () => {},
292
- close: () => {},
293
- open: () => {},
294
- unmount: () => {},
295
- refresh: () => {},
296
- focus: () => {}
390
+ toggle: noop$1,
391
+ close: noop$1,
392
+ open: noop$1,
393
+ unmount: noop$1,
394
+ refresh: noop$1,
395
+ focus: noop$1,
396
+ isOpen: store.getState,
397
+ subscribe: store.subscribe
297
398
  };
298
- const { iframe, refresh, focus } = createIframe(options);
399
+ const { iframe, refresh, focus, onMessage } = createIframe(options);
299
400
  const container = element ?? document.body;
300
401
  const popover = createPopoverElement();
301
402
  const wrapper = createPopoverWrapper();
@@ -305,12 +406,17 @@ function createPopover(options, element) {
305
406
  });
306
407
  container.append(popover);
307
408
  wrapper.append(iframe);
308
- const { autoOpen = false, autoOpenDelay = 0 } = options;
309
- let setButtonOpen = () => {};
310
- const { el: buttonEl, setOpen } = buildButtonElement(options);
311
- setButtonOpen = setOpen;
312
- buttonEl.addEventListener("click", () => toggle());
313
- document.body.append(buttonEl);
409
+ const { autoOpen = false, autoOpenDelay = 0, trigger = "default" } = options;
410
+ let setButtonOpen = noop$1;
411
+ let unmountButton = noop$1;
412
+ if (trigger === "default") {
413
+ const { el: buttonEl, setOpen } = buildButtonElement(options);
414
+ buttonEl.classList.add("rvv-button--trigger-popover");
415
+ setButtonOpen = setOpen;
416
+ buttonEl.addEventListener("click", () => toggle());
417
+ document.body.append(buttonEl);
418
+ unmountButton = () => buttonEl.remove();
419
+ }
314
420
  function toggle() {
315
421
  is.open(wrapper) ? close() : open();
316
422
  }
@@ -320,20 +426,35 @@ function createPopover(options, element) {
320
426
  onEscape(close);
321
427
  }
322
428
  };
429
+ const guard = createClosingGuard();
323
430
  function open() {
324
- if (is.open(wrapper)) return;
431
+ if (is.open(wrapper)) {
432
+ if (guard.isClosing()) {
433
+ guard.cancelPendingClose();
434
+ popover.classList.add("open");
435
+ store.setState(true);
436
+ return;
437
+ }
438
+ return;
439
+ }
325
440
  popover.append(wrapper);
326
441
  setButtonOpen(true);
442
+ store.setState(true);
327
443
  }
328
444
  function close() {
329
445
  if (!is.open(wrapper)) return;
330
446
  popover.classList.remove("open");
331
447
  setButtonOpen(false);
332
- popover.addEventListener("transitionend", () => unmountElement(wrapper), { once: true });
448
+ store.setState(false);
449
+ guard.scheduleClose(popover, () => unmountElement(wrapper));
333
450
  }
451
+ const removeOnMessageHandler = onMessage((msg) => {
452
+ if (msg === IFRAME_MESSAGES.close) close();
453
+ });
334
454
  function unmount() {
335
- buttonEl?.remove();
455
+ unmountButton();
336
456
  unmountElement(popover);
457
+ removeOnMessageHandler();
337
458
  }
338
459
  if (autoOpen) if (autoOpenDelay > 0) setTimeout(() => open(), autoOpenDelay);
339
460
  else open();
@@ -343,16 +464,19 @@ function createPopover(options, element) {
343
464
  open,
344
465
  unmount,
345
466
  refresh,
346
- focus
467
+ focus,
468
+ isOpen: store.getState,
469
+ subscribe: store.subscribe
347
470
  };
348
471
  }
349
472
  //#endregion
350
473
  //#region src/factories/create-widget/create-widget.ts
474
+ var noop = () => {};
351
475
  function createWidget(options, element) {
352
476
  if (!is.browser()) return {
353
- unmount: () => {},
354
- refresh: () => {},
355
- focus: () => {}
477
+ unmount: noop,
478
+ refresh: noop,
479
+ focus: noop
356
480
  };
357
481
  const { iframe, refresh, focus } = createIframe(options);
358
482
  const container = element ?? document.body;