@cashub/ui 0.49.0-beta.13 → 0.49.0-beta.14

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 (2) hide show
  1. package/iconbox/IconBox.js +148 -90
  2. package/package.json +1 -1
package/iconbox/IconBox.js CHANGED
@@ -40,100 +40,149 @@ const IconBox = _ref => {
40
40
  const circleSize = size || 60;
41
41
  const innerIconSize = iconSize || Math.round(circleSize * 0.5);
42
42
  const iconColorFinal = mode === 'gradient' ? '#FFFFFF' : accent;
43
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentWrapper, {
44
- mode: mode,
45
- accent: accent,
46
- gradientEnd: gradientEnd,
47
- borderColor: borderColor,
48
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconCircle, {
43
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentOuter, {
44
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AccentGlassLayer, {
49
45
  mode: mode,
50
46
  accent: accent,
51
- circleSize: circleSize,
52
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
53
- size: innerIconSize,
54
- iconKey: iconKey,
55
- iconColor: iconColorFinal,
56
- src: icon,
57
- alt: `${title}'s icon`
58
- })
59
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextColumn, {
60
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
61
- children: title
62
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
63
- accentColor: accent,
64
- children: children
47
+ gradientEnd: gradientEnd,
48
+ borderColor: borderColor
49
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentContent, {
50
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconCircle, {
51
+ mode: mode,
52
+ accent: accent,
53
+ circleSize: circleSize,
54
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
55
+ size: innerIconSize,
56
+ iconKey: iconKey,
57
+ iconColor: iconColorFinal,
58
+ src: icon,
59
+ alt: `${title}'s icon`
60
+ })
61
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextColumn, {
62
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
63
+ children: title
64
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
65
+ accentColor: accent,
66
+ children: children
67
+ })]
65
68
  })]
66
69
  })]
67
70
  });
68
71
  }
69
72
  const bgImage = bgImageKey && _bgImageRegistry.default[bgImageKey];
70
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
71
- bgImage: bgImage,
72
- gradientFrom: gradientFrom,
73
- gradientTo: gradientTo,
74
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
75
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
76
- sizeXS: sizeXS,
77
- sizeS: sizeS,
78
- size: size,
79
- marginRight: true,
80
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
73
+ if (bgImage || gradientFrom && gradientTo) {
74
+ const gradient = gradientFrom && gradientTo ? `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})` : 'var(--color-background2)';
75
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PlainWrapper, {
76
+ bgImage: bgImage,
77
+ gradient: gradient,
78
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
79
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
80
+ sizeXS: sizeXS,
81
+ sizeS: sizeS,
82
+ size: size,
83
+ marginRight: true,
84
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
85
+ sizeXS: sizeXS,
86
+ sizeS: sizeS,
87
+ size: size,
88
+ iconKey: iconKey,
89
+ iconColor: iconColor,
90
+ src: icon,
91
+ alt: `${title}'s icon`
92
+ })
93
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
94
+ children: title
95
+ })]
96
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
97
+ children: children
98
+ })]
99
+ });
100
+ }
101
+ const markerKey = theme?.bgMarkerKey || 'ember';
102
+ const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
103
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GlassOuter, {
104
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GlassLayer, {
105
+ marker: marker
106
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GlassContent, {
107
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(IconBoxHead, {
108
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxFigure.default, {
81
109
  sizeXS: sizeXS,
82
110
  sizeS: sizeS,
83
111
  size: size,
84
- iconKey: iconKey,
85
- iconColor: iconColor,
86
- src: icon,
87
- alt: `${title}'s icon`
88
- })
89
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
90
- children: title
112
+ marginRight: true,
113
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
114
+ sizeXS: sizeXS,
115
+ sizeS: sizeS,
116
+ size: size,
117
+ iconKey: iconKey,
118
+ iconColor: iconColor,
119
+ src: icon,
120
+ alt: `${title}'s icon`
121
+ })
122
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
123
+ children: title
124
+ })]
125
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
126
+ children: children
91
127
  })]
92
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
93
- children: children
94
128
  })]
95
129
  });
96
130
  };
97
131
 
98
- /* ---------- image 模式（原始版式） ---------- */
132
+ /* ---------- image 模式：无图/无渐层时，走玻璃卡片（兄弟节点结构） ---------- */
99
133
 
100
- const Wrapper = _styledComponents.default.div`
134
+ const GlassOuter = _styledComponents.default.div`
135
+ position: relative;
136
+ border-radius: var(--border-radius);
137
+ margin-bottom: var(--spacing);
138
+ `;
139
+ const GlassLayer = _styledComponents.default.div`
140
+ position: absolute;
141
+ inset: 0;
142
+ border-radius: inherit;
143
+ background-color: rgba(255, 255, 255, 0.06);
144
+ backdrop-filter: blur(20px);
145
+ -webkit-backdrop-filter: blur(20px);
146
+ border: 1px solid rgba(255, 255, 255, 0.15);
147
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
148
+ pointer-events: none;
149
+ ${_ref2 => {
150
+ let {
151
+ marker
152
+ } = _ref2;
153
+ return marker && `
154
+ background-image: url(${marker.triangle});
155
+ background-repeat: no-repeat;
156
+ background-position: right bottom;
157
+ background-size: 30% 70%;
158
+ `;
159
+ }}
160
+ `;
161
+ const GlassContent = _styledComponents.default.div`
162
+ position: relative;
163
+ padding: var(--spacing-l);
164
+ color: var(--font-on-background);
165
+ `;
166
+
167
+ /* ---------- image 模式：有 bgImage 或 gradient 时，走原本不透明版式 ---------- */
168
+
169
+ const PlainWrapper = _styledComponents.default.div`
101
170
  display: flex;
102
171
  flex-direction: column;
103
172
  padding: var(--spacing-l);
104
173
  margin-bottom: var(--spacing);
105
174
  border-radius: var(--border-radius);
106
175
  color: var(--font-on-background);
107
- ${_ref2 => {
176
+ background: ${_ref3 => {
108
177
  let {
109
178
  bgImage,
110
- gradientFrom,
111
- gradientTo,
112
- theme
113
- } = _ref2;
114
- if (bgImage || gradientFrom && gradientTo) {
115
- const gradient = gradientFrom && gradientTo ? `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})` : 'var(--color-background2)';
116
- const image = bgImage ? `url(${bgImage}), ` : '';
117
- return `
118
- background: ${image}${gradient};
119
- background-repeat: no-repeat;
120
- background-position: right bottom;
121
- background-size: cover;
122
- `;
123
- }
124
- const markerKey = theme?.bgMarkerKey || 'ember';
125
- const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
126
- return `
127
- background-color: rgba(255, 255, 255, 0.06);
128
- backdrop-filter: blur(20px);
129
- -webkit-backdrop-filter: blur(20px);
130
- border: 1px solid rgba(255, 255, 255, 0.15);
131
- background-image: url(${marker.triangle});
132
- background-repeat: no-repeat;
133
- background-position: right bottom;
134
- background-size: 30% 70%;
135
- `;
136
- }}
179
+ gradient
180
+ } = _ref3;
181
+ return bgImage ? `url(${bgImage}), ${gradient}` : gradient;
182
+ }};
183
+ background-repeat: no-repeat;
184
+ background-position: right bottom;
185
+ background-size: cover;
137
186
  `;
138
187
  const IconBoxHead = _styledComponents.default.div`
139
188
  display: flex;
@@ -141,23 +190,25 @@ const IconBoxHead = _styledComponents.default.div`
141
190
  margin-bottom: var(--spacing);
142
191
  `;
143
192
 
144
- /* ---------- accent / gradient 模式 ---------- */
193
+ /* ---------- accent / gradient 模式（兄弟节点结构） ---------- */
145
194
 
146
- const AccentWrapper = _styledComponents.default.div`
147
- display: flex;
148
- align-items: center;
149
- padding: var(--spacing);
195
+ const AccentOuter = _styledComponents.default.div`
196
+ position: relative;
150
197
  border-radius: var(--border-radius);
151
- color: var(--font-on-background);
152
- backdrop-filter: blur(20px);
153
- -webkit-backdrop-filter: blur(20px);
154
- ${_ref3 => {
198
+ `;
199
+ const AccentGlassLayer = _styledComponents.default.div`
200
+ position: absolute;
201
+ inset: 0;
202
+ border-radius: inherit;
203
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
204
+ pointer-events: none;
205
+ ${_ref4 => {
155
206
  let {
156
207
  mode,
157
208
  accent,
158
209
  gradientEnd,
159
210
  borderColor
160
- } = _ref3;
211
+ } = _ref4;
161
212
  if (mode === 'gradient') {
162
213
  return `
163
214
  background: linear-gradient(22deg, var(--color-background2) 0%, var(--color-background2) 40%, ${gradientEnd} 100%);
@@ -170,30 +221,37 @@ const AccentWrapper = _styledComponents.default.div`
170
221
  `;
171
222
  }}
172
223
  `;
224
+ const AccentContent = _styledComponents.default.div`
225
+ position: relative;
226
+ display: flex;
227
+ align-items: center;
228
+ padding: var(--spacing);
229
+ color: var(--font-on-background);
230
+ `;
173
231
  const IconCircle = _styledComponents.default.span`
174
232
  display: inline-flex;
175
233
  align-items: center;
176
234
  justify-content: center;
177
235
  border-radius: 50%;
178
- width: ${_ref4 => {
236
+ width: ${_ref5 => {
179
237
  let {
180
238
  circleSize
181
- } = _ref4;
239
+ } = _ref5;
182
240
  return `${circleSize}px`;
183
241
  }};
184
- height: ${_ref5 => {
242
+ height: ${_ref6 => {
185
243
  let {
186
244
  circleSize
187
- } = _ref5;
245
+ } = _ref6;
188
246
  return `${circleSize}px`;
189
247
  }};
190
248
  flex-shrink: 0;
191
249
  margin-right: var(--spacing-s);
192
- background: ${_ref6 => {
250
+ background: ${_ref7 => {
193
251
  let {
194
252
  mode,
195
253
  accent
196
- } = _ref6;
254
+ } = _ref7;
197
255
  return mode === 'gradient' ? 'rgba(255, 255, 255, 0.2)' : withAlpha(accent, '14');
198
256
  }};
199
257
  `;
@@ -214,16 +272,16 @@ const IconBoxBody = _styledComponents.default.div`
214
272
  font-size: var(--font-h1);
215
273
  font-weight: bold;
216
274
  line-height: 1.3;
217
- text-align: ${_ref7 => {
275
+ text-align: ${_ref8 => {
218
276
  let {
219
277
  accentColor
220
- } = _ref7;
278
+ } = _ref8;
221
279
  return accentColor ? 'left' : 'center';
222
280
  }};
223
- color: ${_ref8 => {
281
+ color: ${_ref9 => {
224
282
  let {
225
283
  accentColor
226
- } = _ref8;
284
+ } = _ref9;
227
285
  return accentColor || 'inherit';
228
286
  }};
229
287
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cashub/ui",
3
- "version": "0.49.0-beta.13",
3
+ "version": "0.49.0-beta.14",
4
4
  "private": false,
5
5
  "author": "CasHUB Team",
6
6
  "description": "CasHUB UI components library",