@sweepconsole/js 0.2.2 → 0.2.3
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.
- package/README.md +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/sweep.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@ A **Subscribe with USDC** button for your checkout. It asks your server for a UR
|
|
|
5
5
|
~3KB gzipped, no dependencies.
|
|
6
6
|
|
|
7
7
|
```html
|
|
8
|
-
<script src="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.
|
|
8
|
+
<script src="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.3/dist/sweep.js"></script>
|
|
9
9
|
<button id="pay-usdc">Subscribe with USDC</button>
|
|
10
10
|
|
|
11
11
|
<script>
|
|
@@ -114,7 +114,7 @@ For a public link — a pricing page, an invoice, a QR code — there is no iden
|
|
|
114
114
|
to protect, and a plain anchor is enough:
|
|
115
115
|
|
|
116
116
|
```html
|
|
117
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.
|
|
117
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.3/dist/button.css">
|
|
118
118
|
<a class="sweep-pay" href="https://pay.sweepconsole.com/pay/plink_a1b2c3?ref=user_42">
|
|
119
119
|
Subscribe with USDC
|
|
120
120
|
</a>
|
package/dist/index.d.ts
CHANGED
|
@@ -93,7 +93,7 @@ export declare const BUTTON_CSS = ".sweep-pay{--_bg:var(--sweep-bg,#201e1d);--_f
|
|
|
93
93
|
* never a styled div, which cannot be reached by keyboard.
|
|
94
94
|
*/
|
|
95
95
|
export declare function mount(target: string | Element, opts: MountOptions): SweepButton;
|
|
96
|
-
export declare const MODAL_CSS = ".sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}\n.sweep-modal[data-open=true]{opacity:1}\n.sweep-modal__panel{position:relative;width:100%;max-width:
|
|
96
|
+
export declare const MODAL_CSS = ".sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}\n.sweep-modal[data-open=true]{opacity:1}\n.sweep-modal__panel{position:relative;width:100%;max-width:740px;height:min(880px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}\n.sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}\n.sweep-modal__frame{display:block;width:100%;height:100%;border:0}\n.sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}\n.sweep-modal__close:hover{background:#ECECF3;color:#23233B}\n.sweep-modal__close:focus-visible{outline:2px solid #4447D6;outline-offset:2px}\n@media (max-width:788px){.sweep-modal{padding:0}.sweep-modal__panel{max-width:none;height:100%;border-radius:0;opacity:1;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}.sweep-modal__close{top:8px;right:8px}}\n@media (prefers-reduced-motion:reduce){.sweep-modal,.sweep-modal__panel{transition:none}.sweep-modal__panel{transform:none}}";
|
|
97
97
|
export interface AuthorizeResult {
|
|
98
98
|
/** The mandate the payer signed, as the authorize page reported it. */
|
|
99
99
|
mandate_id?: string;
|
package/dist/index.js
CHANGED
|
@@ -291,14 +291,14 @@ const MODAL_STYLE_ID = "sweep-modal-styles";
|
|
|
291
291
|
* squeezed. Small enough to never be noticed, and it would have grown to 88px
|
|
292
292
|
* wide the moment the panel did.
|
|
293
293
|
*/
|
|
294
|
-
const PANEL_MAX_WIDTH =
|
|
294
|
+
const PANEL_MAX_WIDTH = 740;
|
|
295
295
|
const SHEET_MAX_WIDTH = PANEL_MAX_WIDTH + 48;
|
|
296
296
|
// The panel pops in like a dialog: it grows from 92% with a slight spring past
|
|
297
297
|
// full size while the backdrop dims and softens. On a phone it is a sheet that
|
|
298
298
|
// slides up from the bottom instead (see the media query).
|
|
299
299
|
export const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
|
|
300
300
|
.sweep-modal[data-open=true]{opacity:1}
|
|
301
|
-
.sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(
|
|
301
|
+
.sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(880px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
|
|
302
302
|
.sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}
|
|
303
303
|
.sweep-modal__frame{display:block;width:100%;height:100%;border:0}
|
|
304
304
|
.sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}
|
package/dist/sweep.js
CHANGED
|
@@ -294,14 +294,14 @@
|
|
|
294
294
|
* squeezed. Small enough to never be noticed, and it would have grown to 88px
|
|
295
295
|
* wide the moment the panel did.
|
|
296
296
|
*/
|
|
297
|
-
const PANEL_MAX_WIDTH =
|
|
297
|
+
const PANEL_MAX_WIDTH = 740;
|
|
298
298
|
const SHEET_MAX_WIDTH = PANEL_MAX_WIDTH + 48;
|
|
299
299
|
// The panel pops in like a dialog: it grows from 92% with a slight spring past
|
|
300
300
|
// full size while the backdrop dims and softens. On a phone it is a sheet that
|
|
301
301
|
// slides up from the bottom instead (see the media query).
|
|
302
302
|
const MODAL_CSS = `.sweep-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(35,35,59,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
|
|
303
303
|
.sweep-modal[data-open=true]{opacity:1}
|
|
304
|
-
.sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(
|
|
304
|
+
.sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(880px,calc(100vh - 48px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,35,80,.08),0 30px 60px -30px rgba(35,35,80,.45);opacity:0;transform:translateY(16px) scale(.92);transition:transform .34s cubic-bezier(.2,1.25,.4,1),opacity .2s ease}
|
|
305
305
|
.sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}
|
|
306
306
|
.sweep-modal__frame{display:block;width:100%;height:100%;border:0}
|
|
307
307
|
.sweep-modal__close{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(244,244,251,.9);color:#5D5E73;cursor:pointer;font:inherit;font-size:17px;line-height:1}
|
package/package.json
CHANGED