@sweepconsole/js 0.2.0 → 0.2.2

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 (5) hide show
  1. package/README.md +2 -2
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +16 -3
  4. package/dist/sweep.js +16 -3
  5. 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.0/dist/sweep.js"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.2/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.0/dist/button.css">
117
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sweepconsole/js@0.2.2/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:520px;height:min(680px,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:560px){.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}}";
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:680px;height:min(800px,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:728px){.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
@@ -278,14 +278,27 @@ export function mount(target, opts) {
278
278
  * sandboxing without `allow-popups` would close the one exit the page has.
279
279
  */
280
280
  const MODAL_STYLE_ID = "sweep-modal-styles";
281
- /** Breakpoint below which the panel becomes a sheet. Matches the design. */
282
- const SHEET_MAX_WIDTH = 560;
281
+ /**
282
+ * Breakpoint below which the panel becomes a sheet.
283
+ *
284
+ * TIED TO THE PANEL WIDTH, not chosen separately. `.sweep-modal` keeps 24px of
285
+ * padding on each side, so a PANEL_MAX_WIDTH panel needs PANEL_MAX_WIDTH + 48
286
+ * of viewport before it starts being squeezed. Set the breakpoint any lower and
287
+ * there is a band of widths where the panel is neither its full size nor a
288
+ * sheet — it is a narrowed panel, which is the one shape nobody designed.
289
+ *
290
+ * That band existed: 520 + 48 = 568 against a 560 breakpoint left 561-568px
291
+ * squeezed. Small enough to never be noticed, and it would have grown to 88px
292
+ * wide the moment the panel did.
293
+ */
294
+ const PANEL_MAX_WIDTH = 680;
295
+ const SHEET_MAX_WIDTH = PANEL_MAX_WIDTH + 48;
283
296
  // The panel pops in like a dialog: it grows from 92% with a slight spring past
284
297
  // full size while the backdrop dims and softens. On a phone it is a sheet that
285
298
  // slides up from the bottom instead (see the media query).
286
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}
287
300
  .sweep-modal[data-open=true]{opacity:1}
288
- .sweep-modal__panel{position:relative;width:100%;max-width:520px;height:min(680px,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}
301
+ .sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(800px,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}
289
302
  .sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}
290
303
  .sweep-modal__frame{display:block;width:100%;height:100%;border:0}
291
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
@@ -281,14 +281,27 @@
281
281
  * sandboxing without `allow-popups` would close the one exit the page has.
282
282
  */
283
283
  const MODAL_STYLE_ID = "sweep-modal-styles";
284
- /** Breakpoint below which the panel becomes a sheet. Matches the design. */
285
- const SHEET_MAX_WIDTH = 560;
284
+ /**
285
+ * Breakpoint below which the panel becomes a sheet.
286
+ *
287
+ * TIED TO THE PANEL WIDTH, not chosen separately. `.sweep-modal` keeps 24px of
288
+ * padding on each side, so a PANEL_MAX_WIDTH panel needs PANEL_MAX_WIDTH + 48
289
+ * of viewport before it starts being squeezed. Set the breakpoint any lower and
290
+ * there is a band of widths where the panel is neither its full size nor a
291
+ * sheet — it is a narrowed panel, which is the one shape nobody designed.
292
+ *
293
+ * That band existed: 520 + 48 = 568 against a 560 breakpoint left 561-568px
294
+ * squeezed. Small enough to never be noticed, and it would have grown to 88px
295
+ * wide the moment the panel did.
296
+ */
297
+ const PANEL_MAX_WIDTH = 680;
298
+ const SHEET_MAX_WIDTH = PANEL_MAX_WIDTH + 48;
286
299
  // The panel pops in like a dialog: it grows from 92% with a slight spring past
287
300
  // full size while the backdrop dims and softens. On a phone it is a sheet that
288
301
  // slides up from the bottom instead (see the media query).
289
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}
290
303
  .sweep-modal[data-open=true]{opacity:1}
291
- .sweep-modal__panel{position:relative;width:100%;max-width:520px;height:min(680px,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}
304
+ .sweep-modal__panel{position:relative;width:100%;max-width:${PANEL_MAX_WIDTH}px;height:min(800px,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}
292
305
  .sweep-modal[data-open=true] .sweep-modal__panel{opacity:1;transform:none}
293
306
  .sweep-modal__frame{display:block;width:100%;height:100%;border:0}
294
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sweepconsole/js",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "description": "Pay-with-USDC button for the browser \u2014 asks your server for a checkout URL and sends the payer there",
5
5
  "license": "MIT",
6
6
  "type": "module",