@1sat/permission-module-ui 0.0.7 → 0.0.9

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 (6) hide show
  1. package/dist/OneSatPermissionPrompt.d.ts +3 -9
  2. package/dist/OneSatPermissionPrompt.d.ts.map +1 -1
  3. package/dist/index.js +83 -182
  4. package/dist/styles.d.ts +2 -3
  5. package/dist/styles.d.ts.map +1 -1
  6. package/package.json +2 -2
package/dist/OneSatPermissionPrompt.d.ts CHANGED
@@ -9,20 +9,14 @@ export interface OneSatPermissionPromptProps {
9
9
  onReject: () => void;
10
10
  /** Theme override. Defaults to 'auto' (matches `prefers-color-scheme`). */
11
11
  theme?: Theme;
12
- /** Host wallet name shown in the header (e.g. 'Yours Wallet'). */
13
- appName?: string;
14
- /** Host wallet icon URL shown in the header avatar. Falls back to text initial. */
15
- appIcon?: string;
16
- /** Version string shown in the footer (e.g. wallet version). */
17
- version?: string;
18
12
  }
19
13
  /**
20
14
  * Drop-in component for rendering 1Sat permission prompts.
21
15
  *
22
16
  * The host wallet feeds in the `request` it received from its promptHandler
23
17
  * callback and wires `onApprove`/`onReject` to resolve the same Promise.
24
- * Layout mirrors the design in `1sat-permissions-popups.pen` — branding
25
- * header, intent title, asset detail card, network/fee, approve/reject.
18
+ * Layout mirrors the design in `1sat-permissions-popups.pen` — 1Sat coin
19
+ * badge, intent title, asset detail card, network/fee, approve/reject.
26
20
  */
27
- export declare function OneSatPermissionPrompt({ request, onApprove, onReject, theme, appName, appIcon, version, }: OneSatPermissionPromptProps): import("react/jsx-runtime").JSX.Element;
21
+ export declare function OneSatPermissionPrompt({ request, onApprove, onReject, theme, }: OneSatPermissionPromptProps): import("react/jsx-runtime").JSX.Element;
28
22
  //# sourceMappingURL=OneSatPermissionPrompt.d.ts.map
package/dist/OneSatPermissionPrompt.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OneSatPermissionPrompt.d.ts","sourceRoot":"","sources":["../src/OneSatPermissionPrompt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAI5D,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,WAAW,2BAA2B;IAC3C,mEAAmE;IACnE,OAAO,EAAE,aAAa,CAAA;IACtB,yFAAyF;IACzF,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,yFAAyF;IACzF,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAqCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,EACd,OAAO,EACP,OAAO,EACP,OAAO,GACP,EAAE,2BAA2B,2CAmI7B"}
1
+ {"version":3,"file":"OneSatPermissionPrompt.d.ts","sourceRoot":"","sources":["../src/OneSatPermissionPrompt.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAI5D,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,WAAW,2BAA2B;IAC3C,mEAAmE;IACnE,OAAO,EAAE,aAAa,CAAA;IACtB,yFAAyF;IACzF,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,yFAAyF;IACzF,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAA;CACb;AAqCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAc,GACd,EAAE,2BAA2B,2CAgH7B"}
package/dist/index.js CHANGED
@@ -7,23 +7,23 @@ import { useEffect, useState } from "react";
7
7
  var promptStyles = `
8
8
  .opp-root {
9
9
  --opp-bg: #ffffff;
10
- --opp-fg: #1a1a1a;
10
+ --opp-fg: #111827;
11
11
  --opp-muted: #6b7280;
12
- --opp-card-bg: #f5f5f7;
13
- --opp-card-border: #e5e7eb;
14
- --opp-accent: #f59e0b;
15
- --opp-approve-bg: #f59e0b;
12
+ --opp-card-bg: #f7f8fa;
13
+ --opp-card-border: #eceef2;
14
+ --opp-accent: #E5A920;
15
+ --opp-approve-bg: #E5A920;
16
16
  --opp-approve-fg: #ffffff;
17
17
  --opp-reject-bg: #ffffff;
18
- --opp-reject-fg: #1a1a1a;
18
+ --opp-reject-fg: #111827;
19
19
  --opp-reject-border: #d1d5db;
20
- --opp-status-bg: #fde68a;
21
- --opp-status-fg: #92400e;
20
+ --opp-status-bg: #FFFBE6;
21
+ --opp-status-fg: #E5A920;
22
22
 
23
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
23
+ font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
24
24
  background: var(--opp-bg);
25
25
  color: var(--opp-fg);
26
- border-radius: 12px;
26
+ border-radius: 16px;
27
27
  display: flex;
28
28
  flex-direction: column;
29
29
  width: 100%;
@@ -32,65 +32,16 @@ var promptStyles = `
32
32
  }
33
33
 
34
34
  .opp-root.opp-dark {
35
- --opp-bg: #1a1a1a;
36
- --opp-fg: #f5f5f7;
35
+ --opp-bg: #0F1117;
36
+ --opp-fg: #F9FAFB;
37
37
  --opp-muted: #9ca3af;
38
- --opp-card-bg: #262626;
39
- --opp-card-border: #3a3a3a;
40
- --opp-reject-bg: #262626;
41
- --opp-reject-fg: #f5f5f7;
42
- --opp-reject-border: #3a3a3a;
43
- --opp-status-bg: rgba(245, 158, 11, 0.2);
44
- --opp-status-fg: #fbbf24;
45
- }
46
-
47
- .opp-header {
48
- display: flex;
49
- align-items: center;
50
- justify-content: space-between;
51
- padding: 12px 16px;
52
- border-bottom: 1px solid var(--opp-card-border);
53
- }
54
-
55
- .opp-header-brand,
56
- .opp-header-app {
57
- display: flex;
58
- align-items: center;
59
- gap: 8px;
60
- font-size: 13px;
61
- font-weight: 600;
62
- }
63
-
64
- .opp-avatar {
65
- width: 24px;
66
- height: 24px;
67
- border-radius: 50%;
68
- background: var(--opp-accent);
69
- color: #ffffff;
70
- display: flex;
71
- align-items: center;
72
- justify-content: center;
73
- font-size: 12px;
74
- font-weight: 700;
75
- flex-shrink: 0;
76
- }
77
-
78
- .opp-avatar.opp-app {
79
- background: #3b82f6;
80
- }
81
-
82
- .opp-avatar-svg {
83
- width: 24px;
84
- height: 24px;
85
- flex-shrink: 0;
86
- }
87
-
88
- .opp-avatar-img {
89
- width: 24px;
90
- height: 24px;
91
- border-radius: 50%;
92
- object-fit: cover;
93
- flex-shrink: 0;
38
+ --opp-card-bg: #1A1D27;
39
+ --opp-card-border: #232636;
40
+ --opp-reject-bg: #0F1117;
41
+ --opp-reject-fg: #F9FAFB;
42
+ --opp-reject-border: #2D3142;
43
+ --opp-status-bg: #2A2408;
44
+ --opp-status-fg: #E5A920;
94
45
  }
95
46
 
96
47
  .opp-body {
@@ -101,27 +52,21 @@ var promptStyles = `
101
52
  align-items: center;
102
53
  }
103
54
 
104
- .opp-icon {
105
- width: 36px;
106
- height: 36px;
107
- border-radius: 50%;
108
- background: var(--opp-card-bg);
109
- border: 1px solid var(--opp-card-border);
110
- display: flex;
111
- align-items: center;
112
- justify-content: center;
113
- margin-bottom: 4px;
55
+ .opp-coin {
56
+ width: 48px;
57
+ height: 48px;
58
+ flex-shrink: 0;
114
59
  }
115
60
 
116
61
  .opp-title {
117
- font-size: 18px;
62
+ font-size: 16px;
118
63
  font-weight: 700;
119
64
  margin: 0;
120
65
  text-align: center;
121
66
  }
122
67
 
123
68
  .opp-subtitle {
124
- font-size: 13px;
69
+ font-size: 12px;
125
70
  color: var(--opp-muted);
126
71
  margin: 0;
127
72
  text-align: center;
@@ -133,20 +78,22 @@ var promptStyles = `
133
78
  color: var(--opp-status-fg);
134
79
  padding: 4px 12px;
135
80
  border-radius: 999px;
136
- font-size: 12px;
81
+ font-size: 11px;
137
82
  font-weight: 600;
138
83
  margin-top: 4px;
84
+ border: 1px solid var(--opp-card-border);
139
85
  }
140
86
 
141
87
  .opp-card {
142
88
  background: var(--opp-card-bg);
143
- border-radius: 8px;
144
- margin: 0 16px;
145
- padding: 12px 16px;
89
+ border: 1px solid var(--opp-card-border);
90
+ border-radius: 10px;
91
+ margin: 0 20px;
92
+ padding: 16px;
146
93
  font-size: 13px;
147
94
  display: flex;
148
95
  flex-direction: column;
149
- gap: 8px;
96
+ gap: 12px;
150
97
  }
151
98
 
152
99
  .opp-featured {
@@ -154,14 +101,15 @@ var promptStyles = `
154
101
  align-items: center;
155
102
  gap: 12px;
156
103
  background: var(--opp-card-bg);
157
- border-radius: 8px;
158
- margin: 0 16px;
159
- padding: 12px;
104
+ border: 1px solid var(--opp-card-border);
105
+ border-radius: 10px;
106
+ margin: 0 20px;
107
+ padding: 16px;
160
108
  }
161
109
 
162
110
  .opp-featured-image {
163
- width: 64px;
164
- height: 64px;
111
+ width: 80px;
112
+ height: 80px;
165
113
  border-radius: 8px;
166
114
  object-fit: cover;
167
115
  background: rgba(0, 0, 0, 0.1);
@@ -171,6 +119,7 @@ var promptStyles = `
171
119
  .opp-featured-meta {
172
120
  display: flex;
173
121
  flex-direction: column;
122
+ gap: 4px;
174
123
  min-width: 0;
175
124
  }
176
125
 
@@ -202,8 +151,9 @@ var promptStyles = `
202
151
  }
203
152
 
204
153
  .opp-row-value {
205
- font-family: ui-monospace, SFMono-Regular, monospace;
206
- font-size: 12px;
154
+ font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
155
+ font-size: 13px;
156
+ font-weight: 500;
207
157
  word-break: break-all;
208
158
  text-align: right;
209
159
  }
@@ -218,19 +168,21 @@ var promptStyles = `
218
168
 
219
169
  .opp-meta-value {
220
170
  color: var(--opp-fg);
171
+ font-weight: 500;
221
172
  }
222
173
 
223
174
  .opp-actions {
224
175
  display: flex;
225
176
  gap: 12px;
226
- padding: 16px 20px 12px;
177
+ padding: 20px 20px 12px;
227
178
  }
228
179
 
229
180
  .opp-button {
230
181
  flex: 1;
231
- padding: 12px 16px;
232
- border-radius: 8px;
233
- font-size: 14px;
182
+ padding: 0 16px;
183
+ height: 48px;
184
+ border-radius: 10px;
185
+ font-size: 15px;
234
186
  font-weight: 600;
235
187
  cursor: pointer;
236
188
  border: 1px solid transparent;
@@ -255,13 +207,13 @@ var promptStyles = `
255
207
 
256
208
  .opp-footer {
257
209
  display: flex;
258
- flex-direction: column;
259
210
  align-items: center;
260
- gap: 4px;
211
+ justify-content: center;
212
+ gap: 6px;
261
213
  padding: 8px 20px 16px;
262
214
  font-size: 11px;
215
+ font-weight: 500;
263
216
  color: var(--opp-muted);
264
- text-align: center;
265
217
  }
266
218
  `;
267
219
 
@@ -271,10 +223,7 @@ function OneSatPermissionPrompt({
271
223
  request,
272
224
  onApprove,
273
225
  onReject,
274
- theme = "auto",
275
- appName,
276
- appIcon,
277
- version
226
+ theme = "auto"
278
227
  }) {
279
228
  const resolvedTheme = useResolvedTheme(theme);
280
229
  const summary = summarizeRequest(request);
@@ -310,75 +259,40 @@ function OneSatPermissionPrompt({
310
259
  children: promptStyles
311
260
  }),
312
261
  /* @__PURE__ */ jsxs("div", {
313
- className: "opp-header",
262
+ className: "opp-body",
314
263
  children: [
315
- /* @__PURE__ */ jsxs("div", {
316
- className: "opp-header-brand",
264
+ /* @__PURE__ */ jsxs("svg", {
265
+ className: "opp-coin",
266
+ viewBox: "0 0 100 100",
267
+ "aria-label": "1Sat Ordinals",
317
268
  children: [
318
- /* @__PURE__ */ jsxs("svg", {
319
- className: "opp-avatar-svg",
320
- viewBox: "0 0 100 100",
321
- "aria-label": "1Sat Ordinals",
322
- children: [
323
- /* @__PURE__ */ jsx("circle", {
324
- cx: "50",
325
- cy: "50",
326
- r: "50",
327
- fill: "#222"
328
- }),
329
- /* @__PURE__ */ jsx("circle", {
330
- cx: "50",
331
- cy: "50",
332
- r: "40",
333
- fill: "#fff"
334
- }),
335
- /* @__PURE__ */ jsx("circle", {
336
- cx: "50",
337
- cy: "50",
338
- r: "32",
339
- fill: "#E5A920"
340
- }),
341
- /* @__PURE__ */ jsx("rect", {
342
- x: "47",
343
- y: "28",
344
- width: "6",
345
- height: "28",
346
- rx: "3",
347
- fill: "#fff"
348
- })
349
- ]
269
+ /* @__PURE__ */ jsx("circle", {
270
+ cx: "50",
271
+ cy: "50",
272
+ r: "50",
273
+ fill: "#222"
350
274
  }),
351
- appIcon && /* @__PURE__ */ jsx("img", {
352
- className: "opp-avatar-img",
353
- src: appIcon,
354
- alt: appName ?? ""
275
+ /* @__PURE__ */ jsx("circle", {
276
+ cx: "50",
277
+ cy: "50",
278
+ r: "40",
279
+ fill: "#fff"
355
280
  }),
356
- appName && /* @__PURE__ */ jsx("span", {
357
- children: appName
358
- })
359
- ]
360
- }),
361
- /* @__PURE__ */ jsxs("div", {
362
- className: "opp-header-app",
363
- children: [
364
- /* @__PURE__ */ jsx("div", {
365
- className: "opp-avatar opp-app",
366
- children: originatorInitial(request.originator)
281
+ /* @__PURE__ */ jsx("circle", {
282
+ cx: "50",
283
+ cy: "50",
284
+ r: "32",
285
+ fill: "#E5A920"
367
286
  }),
368
- /* @__PURE__ */ jsx("span", {
369
- children: shortenOriginator(request.originator)
287
+ /* @__PURE__ */ jsx("rect", {
288
+ x: "47",
289
+ y: "28",
290
+ width: "6",
291
+ height: "28",
292
+ rx: "3",
293
+ fill: "#fff"
370
294
  })
371
295
  ]
372
- })
373
- ]
374
- }),
375
- /* @__PURE__ */ jsxs("div", {
376
- className: "opp-body",
377
- children: [
378
- /* @__PURE__ */ jsx("div", {
379
- className: "opp-icon",
380
- "aria-hidden": "true",
381
- children: "\uD83D\uDEE1"
382
296
  }),
383
297
  /* @__PURE__ */ jsx("h2", {
384
298
  className: "opp-title",
@@ -479,19 +393,11 @@ function OneSatPermissionPrompt({
479
393
  })
480
394
  ]
481
395
  }),
482
- /* @__PURE__ */ jsxs("div", {
396
+ /* @__PURE__ */ jsx("div", {
483
397
  className: "opp-footer",
484
- children: [
485
- /* @__PURE__ */ jsx("span", {
486
- children: "Secured by 1Sat Ordinals"
487
- }),
488
- version && /* @__PURE__ */ jsxs("span", {
489
- children: [
490
- "v",
491
- version
492
- ]
493
- })
494
- ]
398
+ children: /* @__PURE__ */ jsx("span", {
399
+ children: "Secured by 1Sat Ordinals"
400
+ })
495
401
  })
496
402
  ]
497
403
  });
@@ -710,11 +616,6 @@ function shortenOriginator(origin) {
710
616
  return origin;
711
617
  return `${origin.slice(0, 18)}…${origin.slice(-6)}`;
712
618
  }
713
- function originatorInitial(origin) {
714
- const cleaned = origin.replace(/^https?:\/\//, "");
715
- const first = cleaned[0];
716
- return first ? first.toUpperCase() : "?";
717
- }
718
619
  export {
719
620
  OneSatPermissionPrompt
720
621
  };
package/dist/styles.d.ts CHANGED
@@ -2,8 +2,7 @@
2
2
  * CSS string for the OneSatPermissionPrompt component. Inlined as a style
3
3
  * tag so the host wallet doesn't have to wire up CSS imports.
4
4
  *
5
- * Colors and spacing are kept minimal and theme-driven via CSS variables;
6
- * a designer pass will replace these with the production palette.
5
+ * Colors match the design in `1sat-permissions-popups.pen`.
7
6
  */
8
- export declare const promptStyles = "\n.opp-root {\n --opp-bg: #ffffff;\n --opp-fg: #1a1a1a;\n --opp-muted: #6b7280;\n --opp-card-bg: #f5f5f7;\n --opp-card-border: #e5e7eb;\n --opp-accent: #f59e0b;\n --opp-approve-bg: #f59e0b;\n --opp-approve-fg: #ffffff;\n --opp-reject-bg: #ffffff;\n --opp-reject-fg: #1a1a1a;\n --opp-reject-border: #d1d5db;\n --opp-status-bg: #fde68a;\n --opp-status-fg: #92400e;\n\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: var(--opp-bg);\n color: var(--opp-fg);\n border-radius: 12px;\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 480px;\n overflow: hidden;\n}\n\n.opp-root.opp-dark {\n --opp-bg: #1a1a1a;\n --opp-fg: #f5f5f7;\n --opp-muted: #9ca3af;\n --opp-card-bg: #262626;\n --opp-card-border: #3a3a3a;\n --opp-reject-bg: #262626;\n --opp-reject-fg: #f5f5f7;\n --opp-reject-border: #3a3a3a;\n --opp-status-bg: rgba(245, 158, 11, 0.2);\n --opp-status-fg: #fbbf24;\n}\n\n.opp-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n border-bottom: 1px solid var(--opp-card-border);\n}\n\n.opp-header-brand,\n.opp-header-app {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n font-weight: 600;\n}\n\n.opp-avatar {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: var(--opp-accent);\n color: #ffffff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 700;\n flex-shrink: 0;\n}\n\n.opp-avatar.opp-app {\n background: #3b82f6;\n}\n\n.opp-avatar-svg {\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.opp-avatar-img {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n object-fit: cover;\n flex-shrink: 0;\n}\n\n.opp-body {\n padding: 24px 20px 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n align-items: center;\n}\n\n.opp-icon {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--opp-card-bg);\n border: 1px solid var(--opp-card-border);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 4px;\n}\n\n.opp-title {\n font-size: 18px;\n font-weight: 700;\n margin: 0;\n text-align: center;\n}\n\n.opp-subtitle {\n font-size: 13px;\n color: var(--opp-muted);\n margin: 0;\n text-align: center;\n line-height: 1.4;\n}\n\n.opp-status {\n background: var(--opp-status-bg);\n color: var(--opp-status-fg);\n padding: 4px 12px;\n border-radius: 999px;\n font-size: 12px;\n font-weight: 600;\n margin-top: 4px;\n}\n\n.opp-card {\n background: var(--opp-card-bg);\n border-radius: 8px;\n margin: 0 16px;\n padding: 12px 16px;\n font-size: 13px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.opp-featured {\n display: flex;\n align-items: center;\n gap: 12px;\n background: var(--opp-card-bg);\n border-radius: 8px;\n margin: 0 16px;\n padding: 12px;\n}\n\n.opp-featured-image {\n width: 64px;\n height: 64px;\n border-radius: 8px;\n object-fit: cover;\n background: rgba(0, 0, 0, 0.1);\n flex-shrink: 0;\n}\n\n.opp-featured-meta {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.opp-featured-title {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.opp-featured-subtitle {\n font-size: 12px;\n color: var(--opp-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.opp-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n\n.opp-row-key {\n color: var(--opp-muted);\n}\n\n.opp-row-value {\n font-family: ui-monospace, SFMono-Regular, monospace;\n font-size: 12px;\n word-break: break-all;\n text-align: right;\n}\n\n.opp-meta {\n display: flex;\n justify-content: space-between;\n padding: 12px 20px;\n font-size: 12px;\n color: var(--opp-muted);\n}\n\n.opp-meta-value {\n color: var(--opp-fg);\n}\n\n.opp-actions {\n display: flex;\n gap: 12px;\n padding: 16px 20px 12px;\n}\n\n.opp-button {\n flex: 1;\n padding: 12px 16px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n border: 1px solid transparent;\n transition: opacity 120ms ease;\n}\n\n.opp-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.opp-button-reject {\n background: var(--opp-reject-bg);\n color: var(--opp-reject-fg);\n border-color: var(--opp-reject-border);\n}\n\n.opp-button-approve {\n background: var(--opp-approve-bg);\n color: var(--opp-approve-fg);\n}\n\n.opp-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n padding: 8px 20px 16px;\n font-size: 11px;\n color: var(--opp-muted);\n text-align: center;\n}\n";
7
+ export declare const promptStyles = "\n.opp-root {\n --opp-bg: #ffffff;\n --opp-fg: #111827;\n --opp-muted: #6b7280;\n --opp-card-bg: #f7f8fa;\n --opp-card-border: #eceef2;\n --opp-accent: #E5A920;\n --opp-approve-bg: #E5A920;\n --opp-approve-fg: #ffffff;\n --opp-reject-bg: #ffffff;\n --opp-reject-fg: #111827;\n --opp-reject-border: #d1d5db;\n --opp-status-bg: #FFFBE6;\n --opp-status-fg: #E5A920;\n\n font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n background: var(--opp-bg);\n color: var(--opp-fg);\n border-radius: 16px;\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 480px;\n overflow: hidden;\n}\n\n.opp-root.opp-dark {\n --opp-bg: #0F1117;\n --opp-fg: #F9FAFB;\n --opp-muted: #9ca3af;\n --opp-card-bg: #1A1D27;\n --opp-card-border: #232636;\n --opp-reject-bg: #0F1117;\n --opp-reject-fg: #F9FAFB;\n --opp-reject-border: #2D3142;\n --opp-status-bg: #2A2408;\n --opp-status-fg: #E5A920;\n}\n\n.opp-body {\n padding: 24px 20px 16px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n align-items: center;\n}\n\n.opp-coin {\n width: 48px;\n height: 48px;\n flex-shrink: 0;\n}\n\n.opp-title {\n font-size: 16px;\n font-weight: 700;\n margin: 0;\n text-align: center;\n}\n\n.opp-subtitle {\n font-size: 12px;\n color: var(--opp-muted);\n margin: 0;\n text-align: center;\n line-height: 1.4;\n}\n\n.opp-status {\n background: var(--opp-status-bg);\n color: var(--opp-status-fg);\n padding: 4px 12px;\n border-radius: 999px;\n font-size: 11px;\n font-weight: 600;\n margin-top: 4px;\n border: 1px solid var(--opp-card-border);\n}\n\n.opp-card {\n background: var(--opp-card-bg);\n border: 1px solid var(--opp-card-border);\n border-radius: 10px;\n margin: 0 20px;\n padding: 16px;\n font-size: 13px;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.opp-featured {\n display: flex;\n align-items: center;\n gap: 12px;\n background: var(--opp-card-bg);\n border: 1px solid var(--opp-card-border);\n border-radius: 10px;\n margin: 0 20px;\n padding: 16px;\n}\n\n.opp-featured-image {\n width: 80px;\n height: 80px;\n border-radius: 8px;\n object-fit: cover;\n background: rgba(0, 0, 0, 0.1);\n flex-shrink: 0;\n}\n\n.opp-featured-meta {\n display: flex;\n flex-direction: column;\n gap: 4px;\n min-width: 0;\n}\n\n.opp-featured-title {\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.opp-featured-subtitle {\n font-size: 12px;\n color: var(--opp-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.opp-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n}\n\n.opp-row-key {\n color: var(--opp-muted);\n}\n\n.opp-row-value {\n font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;\n font-size: 13px;\n font-weight: 500;\n word-break: break-all;\n text-align: right;\n}\n\n.opp-meta {\n display: flex;\n justify-content: space-between;\n padding: 12px 20px;\n font-size: 12px;\n color: var(--opp-muted);\n}\n\n.opp-meta-value {\n color: var(--opp-fg);\n font-weight: 500;\n}\n\n.opp-actions {\n display: flex;\n gap: 12px;\n padding: 20px 20px 12px;\n}\n\n.opp-button {\n flex: 1;\n padding: 0 16px;\n height: 48px;\n border-radius: 10px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n border: 1px solid transparent;\n transition: opacity 120ms ease;\n}\n\n.opp-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.opp-button-reject {\n background: var(--opp-reject-bg);\n color: var(--opp-reject-fg);\n border-color: var(--opp-reject-border);\n}\n\n.opp-button-approve {\n background: var(--opp-approve-bg);\n color: var(--opp-approve-fg);\n}\n\n.opp-footer {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 8px 20px 16px;\n font-size: 11px;\n font-weight: 500;\n color: var(--opp-muted);\n}\n";
9
8
  //# sourceMappingURL=styles.d.ts.map
package/dist/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,0rJAmQxB,CAAA"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,q6HAmNxB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1sat/permission-module-ui",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "description": "React component for the 1Sat permission module's prompt UX",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -28,7 +28,7 @@
28
28
  ],
29
29
  "license": "MIT",
30
30
  "dependencies": {
31
- "@1sat/permission-module": "0.0.12"
31
+ "@1sat/permission-module": "0.0.13"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": "^18.0.0 || ^19.0.0"