@quantabit/list-sdk 1.0.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 (10) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +23 -0
  3. package/dist/index.cjs +277 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.esm.js +271 -0
  6. package/dist/index.esm.js.map +1 -0
  7. package/dist/styles.css +2 -0
  8. package/dist/styles.css.map +1 -0
  9. package/package.json +70 -0
  10. package/types/index.d.ts +6 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 QuantaBit Team
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,23 @@
1
+ # @quantabit/list-sdk
2
+
3
+ > 卡片布局积木：商品卡/用户卡/信息卡
4
+
5
+ - ProductCard — 电商商品卡
6
+ - UserCard — 用户/团队成员卡
7
+ - InfoCard — 数据统计卡
8
+ - GridList — 响应式网格
9
+ - useListLayout — Grid/List 切换 Hook
10
+
11
+ ## License
12
+ MIT
13
+
14
+
15
+
16
+ ---
17
+
18
+ ## 🌐 Brand & Links
19
+ - Official Mainnet: [QuantaBit Chain](https://qbitchain.io/)
20
+ - Developer Platform: [Developer Platform](https://developer.quantabit.io/)
21
+ - Open Platform: [Open Platform](https://open.quantabit.io/)
22
+ - Payment Platform: [Pay Platform](https://pay.qbitwallet.io/)
23
+ - Feedback: [Feedback](https://xwin.live/qbit)
package/dist/index.cjs ADDED
@@ -0,0 +1,277 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function ProductCard({
6
+ image,
7
+ title,
8
+ price,
9
+ originalPrice,
10
+ rating,
11
+ badge,
12
+ onClick,
13
+ className = ''
14
+ }) {
15
+ return /*#__PURE__*/React.createElement("div", {
16
+ className: `ql-product ${className}`,
17
+ onClick: onClick,
18
+ style: {
19
+ borderRadius: 14,
20
+ overflow: 'hidden',
21
+ border: '1px solid #e4e4e7',
22
+ background: '#fff',
23
+ cursor: onClick ? 'pointer' : 'default',
24
+ transition: 'all 0.3s'
25
+ }
26
+ }, /*#__PURE__*/React.createElement("div", {
27
+ style: {
28
+ height: 180,
29
+ background: '#f4f4f5',
30
+ position: 'relative',
31
+ overflow: 'hidden'
32
+ }
33
+ }, image && /*#__PURE__*/React.createElement("img", {
34
+ src: image,
35
+ alt: title,
36
+ style: {
37
+ width: '100%',
38
+ height: '100%',
39
+ objectFit: 'cover'
40
+ }
41
+ }), badge && /*#__PURE__*/React.createElement("span", {
42
+ style: {
43
+ position: 'absolute',
44
+ top: 8,
45
+ left: 8,
46
+ background: '#ef4444',
47
+ color: '#fff',
48
+ fontSize: 11,
49
+ fontWeight: 700,
50
+ padding: '2px 8px',
51
+ borderRadius: 6
52
+ }
53
+ }, badge)), /*#__PURE__*/React.createElement("div", {
54
+ style: {
55
+ padding: 14
56
+ }
57
+ }, /*#__PURE__*/React.createElement("div", {
58
+ style: {
59
+ fontSize: 14,
60
+ fontWeight: 600,
61
+ color: '#18181b',
62
+ overflow: 'hidden',
63
+ textOverflow: 'ellipsis',
64
+ whiteSpace: 'nowrap'
65
+ }
66
+ }, title), /*#__PURE__*/React.createElement("div", {
67
+ style: {
68
+ display: 'flex',
69
+ alignItems: 'center',
70
+ gap: 8,
71
+ marginTop: 6
72
+ }
73
+ }, /*#__PURE__*/React.createElement("span", {
74
+ style: {
75
+ fontSize: 18,
76
+ fontWeight: 800,
77
+ color: '#18181b'
78
+ }
79
+ }, price), originalPrice && /*#__PURE__*/React.createElement("span", {
80
+ style: {
81
+ fontSize: 13,
82
+ color: '#a1a1aa',
83
+ textDecoration: 'line-through'
84
+ }
85
+ }, originalPrice)), rating != null && /*#__PURE__*/React.createElement("div", {
86
+ style: {
87
+ display: 'flex',
88
+ alignItems: 'center',
89
+ gap: 4,
90
+ marginTop: 6,
91
+ fontSize: 12
92
+ }
93
+ }, /*#__PURE__*/React.createElement("span", {
94
+ style: {
95
+ color: '#f59e0b'
96
+ }
97
+ }, "\u2605"), /*#__PURE__*/React.createElement("span", {
98
+ style: {
99
+ color: '#71717a'
100
+ }
101
+ }, rating))));
102
+ }
103
+ function UserCard({
104
+ avatar,
105
+ name,
106
+ role,
107
+ bio,
108
+ actions,
109
+ online,
110
+ onClick,
111
+ className = ''
112
+ }) {
113
+ return /*#__PURE__*/React.createElement("div", {
114
+ className: `ql-user ${className}`,
115
+ onClick: onClick,
116
+ style: {
117
+ padding: 20,
118
+ borderRadius: 14,
119
+ border: '1px solid #e4e4e7',
120
+ background: '#fff',
121
+ textAlign: 'center',
122
+ transition: 'all 0.3s',
123
+ cursor: onClick ? 'pointer' : 'default'
124
+ }
125
+ }, /*#__PURE__*/React.createElement("div", {
126
+ style: {
127
+ position: 'relative',
128
+ display: 'inline-block',
129
+ marginBottom: 12
130
+ }
131
+ }, avatar ? /*#__PURE__*/React.createElement("img", {
132
+ src: avatar,
133
+ alt: name,
134
+ style: {
135
+ width: 64,
136
+ height: 64,
137
+ borderRadius: '50%',
138
+ objectFit: 'cover'
139
+ }
140
+ }) : /*#__PURE__*/React.createElement("div", {
141
+ style: {
142
+ width: 64,
143
+ height: 64,
144
+ borderRadius: '50%',
145
+ background: '#eff6ff',
146
+ display: 'flex',
147
+ alignItems: 'center',
148
+ justifyContent: 'center',
149
+ fontSize: 24,
150
+ fontWeight: 700,
151
+ color: '#3b82f6'
152
+ }
153
+ }, (name || '?')[0]), online != null && /*#__PURE__*/React.createElement("span", {
154
+ style: {
155
+ position: 'absolute',
156
+ bottom: 2,
157
+ right: 2,
158
+ width: 12,
159
+ height: 12,
160
+ borderRadius: '50%',
161
+ background: online ? '#22c55e' : '#a1a1aa',
162
+ border: '2px solid #fff'
163
+ }
164
+ })), /*#__PURE__*/React.createElement("div", {
165
+ style: {
166
+ fontSize: 15,
167
+ fontWeight: 700,
168
+ color: '#18181b'
169
+ }
170
+ }, name), role && /*#__PURE__*/React.createElement("div", {
171
+ style: {
172
+ fontSize: 12,
173
+ color: '#71717a',
174
+ marginTop: 2
175
+ }
176
+ }, role), bio && /*#__PURE__*/React.createElement("div", {
177
+ style: {
178
+ fontSize: 13,
179
+ color: '#3f3f46',
180
+ marginTop: 8,
181
+ lineHeight: 1.5
182
+ }
183
+ }, bio), actions && /*#__PURE__*/React.createElement("div", {
184
+ style: {
185
+ marginTop: 12,
186
+ display: 'flex',
187
+ gap: 8,
188
+ justifyContent: 'center'
189
+ }
190
+ }, actions));
191
+ }
192
+ function InfoCard({
193
+ icon,
194
+ title,
195
+ value,
196
+ change,
197
+ trend,
198
+ onClick,
199
+ className = ''
200
+ }) {
201
+ const trendColor = trend === 'up' ? '#22c55e' : trend === 'down' ? '#ef4444' : '#71717a';
202
+ return /*#__PURE__*/React.createElement("div", {
203
+ className: `ql-info ${className}`,
204
+ onClick: onClick,
205
+ style: {
206
+ padding: 20,
207
+ borderRadius: 14,
208
+ border: '1px solid #e4e4e7',
209
+ background: '#fff',
210
+ cursor: onClick ? 'pointer' : 'default',
211
+ transition: 'all 0.3s'
212
+ }
213
+ }, icon && /*#__PURE__*/React.createElement("div", {
214
+ style: {
215
+ marginBottom: 8,
216
+ fontSize: 24
217
+ }
218
+ }, icon), /*#__PURE__*/React.createElement("div", {
219
+ style: {
220
+ fontSize: 13,
221
+ color: '#71717a'
222
+ }
223
+ }, title), /*#__PURE__*/React.createElement("div", {
224
+ style: {
225
+ fontSize: 28,
226
+ fontWeight: 800,
227
+ color: '#18181b',
228
+ marginTop: 4
229
+ }
230
+ }, value), change != null && /*#__PURE__*/React.createElement("div", {
231
+ style: {
232
+ fontSize: 12,
233
+ color: trendColor,
234
+ marginTop: 4,
235
+ fontWeight: 600
236
+ }
237
+ }, trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→', " ", change));
238
+ }
239
+
240
+ function GridList({
241
+ items = [],
242
+ renderItem,
243
+ columns = 3,
244
+ gap = 16,
245
+ minWidth = 240,
246
+ className = ''
247
+ }) {
248
+ return /*#__PURE__*/React.createElement("div", {
249
+ className: `ql-grid ${className}`,
250
+ style: {
251
+ display: 'grid',
252
+ gridTemplateColumns: `repeat(auto-fill,minmax(${minWidth}px,1fr))`,
253
+ gap
254
+ }
255
+ }, items.map((item, i) => renderItem ? renderItem(item, i) : /*#__PURE__*/React.createElement("div", {
256
+ key: i
257
+ }, JSON.stringify(item))));
258
+ }
259
+
260
+ function useListLayout(defaultLayout = 'grid') {
261
+ const [layout, setLayout] = React.useState(defaultLayout);
262
+ const toggleLayout = React.useCallback(() => setLayout(l => l === 'grid' ? 'list' : 'grid'), []);
263
+ return {
264
+ layout,
265
+ setLayout,
266
+ toggleLayout,
267
+ isGrid: layout === 'grid',
268
+ isList: layout === 'list'
269
+ };
270
+ }
271
+
272
+ exports.GridList = GridList;
273
+ exports.InfoCard = InfoCard;
274
+ exports.ProductCard = ProductCard;
275
+ exports.UserCard = UserCard;
276
+ exports.useListLayout = useListLayout;
277
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":["../src/components/Cards.jsx","../src/components/GridList.jsx","../src/hooks/useListLayout.js"],"sourcesContent":["import React from'react';\nexport function ProductCard({image,title,price,originalPrice,rating,badge,onClick,className=''}){\n return(<div className={`ql-product ${className}`} onClick={onClick} style={{borderRadius:14,overflow:'hidden',border:'1px solid #e4e4e7',background:'#fff',cursor:onClick?'pointer':'default',transition:'all 0.3s'}}>\n <div style={{height:180,background:'#f4f4f5',position:'relative',overflow:'hidden'}}>\n {image&&<img src={image} alt={title} style={{width:'100%',height:'100%',objectFit:'cover'}}/>}\n {badge&&<span style={{position:'absolute',top:8,left:8,background:'#ef4444',color:'#fff',fontSize:11,fontWeight:700,padding:'2px 8px',borderRadius:6}}>{badge}</span>}\n </div>\n <div style={{padding:14}}><div style={{fontSize:14,fontWeight:600,color:'#18181b',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{title}</div>\n <div style={{display:'flex',alignItems:'center',gap:8,marginTop:6}}>\n <span style={{fontSize:18,fontWeight:800,color:'#18181b'}}>{price}</span>\n {originalPrice&&<span style={{fontSize:13,color:'#a1a1aa',textDecoration:'line-through'}}>{originalPrice}</span>}\n </div>\n {rating!=null&&<div style={{display:'flex',alignItems:'center',gap:4,marginTop:6,fontSize:12}}>\n <span style={{color:'#f59e0b'}}>★</span><span style={{color:'#71717a'}}>{rating}</span></div>}\n </div>\n </div>);\n}\nexport function UserCard({avatar,name,role,bio,actions,online,onClick,className=''}){\n return(<div className={`ql-user ${className}`} onClick={onClick} style={{padding:20,borderRadius:14,border:'1px solid #e4e4e7',background:'#fff',textAlign:'center',transition:'all 0.3s',cursor:onClick?'pointer':'default'}}>\n <div style={{position:'relative',display:'inline-block',marginBottom:12}}>\n {avatar?<img src={avatar} alt={name} style={{width:64,height:64,borderRadius:'50%',objectFit:'cover'}}/>\n :<div style={{width:64,height:64,borderRadius:'50%',background:'#eff6ff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:24,fontWeight:700,color:'#3b82f6'}}>{(name||'?')[0]}</div>}\n {online!=null&&<span style={{position:'absolute',bottom:2,right:2,width:12,height:12,borderRadius:'50%',background:online?'#22c55e':'#a1a1aa',border:'2px solid #fff'}}/>}\n </div>\n <div style={{fontSize:15,fontWeight:700,color:'#18181b'}}>{name}</div>\n {role&&<div style={{fontSize:12,color:'#71717a',marginTop:2}}>{role}</div>}\n {bio&&<div style={{fontSize:13,color:'#3f3f46',marginTop:8,lineHeight:1.5}}>{bio}</div>}\n {actions&&<div style={{marginTop:12,display:'flex',gap:8,justifyContent:'center'}}>{actions}</div>}\n </div>);\n}\nexport function InfoCard({icon,title,value,change,trend,onClick,className=''}){\n const trendColor=trend==='up'?'#22c55e':trend==='down'?'#ef4444':'#71717a';\n return(<div className={`ql-info ${className}`} onClick={onClick} style={{padding:20,borderRadius:14,border:'1px solid #e4e4e7',background:'#fff',cursor:onClick?'pointer':'default',transition:'all 0.3s'}}>\n {icon&&<div style={{marginBottom:8,fontSize:24}}>{icon}</div>}\n <div style={{fontSize:13,color:'#71717a'}}>{title}</div>\n <div style={{fontSize:28,fontWeight:800,color:'#18181b',marginTop:4}}>{value}</div>\n {change!=null&&<div style={{fontSize:12,color:trendColor,marginTop:4,fontWeight:600}}>{trend==='up'?'↑':trend==='down'?'↓':'→'} {change}</div>}\n </div>);\n}\n","import React from'react';\nexport function GridList({items=[],renderItem,columns=3,gap=16,minWidth=240,className=''}){\n return(<div className={`ql-grid ${className}`} style={{display:'grid',gridTemplateColumns:`repeat(auto-fill,minmax(${minWidth}px,1fr))`,gap}}>\n {items.map((item,i)=>renderItem?renderItem(item,i):<div key={i}>{JSON.stringify(item)}</div>)}\n </div>);\n}\n","import{useState,useCallback}from'react';\nexport function useListLayout(defaultLayout='grid'){\n const[layout,setLayout]=useState(defaultLayout);\n const toggleLayout=useCallback(()=>setLayout(l=>l==='grid'?'list':'grid'),[]);\n return{layout,setLayout,toggleLayout,isGrid:layout==='grid',isList:layout==='list'};\n}\n"],"names":["ProductCard","image","title","price","originalPrice","rating","badge","onClick","className","React","createElement","style","borderRadius","overflow","border","background","cursor","transition","height","position","src","alt","width","objectFit","top","left","color","fontSize","fontWeight","padding","textOverflow","whiteSpace","display","alignItems","gap","marginTop","textDecoration","UserCard","avatar","name","role","bio","actions","online","textAlign","marginBottom","justifyContent","bottom","right","lineHeight","InfoCard","icon","value","change","trend","trendColor","GridList","items","renderItem","columns","minWidth","gridTemplateColumns","map","item","i","key","JSON","stringify","useListLayout","defaultLayout","layout","setLayout","useState","toggleLayout","useCallback","l","isGrid","isList"],"mappings":"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"}
package/dist/index.esm.js ADDED
@@ -0,0 +1,271 @@
1
+ import React, { useState, useCallback } from 'react';
2
+
3
+ function ProductCard({
4
+ image,
5
+ title,
6
+ price,
7
+ originalPrice,
8
+ rating,
9
+ badge,
10
+ onClick,
11
+ className = ''
12
+ }) {
13
+ return /*#__PURE__*/React.createElement("div", {
14
+ className: `ql-product ${className}`,
15
+ onClick: onClick,
16
+ style: {
17
+ borderRadius: 14,
18
+ overflow: 'hidden',
19
+ border: '1px solid #e4e4e7',
20
+ background: '#fff',
21
+ cursor: onClick ? 'pointer' : 'default',
22
+ transition: 'all 0.3s'
23
+ }
24
+ }, /*#__PURE__*/React.createElement("div", {
25
+ style: {
26
+ height: 180,
27
+ background: '#f4f4f5',
28
+ position: 'relative',
29
+ overflow: 'hidden'
30
+ }
31
+ }, image && /*#__PURE__*/React.createElement("img", {
32
+ src: image,
33
+ alt: title,
34
+ style: {
35
+ width: '100%',
36
+ height: '100%',
37
+ objectFit: 'cover'
38
+ }
39
+ }), badge && /*#__PURE__*/React.createElement("span", {
40
+ style: {
41
+ position: 'absolute',
42
+ top: 8,
43
+ left: 8,
44
+ background: '#ef4444',
45
+ color: '#fff',
46
+ fontSize: 11,
47
+ fontWeight: 700,
48
+ padding: '2px 8px',
49
+ borderRadius: 6
50
+ }
51
+ }, badge)), /*#__PURE__*/React.createElement("div", {
52
+ style: {
53
+ padding: 14
54
+ }
55
+ }, /*#__PURE__*/React.createElement("div", {
56
+ style: {
57
+ fontSize: 14,
58
+ fontWeight: 600,
59
+ color: '#18181b',
60
+ overflow: 'hidden',
61
+ textOverflow: 'ellipsis',
62
+ whiteSpace: 'nowrap'
63
+ }
64
+ }, title), /*#__PURE__*/React.createElement("div", {
65
+ style: {
66
+ display: 'flex',
67
+ alignItems: 'center',
68
+ gap: 8,
69
+ marginTop: 6
70
+ }
71
+ }, /*#__PURE__*/React.createElement("span", {
72
+ style: {
73
+ fontSize: 18,
74
+ fontWeight: 800,
75
+ color: '#18181b'
76
+ }
77
+ }, price), originalPrice && /*#__PURE__*/React.createElement("span", {
78
+ style: {
79
+ fontSize: 13,
80
+ color: '#a1a1aa',
81
+ textDecoration: 'line-through'
82
+ }
83
+ }, originalPrice)), rating != null && /*#__PURE__*/React.createElement("div", {
84
+ style: {
85
+ display: 'flex',
86
+ alignItems: 'center',
87
+ gap: 4,
88
+ marginTop: 6,
89
+ fontSize: 12
90
+ }
91
+ }, /*#__PURE__*/React.createElement("span", {
92
+ style: {
93
+ color: '#f59e0b'
94
+ }
95
+ }, "\u2605"), /*#__PURE__*/React.createElement("span", {
96
+ style: {
97
+ color: '#71717a'
98
+ }
99
+ }, rating))));
100
+ }
101
+ function UserCard({
102
+ avatar,
103
+ name,
104
+ role,
105
+ bio,
106
+ actions,
107
+ online,
108
+ onClick,
109
+ className = ''
110
+ }) {
111
+ return /*#__PURE__*/React.createElement("div", {
112
+ className: `ql-user ${className}`,
113
+ onClick: onClick,
114
+ style: {
115
+ padding: 20,
116
+ borderRadius: 14,
117
+ border: '1px solid #e4e4e7',
118
+ background: '#fff',
119
+ textAlign: 'center',
120
+ transition: 'all 0.3s',
121
+ cursor: onClick ? 'pointer' : 'default'
122
+ }
123
+ }, /*#__PURE__*/React.createElement("div", {
124
+ style: {
125
+ position: 'relative',
126
+ display: 'inline-block',
127
+ marginBottom: 12
128
+ }
129
+ }, avatar ? /*#__PURE__*/React.createElement("img", {
130
+ src: avatar,
131
+ alt: name,
132
+ style: {
133
+ width: 64,
134
+ height: 64,
135
+ borderRadius: '50%',
136
+ objectFit: 'cover'
137
+ }
138
+ }) : /*#__PURE__*/React.createElement("div", {
139
+ style: {
140
+ width: 64,
141
+ height: 64,
142
+ borderRadius: '50%',
143
+ background: '#eff6ff',
144
+ display: 'flex',
145
+ alignItems: 'center',
146
+ justifyContent: 'center',
147
+ fontSize: 24,
148
+ fontWeight: 700,
149
+ color: '#3b82f6'
150
+ }
151
+ }, (name || '?')[0]), online != null && /*#__PURE__*/React.createElement("span", {
152
+ style: {
153
+ position: 'absolute',
154
+ bottom: 2,
155
+ right: 2,
156
+ width: 12,
157
+ height: 12,
158
+ borderRadius: '50%',
159
+ background: online ? '#22c55e' : '#a1a1aa',
160
+ border: '2px solid #fff'
161
+ }
162
+ })), /*#__PURE__*/React.createElement("div", {
163
+ style: {
164
+ fontSize: 15,
165
+ fontWeight: 700,
166
+ color: '#18181b'
167
+ }
168
+ }, name), role && /*#__PURE__*/React.createElement("div", {
169
+ style: {
170
+ fontSize: 12,
171
+ color: '#71717a',
172
+ marginTop: 2
173
+ }
174
+ }, role), bio && /*#__PURE__*/React.createElement("div", {
175
+ style: {
176
+ fontSize: 13,
177
+ color: '#3f3f46',
178
+ marginTop: 8,
179
+ lineHeight: 1.5
180
+ }
181
+ }, bio), actions && /*#__PURE__*/React.createElement("div", {
182
+ style: {
183
+ marginTop: 12,
184
+ display: 'flex',
185
+ gap: 8,
186
+ justifyContent: 'center'
187
+ }
188
+ }, actions));
189
+ }
190
+ function InfoCard({
191
+ icon,
192
+ title,
193
+ value,
194
+ change,
195
+ trend,
196
+ onClick,
197
+ className = ''
198
+ }) {
199
+ const trendColor = trend === 'up' ? '#22c55e' : trend === 'down' ? '#ef4444' : '#71717a';
200
+ return /*#__PURE__*/React.createElement("div", {
201
+ className: `ql-info ${className}`,
202
+ onClick: onClick,
203
+ style: {
204
+ padding: 20,
205
+ borderRadius: 14,
206
+ border: '1px solid #e4e4e7',
207
+ background: '#fff',
208
+ cursor: onClick ? 'pointer' : 'default',
209
+ transition: 'all 0.3s'
210
+ }
211
+ }, icon && /*#__PURE__*/React.createElement("div", {
212
+ style: {
213
+ marginBottom: 8,
214
+ fontSize: 24
215
+ }
216
+ }, icon), /*#__PURE__*/React.createElement("div", {
217
+ style: {
218
+ fontSize: 13,
219
+ color: '#71717a'
220
+ }
221
+ }, title), /*#__PURE__*/React.createElement("div", {
222
+ style: {
223
+ fontSize: 28,
224
+ fontWeight: 800,
225
+ color: '#18181b',
226
+ marginTop: 4
227
+ }
228
+ }, value), change != null && /*#__PURE__*/React.createElement("div", {
229
+ style: {
230
+ fontSize: 12,
231
+ color: trendColor,
232
+ marginTop: 4,
233
+ fontWeight: 600
234
+ }
235
+ }, trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→', " ", change));
236
+ }
237
+
238
+ function GridList({
239
+ items = [],
240
+ renderItem,
241
+ columns = 3,
242
+ gap = 16,
243
+ minWidth = 240,
244
+ className = ''
245
+ }) {
246
+ return /*#__PURE__*/React.createElement("div", {
247
+ className: `ql-grid ${className}`,
248
+ style: {
249
+ display: 'grid',
250
+ gridTemplateColumns: `repeat(auto-fill,minmax(${minWidth}px,1fr))`,
251
+ gap
252
+ }
253
+ }, items.map((item, i) => renderItem ? renderItem(item, i) : /*#__PURE__*/React.createElement("div", {
254
+ key: i
255
+ }, JSON.stringify(item))));
256
+ }
257
+
258
+ function useListLayout(defaultLayout = 'grid') {
259
+ const [layout, setLayout] = useState(defaultLayout);
260
+ const toggleLayout = useCallback(() => setLayout(l => l === 'grid' ? 'list' : 'grid'), []);
261
+ return {
262
+ layout,
263
+ setLayout,
264
+ toggleLayout,
265
+ isGrid: layout === 'grid',
266
+ isList: layout === 'list'
267
+ };
268
+ }
269
+
270
+ export { GridList, InfoCard, ProductCard, UserCard, useListLayout };
271
+ //# sourceMappingURL=index.esm.js.map
package/dist/index.esm.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.esm.js","sources":["../src/components/Cards.jsx","../src/components/GridList.jsx","../src/hooks/useListLayout.js"],"sourcesContent":["import React from'react';\nexport function ProductCard({image,title,price,originalPrice,rating,badge,onClick,className=''}){\n return(<div className={`ql-product ${className}`} onClick={onClick} style={{borderRadius:14,overflow:'hidden',border:'1px solid #e4e4e7',background:'#fff',cursor:onClick?'pointer':'default',transition:'all 0.3s'}}>\n <div style={{height:180,background:'#f4f4f5',position:'relative',overflow:'hidden'}}>\n {image&&<img src={image} alt={title} style={{width:'100%',height:'100%',objectFit:'cover'}}/>}\n {badge&&<span style={{position:'absolute',top:8,left:8,background:'#ef4444',color:'#fff',fontSize:11,fontWeight:700,padding:'2px 8px',borderRadius:6}}>{badge}</span>}\n </div>\n <div style={{padding:14}}><div style={{fontSize:14,fontWeight:600,color:'#18181b',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{title}</div>\n <div style={{display:'flex',alignItems:'center',gap:8,marginTop:6}}>\n <span style={{fontSize:18,fontWeight:800,color:'#18181b'}}>{price}</span>\n {originalPrice&&<span style={{fontSize:13,color:'#a1a1aa',textDecoration:'line-through'}}>{originalPrice}</span>}\n </div>\n {rating!=null&&<div style={{display:'flex',alignItems:'center',gap:4,marginTop:6,fontSize:12}}>\n <span style={{color:'#f59e0b'}}>★</span><span style={{color:'#71717a'}}>{rating}</span></div>}\n </div>\n </div>);\n}\nexport function UserCard({avatar,name,role,bio,actions,online,onClick,className=''}){\n return(<div className={`ql-user ${className}`} onClick={onClick} style={{padding:20,borderRadius:14,border:'1px solid #e4e4e7',background:'#fff',textAlign:'center',transition:'all 0.3s',cursor:onClick?'pointer':'default'}}>\n <div style={{position:'relative',display:'inline-block',marginBottom:12}}>\n {avatar?<img src={avatar} alt={name} style={{width:64,height:64,borderRadius:'50%',objectFit:'cover'}}/>\n :<div style={{width:64,height:64,borderRadius:'50%',background:'#eff6ff',display:'flex',alignItems:'center',justifyContent:'center',fontSize:24,fontWeight:700,color:'#3b82f6'}}>{(name||'?')[0]}</div>}\n {online!=null&&<span style={{position:'absolute',bottom:2,right:2,width:12,height:12,borderRadius:'50%',background:online?'#22c55e':'#a1a1aa',border:'2px solid #fff'}}/>}\n </div>\n <div style={{fontSize:15,fontWeight:700,color:'#18181b'}}>{name}</div>\n {role&&<div style={{fontSize:12,color:'#71717a',marginTop:2}}>{role}</div>}\n {bio&&<div style={{fontSize:13,color:'#3f3f46',marginTop:8,lineHeight:1.5}}>{bio}</div>}\n {actions&&<div style={{marginTop:12,display:'flex',gap:8,justifyContent:'center'}}>{actions}</div>}\n </div>);\n}\nexport function InfoCard({icon,title,value,change,trend,onClick,className=''}){\n const trendColor=trend==='up'?'#22c55e':trend==='down'?'#ef4444':'#71717a';\n return(<div className={`ql-info ${className}`} onClick={onClick} style={{padding:20,borderRadius:14,border:'1px solid #e4e4e7',background:'#fff',cursor:onClick?'pointer':'default',transition:'all 0.3s'}}>\n {icon&&<div style={{marginBottom:8,fontSize:24}}>{icon}</div>}\n <div style={{fontSize:13,color:'#71717a'}}>{title}</div>\n <div style={{fontSize:28,fontWeight:800,color:'#18181b',marginTop:4}}>{value}</div>\n {change!=null&&<div style={{fontSize:12,color:trendColor,marginTop:4,fontWeight:600}}>{trend==='up'?'↑':trend==='down'?'↓':'→'} {change}</div>}\n </div>);\n}\n","import React from'react';\nexport function GridList({items=[],renderItem,columns=3,gap=16,minWidth=240,className=''}){\n return(<div className={`ql-grid ${className}`} style={{display:'grid',gridTemplateColumns:`repeat(auto-fill,minmax(${minWidth}px,1fr))`,gap}}>\n {items.map((item,i)=>renderItem?renderItem(item,i):<div key={i}>{JSON.stringify(item)}</div>)}\n </div>);\n}\n","import{useState,useCallback}from'react';\nexport function useListLayout(defaultLayout='grid'){\n const[layout,setLayout]=useState(defaultLayout);\n const toggleLayout=useCallback(()=>setLayout(l=>l==='grid'?'list':'grid'),[]);\n return{layout,setLayout,toggleLayout,isGrid:layout==='grid',isList:layout==='list'};\n}\n"],"names":["ProductCard","image","title","price","originalPrice","rating","badge","onClick","className","React","createElement","style","borderRadius","overflow","border","background","cursor","transition","height","position","src","alt","width","objectFit","top","left","color","fontSize","fontWeight","padding","textOverflow","whiteSpace","display","alignItems","gap","marginTop","textDecoration","UserCard","avatar","name","role","bio","actions","online","textAlign","marginBottom","justifyContent","bottom","right","lineHeight","InfoCard","icon","value","change","trend","trendColor","GridList","items","renderItem","columns","minWidth","gridTemplateColumns","map","item","i","key","JSON","stringify","useListLayout","defaultLayout","layout","setLayout","useState","toggleLayout","useCallback","l","isGrid","isList"],"mappings":"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"}
package/dist/styles.css ADDED
@@ -0,0 +1,2 @@
1
+ .ql-info:hover,.ql-product:hover,.ql-user:hover{box-shadow:0 8px 24px rgba(0,0,0,.06)!important;transform:translateY(-2px)}
2
+ /*# sourceMappingURL=styles.css.map */
package/dist/styles.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["list.css"],"names":[],"mappings":"AAAA,gDAA2E,+CAAA,CAA3B,0BAA2E","file":"styles.css","sourcesContent":[".ql-product:hover,.ql-user:hover,.ql-info:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.06)!important}\n"]}
package/package.json ADDED
@@ -0,0 +1,70 @@
1
+ {
2
+ "name": "@quantabit/list-sdk",
3
+ "version": "1.0.0",
4
+ "type": "module",
5
+ "description": "Card layouts: product, user, info cards with grid system",
6
+ "main": "dist/index.cjs",
7
+ "module": "dist/index.esm.js",
8
+ "types": "types/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./types/index.d.ts",
12
+ "import": "./dist/index.esm.js",
13
+ "require": "./dist/index.cjs"
14
+ }
15
+ },
16
+ "sideEffects": [
17
+ "*.css"
18
+ ],
19
+ "files": [
20
+ "dist",
21
+ "types",
22
+ "README.md",
23
+ "LICENSE"
24
+ ],
25
+ "scripts": {
26
+ "build": "rollup -c",
27
+ "dev": "rollup -c -w",
28
+ "test": "jest --passWithNoTests",
29
+ "prepublishOnly": "npm run build"
30
+ },
31
+ "repository": {
32
+ "type": "git",
33
+ "url": "https://github.com/quantabit-chain/qbit-sdk.git",
34
+ "directory": "packages/list-sdk"
35
+ },
36
+ "homepage": "https://github.com/quantabit-chain/qbit-sdk/tree/main/packages/list-sdk",
37
+ "keywords": [
38
+ "list",
39
+ "card",
40
+ "product-card",
41
+ "grid",
42
+ "react"
43
+ ],
44
+ "author": "QuantaBit Team",
45
+ "license": "MIT",
46
+ "engines": {
47
+ "node": ">=18.0.0"
48
+ },
49
+ "peerDependencies": {
50
+ "react": ">=17.0.0",
51
+ "react-dom": ">=17.0.0"
52
+ },
53
+ "dependencies": {
54
+ "@quantabit/sdk-config": "^1.0.6"
55
+ },
56
+ "publishConfig": {
57
+ "access": "public"
58
+ },
59
+ "qbit": {
60
+ "privacy": {
61
+ "level": "functional",
62
+ "dataCollection": "Feature-related data for personalization. Requires user consent.",
63
+ "gdprCompliant": true,
64
+ "ccpaCompliant": true
65
+ }
66
+ },
67
+ "bugs": {
68
+ "url": "https://github.com/quantabit-chain/qbit-sdk/issues"
69
+ }
70
+ }
package/types/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ // Type definitions for @quantabit/list-sdk
2
+ export declare const GridList: any;
3
+ export declare const InfoCard: any;
4
+ export declare const ProductCard: any;
5
+ export declare const UserCard: any;
6
+ export declare const useListLayout: any;