@1sat/permission-module-ui 0.0.6 → 0.0.8

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 -7
  2. package/dist/OneSatPermissionPrompt.d.ts.map +1 -1
  3. package/dist/index.js +84 -137
  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,18 +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
- /** App name shown in the header. Defaults to '1Sat Ordinals'. */
13
- appName?: string;
14
- /** Version string shown in the footer (e.g. wallet version). */
15
- version?: string;
16
12
  }
17
13
  /**
18
14
  * Drop-in component for rendering 1Sat permission prompts.
19
15
  *
20
16
  * The host wallet feeds in the `request` it received from its promptHandler
21
17
  * callback and wires `onApprove`/`onReject` to resolve the same Promise.
22
- * Layout mirrors the design in `1sat-permissions-popups.pen` — branding
23
- * 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.
24
20
  */
25
- export declare function OneSatPermissionPrompt({ request, onApprove, onReject, theme, appName, version, }: OneSatPermissionPromptProps): import("react/jsx-runtime").JSX.Element;
21
+ export declare function OneSatPermissionPrompt({ request, onApprove, onReject, theme, }: OneSatPermissionPromptProps): import("react/jsx-runtime").JSX.Element;
26
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,iEAAiE;IACjE,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,OAAyB,EACzB,OAAO,GACP,EAAE,2BAA2B,2CA2H7B"}
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,51 +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;
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;
80
45
  }
81
46
 
82
47
  .opp-body {
@@ -87,27 +52,21 @@ var promptStyles = `
87
52
  align-items: center;
88
53
  }
89
54
 
90
- .opp-icon {
91
- width: 36px;
92
- height: 36px;
93
- border-radius: 50%;
94
- background: var(--opp-card-bg);
95
- border: 1px solid var(--opp-card-border);
96
- display: flex;
97
- align-items: center;
98
- justify-content: center;
99
- margin-bottom: 4px;
55
+ .opp-coin {
56
+ width: 48px;
57
+ height: 48px;
58
+ flex-shrink: 0;
100
59
  }
101
60
 
102
61
  .opp-title {
103
- font-size: 18px;
62
+ font-size: 16px;
104
63
  font-weight: 700;
105
64
  margin: 0;
106
65
  text-align: center;
107
66
  }
108
67
 
109
68
  .opp-subtitle {
110
- font-size: 13px;
69
+ font-size: 12px;
111
70
  color: var(--opp-muted);
112
71
  margin: 0;
113
72
  text-align: center;
@@ -119,20 +78,22 @@ var promptStyles = `
119
78
  color: var(--opp-status-fg);
120
79
  padding: 4px 12px;
121
80
  border-radius: 999px;
122
- font-size: 12px;
81
+ font-size: 11px;
123
82
  font-weight: 600;
124
83
  margin-top: 4px;
84
+ border: 1px solid var(--opp-card-border);
125
85
  }
126
86
 
127
87
  .opp-card {
128
88
  background: var(--opp-card-bg);
129
- border-radius: 8px;
130
- margin: 0 16px;
131
- padding: 12px 16px;
89
+ border: 1px solid var(--opp-card-border);
90
+ border-radius: 10px;
91
+ margin: 0 20px;
92
+ padding: 16px;
132
93
  font-size: 13px;
133
94
  display: flex;
134
95
  flex-direction: column;
135
- gap: 8px;
96
+ gap: 12px;
136
97
  }
137
98
 
138
99
  .opp-featured {
@@ -140,14 +101,15 @@ var promptStyles = `
140
101
  align-items: center;
141
102
  gap: 12px;
142
103
  background: var(--opp-card-bg);
143
- border-radius: 8px;
144
- margin: 0 16px;
145
- padding: 12px;
104
+ border: 1px solid var(--opp-card-border);
105
+ border-radius: 10px;
106
+ margin: 0 20px;
107
+ padding: 16px;
146
108
  }
147
109
 
148
110
  .opp-featured-image {
149
- width: 64px;
150
- height: 64px;
111
+ width: 80px;
112
+ height: 80px;
151
113
  border-radius: 8px;
152
114
  object-fit: cover;
153
115
  background: rgba(0, 0, 0, 0.1);
@@ -157,6 +119,7 @@ var promptStyles = `
157
119
  .opp-featured-meta {
158
120
  display: flex;
159
121
  flex-direction: column;
122
+ gap: 4px;
160
123
  min-width: 0;
161
124
  }
162
125
 
@@ -188,8 +151,9 @@ var promptStyles = `
188
151
  }
189
152
 
190
153
  .opp-row-value {
191
- font-family: ui-monospace, SFMono-Regular, monospace;
192
- font-size: 12px;
154
+ font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, monospace;
155
+ font-size: 13px;
156
+ font-weight: 500;
193
157
  word-break: break-all;
194
158
  text-align: right;
195
159
  }
@@ -204,19 +168,21 @@ var promptStyles = `
204
168
 
205
169
  .opp-meta-value {
206
170
  color: var(--opp-fg);
171
+ font-weight: 500;
207
172
  }
208
173
 
209
174
  .opp-actions {
210
175
  display: flex;
211
176
  gap: 12px;
212
- padding: 16px 20px 12px;
177
+ padding: 20px 20px 12px;
213
178
  }
214
179
 
215
180
  .opp-button {
216
181
  flex: 1;
217
- padding: 12px 16px;
218
- border-radius: 8px;
219
- font-size: 14px;
182
+ padding: 0 16px;
183
+ height: 48px;
184
+ border-radius: 10px;
185
+ font-size: 15px;
220
186
  font-weight: 600;
221
187
  cursor: pointer;
222
188
  border: 1px solid transparent;
@@ -241,13 +207,13 @@ var promptStyles = `
241
207
 
242
208
  .opp-footer {
243
209
  display: flex;
244
- flex-direction: column;
245
210
  align-items: center;
246
- gap: 4px;
211
+ justify-content: center;
212
+ gap: 6px;
247
213
  padding: 8px 20px 16px;
248
214
  font-size: 11px;
215
+ font-weight: 500;
249
216
  color: var(--opp-muted);
250
- text-align: center;
251
217
  }
252
218
  `;
253
219
 
@@ -257,9 +223,7 @@ function OneSatPermissionPrompt({
257
223
  request,
258
224
  onApprove,
259
225
  onReject,
260
- theme = "auto",
261
- appName = "1Sat Ordinals",
262
- version
226
+ theme = "auto"
263
227
  }) {
264
228
  const resolvedTheme = useResolvedTheme(theme);
265
229
  const summary = summarizeRequest(request);
@@ -295,41 +259,40 @@ function OneSatPermissionPrompt({
295
259
  children: promptStyles
296
260
  }),
297
261
  /* @__PURE__ */ jsxs("div", {
298
- className: "opp-header",
262
+ className: "opp-body",
299
263
  children: [
300
- /* @__PURE__ */ jsxs("div", {
301
- className: "opp-header-brand",
264
+ /* @__PURE__ */ jsxs("svg", {
265
+ className: "opp-coin",
266
+ viewBox: "0 0 100 100",
267
+ "aria-label": "1Sat Ordinals",
302
268
  children: [
303
- /* @__PURE__ */ jsx("div", {
304
- className: "opp-avatar",
305
- children: "1"
269
+ /* @__PURE__ */ jsx("circle", {
270
+ cx: "50",
271
+ cy: "50",
272
+ r: "50",
273
+ fill: "#222"
306
274
  }),
307
- /* @__PURE__ */ jsx("span", {
308
- children: appName
309
- })
310
- ]
311
- }),
312
- /* @__PURE__ */ jsxs("div", {
313
- className: "opp-header-app",
314
- children: [
315
- /* @__PURE__ */ jsx("div", {
316
- className: "opp-avatar opp-app",
317
- children: originatorInitial(request.originator)
275
+ /* @__PURE__ */ jsx("circle", {
276
+ cx: "50",
277
+ cy: "50",
278
+ r: "40",
279
+ fill: "#fff"
318
280
  }),
319
- /* @__PURE__ */ jsx("span", {
320
- children: shortenOriginator(request.originator)
281
+ /* @__PURE__ */ jsx("circle", {
282
+ cx: "50",
283
+ cy: "50",
284
+ r: "32",
285
+ fill: "#E5A920"
286
+ }),
287
+ /* @__PURE__ */ jsx("rect", {
288
+ x: "47",
289
+ y: "28",
290
+ width: "6",
291
+ height: "28",
292
+ rx: "3",
293
+ fill: "#fff"
321
294
  })
322
295
  ]
323
- })
324
- ]
325
- }),
326
- /* @__PURE__ */ jsxs("div", {
327
- className: "opp-body",
328
- children: [
329
- /* @__PURE__ */ jsx("div", {
330
- className: "opp-icon",
331
- "aria-hidden": "true",
332
- children: "\uD83D\uDEE1"
333
296
  }),
334
297
  /* @__PURE__ */ jsx("h2", {
335
298
  className: "opp-title",
@@ -430,22 +393,11 @@ function OneSatPermissionPrompt({
430
393
  })
431
394
  ]
432
395
  }),
433
- /* @__PURE__ */ jsxs("div", {
396
+ /* @__PURE__ */ jsx("div", {
434
397
  className: "opp-footer",
435
- children: [
436
- /* @__PURE__ */ jsxs("span", {
437
- children: [
438
- "Secured by ",
439
- appName
440
- ]
441
- }),
442
- version && /* @__PURE__ */ jsxs("span", {
443
- children: [
444
- "v",
445
- version
446
- ]
447
- })
448
- ]
398
+ children: /* @__PURE__ */ jsx("span", {
399
+ children: "Secured by 1Sat Ordinals"
400
+ })
449
401
  })
450
402
  ]
451
403
  });
@@ -664,11 +616,6 @@ function shortenOriginator(origin) {
664
616
  return origin;
665
617
  return `${origin.slice(0, 18)}…${origin.slice(-6)}`;
666
618
  }
667
- function originatorInitial(origin) {
668
- const cleaned = origin.replace(/^https?:\/\//, "");
669
- const first = cleaned[0];
670
- return first ? first.toUpperCase() : "?";
671
- }
672
619
  export {
673
620
  OneSatPermissionPrompt
674
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-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,q/IAqPxB,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.6",
3
+ "version": "0.0.8",
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.8"
31
+ "@1sat/permission-module": "0.0.12"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": "^18.0.0 || ^19.0.0"