@pnlight/sdk-react 0.1.0

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 (40) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +101 -0
  3. package/dist/RemoteUi.d.ts +16 -0
  4. package/dist/RemoteUi.d.ts.map +1 -0
  5. package/dist/RemoteUi.js +48 -0
  6. package/dist/RemoteUi.js.map +1 -0
  7. package/dist/custom-components.d.ts +4 -0
  8. package/dist/custom-components.d.ts.map +1 -0
  9. package/dist/custom-components.js +909 -0
  10. package/dist/custom-components.js.map +1 -0
  11. package/dist/dialogs.d.ts +32 -0
  12. package/dist/dialogs.d.ts.map +1 -0
  13. package/dist/dialogs.js +107 -0
  14. package/dist/dialogs.js.map +1 -0
  15. package/dist/flow.d.ts +88 -0
  16. package/dist/flow.d.ts.map +1 -0
  17. package/dist/flow.js +270 -0
  18. package/dist/flow.js.map +1 -0
  19. package/dist/haptics.d.ts +7 -0
  20. package/dist/haptics.d.ts.map +1 -0
  21. package/dist/haptics.js +69 -0
  22. package/dist/haptics.js.map +1 -0
  23. package/dist/index.d.ts +6 -0
  24. package/dist/index.d.ts.map +1 -0
  25. package/dist/index.js +2 -0
  26. package/dist/index.js.map +1 -0
  27. package/dist/runtime.d.ts +27 -0
  28. package/dist/runtime.d.ts.map +1 -0
  29. package/dist/runtime.js +192 -0
  30. package/dist/runtime.js.map +1 -0
  31. package/dist/safe-area.d.ts +22 -0
  32. package/dist/safe-area.d.ts.map +1 -0
  33. package/dist/safe-area.js +104 -0
  34. package/dist/safe-area.js.map +1 -0
  35. package/dist/schema-version.d.ts +11 -0
  36. package/dist/schema-version.d.ts.map +1 -0
  37. package/dist/schema-version.js +30 -0
  38. package/dist/schema-version.js.map +1 -0
  39. package/dist/styles.css +172 -0
  40. package/package.json +54 -0
package/dist/styles.css ADDED
@@ -0,0 +1,172 @@
1
+ @import "@divkitframework/divkit/dist/client.css";
2
+
3
+ .pnlight-remote-ui {
4
+ box-sizing: border-box;
5
+ width: 100%;
6
+ min-height: 100%;
7
+ padding:
8
+ var(--pnlight-safe-top, 0)
9
+ var(--pnlight-safe-right, 0)
10
+ var(--pnlight-safe-bottom, 0)
11
+ var(--pnlight-safe-left, 0);
12
+ overflow: visible;
13
+ }
14
+
15
+ .pnlight-remote-ui.pnlight-flow-host {
16
+ min-height: inherit;
17
+ }
18
+
19
+ .pnlight-remote-ui .pnlight-flow-shell,
20
+ .pnlight-remote-ui .pnlight-flow-surface,
21
+ .pnlight-remote-ui .pnlight-flow-slot {
22
+ min-height: inherit;
23
+ }
24
+
25
+ .pnlight-remote-ui .pnlight-flow-shell {
26
+ position: relative;
27
+ min-height: inherit;
28
+ overflow: hidden;
29
+ border-radius: inherit;
30
+ background: inherit;
31
+ }
32
+
33
+ .pnlight-remote-ui .pnlight-flow-surface {
34
+ position: relative;
35
+ overflow: hidden;
36
+ border-radius: inherit;
37
+ background: inherit;
38
+ }
39
+
40
+ .pnlight-remote-ui .pnlight-flow-slot {
41
+ position: relative;
42
+ overflow: hidden;
43
+ }
44
+
45
+ .pnlight-remote-ui .pnlight-flow-route {
46
+ position: absolute;
47
+ inset: 0;
48
+ box-sizing: border-box;
49
+ padding:
50
+ var(--pnlight-safe-top, 0)
51
+ var(--pnlight-safe-right, 0)
52
+ var(--pnlight-safe-bottom, 0)
53
+ var(--pnlight-safe-left, 0);
54
+ overflow: hidden;
55
+ }
56
+
57
+ .pnlight-remote-ui .pnlight-flow-route > * {
58
+ width: 100%;
59
+ min-width: 0;
60
+ min-height: 0;
61
+ flex: 1 1 auto;
62
+ }
63
+
64
+ .pnlight-remote-ui .pnlight-flow-grabber {
65
+ display: none;
66
+ position: absolute;
67
+ z-index: 2;
68
+ top: 8px;
69
+ left: 50%;
70
+ width: 38px;
71
+ height: 5px;
72
+ border-radius: 999px;
73
+ background: rgb(125 125 135 / 48%);
74
+ transform: translateX(-50%);
75
+ }
76
+
77
+ .pnlight-remote-ui
78
+ .pnlight-flow-surface--sheet
79
+ > .pnlight-flow-grabber {
80
+ display: block;
81
+ }
82
+
83
+ .pnlight-remote-ui pnlight-cta-button,
84
+ .pnlight-remote-ui pnlight-icon-button,
85
+ .pnlight-remote-ui pnlight-circular-loader {
86
+ overflow: visible !important;
87
+ contain: none !important;
88
+ }
89
+
90
+ .pnlight-remote-ui pnlight-cta-button,
91
+ .pnlight-remote-ui pnlight-icon-button,
92
+ .pnlight-remote-ui *:has(> pnlight-cta-button),
93
+ .pnlight-remote-ui *:has(> pnlight-icon-button) {
94
+ pointer-events: auto !important;
95
+ }
96
+
97
+ .pnlight-remote-ui *:has(> pnlight-cta-button),
98
+ .pnlight-remote-ui *:has(> pnlight-icon-button) {
99
+ overflow: visible !important;
100
+ }
101
+
102
+ .pnlight-dialog {
103
+ width: min(340px, calc(100vw - 32px));
104
+ padding: 0;
105
+ border: 0;
106
+ border-radius: 18px;
107
+ color: #111827;
108
+ background: #fff;
109
+ box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
110
+ }
111
+
112
+ .pnlight-dialog::backdrop {
113
+ background: rgb(15 23 42 / 38%);
114
+ }
115
+
116
+ .pnlight-dialog--action_sheet {
117
+ width: min(430px, calc(100vw - 24px));
118
+ margin-block: auto 12px;
119
+ border-radius: 22px;
120
+ }
121
+
122
+ .pnlight-dialog-panel {
123
+ padding: 20px;
124
+ }
125
+
126
+ .pnlight-dialog-grabber {
127
+ width: 36px;
128
+ height: 5px;
129
+ margin: -10px auto 16px;
130
+ border-radius: 999px;
131
+ background: #c7c9d1;
132
+ }
133
+
134
+ .pnlight-dialog h3 {
135
+ margin: 0;
136
+ font-size: 18px;
137
+ text-align: center;
138
+ }
139
+
140
+ .pnlight-dialog p {
141
+ margin: 8px 0 0;
142
+ color: #667085;
143
+ line-height: 1.4;
144
+ text-align: center;
145
+ }
146
+
147
+ .pnlight-dialog-buttons {
148
+ display: grid;
149
+ gap: 8px;
150
+ margin-top: 18px;
151
+ }
152
+
153
+ .pnlight-dialog-button {
154
+ min-height: 44px;
155
+ border: 0;
156
+ border-radius: 12px;
157
+ color: #0877e1;
158
+ background: #eef6ff;
159
+ font: inherit;
160
+ font-weight: 650;
161
+ cursor: pointer;
162
+ }
163
+
164
+ .pnlight-dialog-button--cancel {
165
+ color: #475467;
166
+ background: #f2f4f7;
167
+ }
168
+
169
+ .pnlight-dialog-button--destructive {
170
+ color: #d92d20;
171
+ background: #fff1f0;
172
+ }
package/package.json ADDED
@@ -0,0 +1,54 @@
1
+ {
2
+ "name": "@pnlight/sdk-react",
3
+ "version": "0.1.0",
4
+ "description": "PNLight Remote UI React component powered by DivKit",
5
+ "type": "module",
6
+ "sideEffects": [
7
+ "*.css"
8
+ ],
9
+ "files": [
10
+ "dist",
11
+ "README.md",
12
+ "LICENSE"
13
+ ],
14
+ "exports": {
15
+ ".": {
16
+ "types": "./dist/index.d.ts",
17
+ "import": "./dist/index.js"
18
+ },
19
+ "./styles.css": "./dist/styles.css"
20
+ },
21
+ "main": "./dist/index.js",
22
+ "module": "./dist/index.js",
23
+ "types": "./dist/index.d.ts",
24
+ "scripts": {
25
+ "build": "tsc && node scripts/copy-assets.mjs",
26
+ "prepack": "npm run build"
27
+ },
28
+ "keywords": [
29
+ "pnlight",
30
+ "divkit",
31
+ "react",
32
+ "server-driven-ui",
33
+ "remote-ui"
34
+ ],
35
+ "license": "MIT",
36
+ "peerDependencies": {
37
+ "react": ">=18"
38
+ },
39
+ "dependencies": {
40
+ "@divkitframework/divkit": "32.59.0",
41
+ "lottie-web": "5.11.0",
42
+ "lucide": "^1.26.0"
43
+ },
44
+ "devDependencies": {
45
+ "@types/react": "^19.1.9",
46
+ "typescript": "^5.9.2"
47
+ },
48
+ "engines": {
49
+ "node": ">=18"
50
+ },
51
+ "publishConfig": {
52
+ "access": "public"
53
+ }
54
+ }