@buoy-gg/shared-ui 7.0.7 → 7.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 (101) hide show
  1. package/lib/commonjs/hooks/safe-area-impl.js +1 -1
  2. package/lib/module/hooks/safe-area-impl.js +1 -1
  3. package/lib/typescript/commonjs/hooks/safe-area-impl.d.ts +1 -1
  4. package/lib/typescript/module/hooks/safe-area-impl.d.ts +1 -1
  5. package/package.json +4 -4
  6. package/lib/commonjs/license/DeviceLimitModal.js +0 -480
  7. package/lib/commonjs/license/ManageDevicesModal.js +0 -546
  8. package/lib/commonjs/types/index.js +0 -16
  9. package/lib/commonjs/ui/components/Divider.js +0 -18
  10. package/lib/commonjs/ui/components/ErrorBoundary.js +0 -113
  11. package/lib/commonjs/ui/components/ExpandableSection.js +0 -72
  12. package/lib/commonjs/ui/components/ExpandableSectionHeader.js +0 -87
  13. package/lib/commonjs/ui/components/ExpandableSectionWithModal.js +0 -183
  14. package/lib/commonjs/ui/components/FilterViewPattern.js +0 -175
  15. package/lib/commonjs/ui/components/TypeBadge.js +0 -100
  16. package/lib/commonjs/ui/components/types.js +0 -5
  17. package/lib/commonjs/ui/console/BubbleSettingsModal.js +0 -50
  18. package/lib/commonjs/ui/console/ConsoleSection.js +0 -50
  19. package/lib/commonjs/ui/console/CyberpunkConsoleSection.js +0 -650
  20. package/lib/commonjs/ui/console/GalaxyButton.js +0 -100
  21. package/lib/commonjs/ui/console/index.js +0 -12
  22. package/lib/module/license/DeviceLimitModal.js +0 -474
  23. package/lib/module/license/ManageDevicesModal.js +0 -540
  24. package/lib/module/types/index.js +0 -3
  25. package/lib/module/ui/components/Divider.js +0 -14
  26. package/lib/module/ui/components/ErrorBoundary.js +0 -108
  27. package/lib/module/ui/components/ExpandableSection.js +0 -68
  28. package/lib/module/ui/components/ExpandableSectionHeader.js +0 -83
  29. package/lib/module/ui/components/ExpandableSectionWithModal.js +0 -179
  30. package/lib/module/ui/components/FilterViewPattern.js +0 -172
  31. package/lib/module/ui/components/TypeBadge.js +0 -96
  32. package/lib/module/ui/components/types.js +0 -3
  33. package/lib/module/ui/console/BubbleSettingsModal.js +0 -46
  34. package/lib/module/ui/console/ConsoleSection.js +0 -46
  35. package/lib/module/ui/console/CyberpunkConsoleSection.js +0 -647
  36. package/lib/module/ui/console/GalaxyButton.js +0 -96
  37. package/lib/module/ui/console/index.js +0 -5
  38. package/lib/typescript/commonjs/license/DeviceLimitModal.d.ts +0 -23
  39. package/lib/typescript/commonjs/license/DeviceLimitModal.d.ts.map +0 -1
  40. package/lib/typescript/commonjs/license/ManageDevicesModal.d.ts +0 -23
  41. package/lib/typescript/commonjs/license/ManageDevicesModal.d.ts.map +0 -1
  42. package/lib/typescript/commonjs/types/index.d.ts +0 -2
  43. package/lib/typescript/commonjs/types/index.d.ts.map +0 -1
  44. package/lib/typescript/commonjs/ui/components/Divider.d.ts +0 -2
  45. package/lib/typescript/commonjs/ui/components/Divider.d.ts.map +0 -1
  46. package/lib/typescript/commonjs/ui/components/ErrorBoundary.d.ts +0 -18
  47. package/lib/typescript/commonjs/ui/components/ErrorBoundary.d.ts.map +0 -1
  48. package/lib/typescript/commonjs/ui/components/ExpandableSection.d.ts +0 -15
  49. package/lib/typescript/commonjs/ui/components/ExpandableSection.d.ts.map +0 -1
  50. package/lib/typescript/commonjs/ui/components/ExpandableSectionHeader.d.ts +0 -13
  51. package/lib/typescript/commonjs/ui/components/ExpandableSectionHeader.d.ts.map +0 -1
  52. package/lib/typescript/commonjs/ui/components/ExpandableSectionWithModal.d.ts +0 -18
  53. package/lib/typescript/commonjs/ui/components/ExpandableSectionWithModal.d.ts.map +0 -1
  54. package/lib/typescript/commonjs/ui/components/FilterViewPattern.d.ts +0 -15
  55. package/lib/typescript/commonjs/ui/components/FilterViewPattern.d.ts.map +0 -1
  56. package/lib/typescript/commonjs/ui/components/TypeBadge.d.ts +0 -6
  57. package/lib/typescript/commonjs/ui/components/TypeBadge.d.ts.map +0 -1
  58. package/lib/typescript/commonjs/ui/components/types.d.ts +0 -3
  59. package/lib/typescript/commonjs/ui/components/types.d.ts.map +0 -1
  60. package/lib/typescript/commonjs/ui/console/BubbleSettingsModal.d.ts +0 -11
  61. package/lib/typescript/commonjs/ui/console/BubbleSettingsModal.d.ts.map +0 -1
  62. package/lib/typescript/commonjs/ui/console/ConsoleSection.d.ts +0 -19
  63. package/lib/typescript/commonjs/ui/console/ConsoleSection.d.ts.map +0 -1
  64. package/lib/typescript/commonjs/ui/console/CyberpunkConsoleSection.d.ts +0 -17
  65. package/lib/typescript/commonjs/ui/console/CyberpunkConsoleSection.d.ts.map +0 -1
  66. package/lib/typescript/commonjs/ui/console/GalaxyButton.d.ts +0 -10
  67. package/lib/typescript/commonjs/ui/console/GalaxyButton.d.ts.map +0 -1
  68. package/lib/typescript/commonjs/ui/console/index.d.ts +0 -2
  69. package/lib/typescript/commonjs/ui/console/index.d.ts.map +0 -1
  70. package/lib/typescript/module/license/DeviceLimitModal.d.ts +0 -23
  71. package/lib/typescript/module/license/DeviceLimitModal.d.ts.map +0 -1
  72. package/lib/typescript/module/license/ManageDevicesModal.d.ts +0 -23
  73. package/lib/typescript/module/license/ManageDevicesModal.d.ts.map +0 -1
  74. package/lib/typescript/module/types/index.d.ts +0 -2
  75. package/lib/typescript/module/types/index.d.ts.map +0 -1
  76. package/lib/typescript/module/ui/components/Divider.d.ts +0 -2
  77. package/lib/typescript/module/ui/components/Divider.d.ts.map +0 -1
  78. package/lib/typescript/module/ui/components/ErrorBoundary.d.ts +0 -18
  79. package/lib/typescript/module/ui/components/ErrorBoundary.d.ts.map +0 -1
  80. package/lib/typescript/module/ui/components/ExpandableSection.d.ts +0 -15
  81. package/lib/typescript/module/ui/components/ExpandableSection.d.ts.map +0 -1
  82. package/lib/typescript/module/ui/components/ExpandableSectionHeader.d.ts +0 -13
  83. package/lib/typescript/module/ui/components/ExpandableSectionHeader.d.ts.map +0 -1
  84. package/lib/typescript/module/ui/components/ExpandableSectionWithModal.d.ts +0 -18
  85. package/lib/typescript/module/ui/components/ExpandableSectionWithModal.d.ts.map +0 -1
  86. package/lib/typescript/module/ui/components/FilterViewPattern.d.ts +0 -15
  87. package/lib/typescript/module/ui/components/FilterViewPattern.d.ts.map +0 -1
  88. package/lib/typescript/module/ui/components/TypeBadge.d.ts +0 -6
  89. package/lib/typescript/module/ui/components/TypeBadge.d.ts.map +0 -1
  90. package/lib/typescript/module/ui/components/types.d.ts +0 -3
  91. package/lib/typescript/module/ui/components/types.d.ts.map +0 -1
  92. package/lib/typescript/module/ui/console/BubbleSettingsModal.d.ts +0 -11
  93. package/lib/typescript/module/ui/console/BubbleSettingsModal.d.ts.map +0 -1
  94. package/lib/typescript/module/ui/console/ConsoleSection.d.ts +0 -19
  95. package/lib/typescript/module/ui/console/ConsoleSection.d.ts.map +0 -1
  96. package/lib/typescript/module/ui/console/CyberpunkConsoleSection.d.ts +0 -17
  97. package/lib/typescript/module/ui/console/CyberpunkConsoleSection.d.ts.map +0 -1
  98. package/lib/typescript/module/ui/console/GalaxyButton.d.ts +0 -10
  99. package/lib/typescript/module/ui/console/GalaxyButton.d.ts.map +0 -1
  100. package/lib/typescript/module/ui/console/index.d.ts +0 -2
  101. package/lib/typescript/module/ui/console/index.d.ts.map +0 -1
@@ -1,50 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ConsoleSection = ConsoleSection;
7
- var _reactNative = require("react-native");
8
- var _ExpandableSectionHeader = require("../components/ExpandableSectionHeader.js");
9
- var _GalaxyButton = require("./GalaxyButton.js");
10
- var _jsxRuntime = require("react/jsx-runtime");
11
- // Stable constants moved to module scope to prevent re-renders [[memory:4875251]]
12
-
13
- /**
14
- * Individual console section component following composition principles.
15
- * Separates section UI rendering from business logic.
16
- */
17
- function ConsoleSection({
18
- id: _id,
19
- title,
20
- subtitle,
21
- icon,
22
- iconColor,
23
- iconBackgroundColor,
24
- onPress
25
- }) {
26
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalaxyButton.GalaxyButton, {
27
- onPress: onPress,
28
- style: styles.sectionCard,
29
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
30
- style: styles.sectionCardContent,
31
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandableSectionHeader.ExpandableSectionHeader, {
32
- title: title,
33
- subtitle: subtitle || "",
34
- icon: icon,
35
- iconColor: iconColor,
36
- iconBackgroundColor: iconBackgroundColor,
37
- isExpanded: false,
38
- onPress: onPress
39
- })
40
- })
41
- });
42
- }
43
- const styles = _reactNative.StyleSheet.create({
44
- sectionCard: {
45
- marginBottom: 16 // Match ExpandableSection spacing
46
- },
47
- sectionCardContent: {
48
- padding: 24 // Match ExpandableSection padding
49
- }
50
- });
@@ -1,650 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.CyberpunkConsoleSection = CyberpunkConsoleSection;
7
- var _react = require("react");
8
- var _reactNative = require("react-native");
9
- var _absoluteFill = require("../../utils/absoluteFill.js");
10
- var _index = require("../../icons/index.js");
11
- var _index2 = require("../gameUI/index.js");
12
- var _jsxRuntime = require("react/jsx-runtime");
13
- // CONFIGURABLE: Change this value to adjust glitch duration (in milliseconds)
14
- // Examples: 100 for very quick, 500 for half second, 1000 for 1 second, 2000 for 2 seconds
15
- const GLITCH_DURATION_MS = 100;
16
- function CyberpunkConsoleSection({
17
- id: _id,
18
- // Unused but required by interface
19
- title,
20
- subtitle,
21
- icon: Icon,
22
- iconColor,
23
- iconBackgroundColor,
24
- onPress,
25
- style,
26
- index = 0
27
- }) {
28
- // Animation values
29
- const glowIntensity = (0, _react.useRef)(new _reactNative.Animated.Value(0.3)).current;
30
- const borderGlow = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
31
- const glitchX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
32
- const glitchY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
33
- const glitchOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
34
- const glitchScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
35
- const pulseScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
36
- const isPressedRef = (0, _react.useRef)(0);
37
- (0, _react.useEffect)(() => {
38
- // Border glow pulse
39
- _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(borderGlow, {
40
- toValue: 0.8,
41
- duration: 2000,
42
- easing: _reactNative.Easing.inOut(_reactNative.Easing.quad),
43
- useNativeDriver: false
44
- }), _reactNative.Animated.timing(borderGlow, {
45
- toValue: 0.2,
46
- duration: 2000,
47
- easing: _reactNative.Easing.inOut(_reactNative.Easing.quad),
48
- useNativeDriver: false
49
- })])).start();
50
-
51
- // Random glitch effect with varying delays per item
52
- const startRandomGlitch = () => {
53
- // Random delay between 3-8 seconds with stagger based on index
54
- const nextGlitchDelay = 3000 + Math.random() * 5000 + index * 500;
55
- setTimeout(() => {
56
- // Calculate proportional durations based on GLITCH_DURATION_MS
57
- const d = GLITCH_DURATION_MS; // Total duration
58
-
59
- // Glitch opacity animation - uses proportional timing
60
- _reactNative.Animated.sequence([_reactNative.Animated.timing(glitchOpacity, {
61
- toValue: 1,
62
- duration: d * 0.15,
63
- useNativeDriver: true
64
- }), _reactNative.Animated.timing(glitchOpacity, {
65
- toValue: 0.3,
66
- duration: d * 0.1,
67
- useNativeDriver: true
68
- }), _reactNative.Animated.timing(glitchOpacity, {
69
- toValue: 0.9,
70
- duration: d * 0.15,
71
- useNativeDriver: true
72
- }), _reactNative.Animated.timing(glitchOpacity, {
73
- toValue: 0.2,
74
- duration: d * 0.1,
75
- useNativeDriver: true
76
- }), _reactNative.Animated.timing(glitchOpacity, {
77
- toValue: 0.8,
78
- duration: d * 0.2,
79
- useNativeDriver: true
80
- }), _reactNative.Animated.timing(glitchOpacity, {
81
- toValue: 0.4,
82
- duration: d * 0.1,
83
- useNativeDriver: true
84
- }), _reactNative.Animated.timing(glitchOpacity, {
85
- toValue: 0.7,
86
- duration: d * 0.15,
87
- useNativeDriver: true
88
- }), _reactNative.Animated.timing(glitchOpacity, {
89
- toValue: 0,
90
- duration: d * 0.05,
91
- useNativeDriver: true
92
- })]).start();
93
-
94
- // Glitch X displacement - proportional timing
95
- _reactNative.Animated.sequence([_reactNative.Animated.timing(glitchX, {
96
- toValue: 10,
97
- duration: d * 0.1,
98
- useNativeDriver: true
99
- }), _reactNative.Animated.timing(glitchX, {
100
- toValue: -10,
101
- duration: d * 0.1,
102
- useNativeDriver: true
103
- }), _reactNative.Animated.timing(glitchX, {
104
- toValue: 8,
105
- duration: d * 0.15,
106
- useNativeDriver: true
107
- }), _reactNative.Animated.timing(glitchX, {
108
- toValue: -6,
109
- duration: d * 0.15,
110
- useNativeDriver: true
111
- }), _reactNative.Animated.timing(glitchX, {
112
- toValue: 5,
113
- duration: d * 0.2,
114
- useNativeDriver: true
115
- }), _reactNative.Animated.timing(glitchX, {
116
- toValue: -3,
117
- duration: d * 0.15,
118
- useNativeDriver: true
119
- }), _reactNative.Animated.timing(glitchX, {
120
- toValue: 0,
121
- duration: d * 0.15,
122
- useNativeDriver: true
123
- })]).start();
124
-
125
- // Glitch Y displacement - proportional timing
126
- _reactNative.Animated.sequence([_reactNative.Animated.timing(glitchY, {
127
- toValue: -5,
128
- duration: d * 0.2,
129
- useNativeDriver: true
130
- }), _reactNative.Animated.timing(glitchY, {
131
- toValue: 4,
132
- duration: d * 0.2,
133
- useNativeDriver: true
134
- }), _reactNative.Animated.timing(glitchY, {
135
- toValue: -3,
136
- duration: d * 0.2,
137
- useNativeDriver: true
138
- }), _reactNative.Animated.timing(glitchY, {
139
- toValue: 2,
140
- duration: d * 0.2,
141
- useNativeDriver: true
142
- }), _reactNative.Animated.timing(glitchY, {
143
- toValue: 0,
144
- duration: d * 0.2,
145
- useNativeDriver: true
146
- })]).start();
147
-
148
- // Glitch scale - proportional timing
149
- _reactNative.Animated.sequence([_reactNative.Animated.timing(glitchScale, {
150
- toValue: 1.05,
151
- duration: d * 0.15,
152
- useNativeDriver: true
153
- }), _reactNative.Animated.timing(glitchScale, {
154
- toValue: 0.98,
155
- duration: d * 0.15,
156
- useNativeDriver: true
157
- }), _reactNative.Animated.timing(glitchScale, {
158
- toValue: 1.03,
159
- duration: d * 0.2,
160
- useNativeDriver: true
161
- }), _reactNative.Animated.timing(glitchScale, {
162
- toValue: 0.97,
163
- duration: d * 0.2,
164
- useNativeDriver: true
165
- }), _reactNative.Animated.timing(glitchScale, {
166
- toValue: 1.02,
167
- duration: d * 0.15,
168
- useNativeDriver: true
169
- }), _reactNative.Animated.timing(glitchScale, {
170
- toValue: 1,
171
- duration: d * 0.15,
172
- useNativeDriver: true
173
- })]).start();
174
-
175
- // Glow intensity glitch - proportional timing
176
- _reactNative.Animated.sequence([_reactNative.Animated.timing(glowIntensity, {
177
- toValue: 1,
178
- duration: d * 0.3,
179
- useNativeDriver: false
180
- }), _reactNative.Animated.timing(glowIntensity, {
181
- toValue: 0.5,
182
- duration: d * 0.4,
183
- useNativeDriver: false
184
- }), _reactNative.Animated.timing(glowIntensity, {
185
- toValue: 0.3,
186
- duration: d * 0.3,
187
- useNativeDriver: false
188
- })]).start();
189
-
190
- // Border glow pulse during glitch - proportional timing
191
- _reactNative.Animated.sequence([_reactNative.Animated.timing(borderGlow, {
192
- toValue: 1,
193
- duration: d * 0.5,
194
- useNativeDriver: false
195
- }), _reactNative.Animated.timing(borderGlow, {
196
- toValue: 0.2,
197
- duration: d * 0.5,
198
- useNativeDriver: false
199
- })]).start();
200
-
201
- // Schedule next glitch
202
- startRandomGlitch();
203
- }, nextGlitchDelay);
204
- };
205
-
206
- // Start the random glitch cycle
207
- const initialDelay = Math.random() * 2000 + index * 300;
208
- const timeoutId = setTimeout(startRandomGlitch, initialDelay);
209
- return () => clearTimeout(timeoutId);
210
- }, [borderGlow, glitchOpacity, glitchScale, glitchX, glitchY, glowIntensity, index, pulseScale]);
211
- const handlePressIn = () => {
212
- isPressedRef.current = 1;
213
- _reactNative.Animated.spring(pulseScale, {
214
- toValue: 0.98,
215
- damping: 15,
216
- stiffness: 400,
217
- useNativeDriver: true
218
- }).start();
219
- _reactNative.Animated.timing(glowIntensity, {
220
- toValue: 1,
221
- duration: 100,
222
- useNativeDriver: false
223
- }).start();
224
-
225
- // Trigger glitch on press
226
- _reactNative.Animated.sequence([_reactNative.Animated.timing(glitchOpacity, {
227
- toValue: 1,
228
- duration: 20,
229
- useNativeDriver: true
230
- }), _reactNative.Animated.timing(glitchOpacity, {
231
- toValue: 0,
232
- duration: 30,
233
- useNativeDriver: true
234
- })]).start();
235
- _reactNative.Animated.sequence([_reactNative.Animated.timing(glitchX, {
236
- toValue: 5,
237
- duration: 20,
238
- useNativeDriver: true
239
- }), _reactNative.Animated.timing(glitchX, {
240
- toValue: -5,
241
- duration: 20,
242
- useNativeDriver: true
243
- }), _reactNative.Animated.timing(glitchX, {
244
- toValue: 0,
245
- duration: 20,
246
- useNativeDriver: true
247
- })]).start();
248
- };
249
- const handlePressOut = () => {
250
- isPressedRef.current = 0;
251
- _reactNative.Animated.spring(pulseScale, {
252
- toValue: 1,
253
- damping: 15,
254
- stiffness: 400,
255
- useNativeDriver: true
256
- }).start();
257
- _reactNative.Animated.timing(glowIntensity, {
258
- toValue: 0.3,
259
- duration: 200,
260
- useNativeDriver: false
261
- }).start();
262
- };
263
- const containerAnimatedStyle = {
264
- transform: [{
265
- scale: pulseScale
266
- }]
267
- };
268
-
269
- // Get accent color for this section
270
- const getAccentColor = () => {
271
- // Direct color matching
272
- if (iconColor === "#10B981") return "#10B981"; // Green
273
- if (iconColor === "#EF4444") return "#EF4444"; // Red
274
- if (iconColor === "#3B82F6") return "#3B82F6"; // Blue
275
- if (iconColor === "#8B5CF6") return "#8B5CF6"; // Purple
276
- if (iconColor === "#F59E0B") return "#F59E0B"; // Yellow
277
- if (iconColor === "#00FFFF") return _index2.gameUIColors.info; // Cyan
278
- if (iconColor === "#EC4899") return "#EC4899"; // Pink
279
- if (iconColor === "#14B8A6") return "#14B8A6"; // Teal
280
- if (iconColor === "#FF006E") return "#FF006E"; // React Query pink/red
281
- if (iconColor === "#00FF88") return "#00FF88"; // Storage green
282
- if (iconColor === "#00E5FF") return _index2.gameUIColors.info; // Storage Events cyan
283
- if (iconColor === "#E040FB") return "#E040FB"; // Network purple
284
-
285
- // Fallback pattern matching for any other colors
286
- if (iconColor.includes("FF006E")) return "#FF006E";
287
- if (iconColor.includes("00FF88")) return "#00FF88";
288
- if (iconColor.includes("00E5FF")) return "#00E5FF";
289
- if (iconColor.includes("E040FB")) return "#E040FB";
290
- return _index2.gameUIColors.info; // Default cyan
291
- };
292
- const accentColor = getAccentColor();
293
-
294
- // Convert hex color to RGB values for interpolation
295
- const hexToRgb = hex => {
296
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
297
- return result ? {
298
- r: parseInt(result[1], 16),
299
- g: parseInt(result[2], 16),
300
- b: parseInt(result[3], 16)
301
- } : {
302
- r: 0,
303
- g: 255,
304
- b: 255
305
- };
306
- };
307
- const rgb = hexToRgb(accentColor);
308
- const shadowOpacityValue = glowIntensity.interpolate({
309
- inputRange: [0, 1],
310
- outputRange: [0, 0.8]
311
- });
312
- const borderAnimatedStyle = {
313
- borderColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.4)`,
314
- // Static fallback
315
- shadowOpacity: shadowOpacityValue
316
- };
317
- const glitchStyle = {
318
- opacity: glitchOpacity,
319
- transform: [{
320
- translateX: glitchX
321
- }, {
322
- translateY: glitchY
323
- }, {
324
- scale: glitchScale
325
- }]
326
- };
327
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
328
- onPress: onPress,
329
- onPressIn: handlePressIn,
330
- onPressOut: handlePressOut,
331
- style: style,
332
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
333
- style: [styles.container, containerAnimatedStyle],
334
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
335
- style: [styles.card, borderAnimatedStyle, {
336
- shadowColor: accentColor
337
- }],
338
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
339
- style: [styles.glassLayer1, {
340
- backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.02)`
341
- }]
342
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
343
- style: [styles.glassLayer2, {
344
- backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.015)`
345
- }]
346
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
347
- style: [styles.glassLayer3, {
348
- backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.01)`
349
- }]
350
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
351
- style: [styles.glassShimmer]
352
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
353
- style: [styles.cornerAccent, styles.cornerTL, {
354
- backgroundColor: accentColor
355
- }]
356
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
357
- style: [styles.cornerAccent, styles.cornerTR, {
358
- backgroundColor: `${accentColor}80`
359
- }]
360
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
361
- style: [styles.cornerAccent, styles.cornerBL, {
362
- backgroundColor: `${accentColor}80`
363
- }]
364
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
365
- style: [styles.cornerAccent, styles.cornerBR, {
366
- backgroundColor: accentColor
367
- }]
368
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
369
- style: [styles.glitchOverlayLayer, glitchStyle, {
370
- backgroundColor: `${accentColor}20`,
371
- borderColor: accentColor
372
- }],
373
- pointerEvents: "none",
374
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
375
- style: styles.glitchContent,
376
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
377
- style: [styles.iconContainer, {
378
- borderColor: accentColor
379
- }],
380
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
381
- size: 20,
382
- color: accentColor
383
- })
384
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
385
- style: styles.textContainer,
386
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
387
- style: [styles.glitchTitle, {
388
- color: accentColor
389
- }],
390
- children: ["_", title, "_"]
391
- }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
392
- style: [styles.glitchSubtitle, {
393
- color: accentColor
394
- }],
395
- children: subtitle
396
- })]
397
- })]
398
- })
399
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
400
- style: styles.content,
401
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
402
- style: [styles.iconContainer, {
403
- borderColor: `${accentColor}30`
404
- }],
405
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
406
- style: [styles.iconInner, {
407
- backgroundColor: `${iconBackgroundColor}15`,
408
- borderColor: `${accentColor}40`
409
- }],
410
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
411
- size: 20,
412
- color: iconColor
413
- })
414
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
415
- style: [styles.iconGlow, {
416
- backgroundColor: accentColor
417
- }]
418
- })]
419
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
420
- style: styles.textContainer,
421
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
422
- style: [styles.title, {
423
- textShadowColor: accentColor
424
- }],
425
- children: title
426
- }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
427
- style: [styles.subtitle, {
428
- color: `${accentColor}99`
429
- }],
430
- children: subtitle
431
- })]
432
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
433
- style: styles.arrowContainer,
434
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
435
- size: 16,
436
- color: `${accentColor}80`
437
- })
438
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
439
- style: styles.dataDots,
440
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
441
- style: [styles.dot, {
442
- backgroundColor: accentColor,
443
- opacity: 0.8
444
- }]
445
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
446
- style: [styles.dot, {
447
- backgroundColor: accentColor,
448
- opacity: 0.5
449
- }]
450
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
451
- style: [styles.dot, {
452
- backgroundColor: accentColor,
453
- opacity: 0.3
454
- }]
455
- })]
456
- })]
457
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
458
- style: styles.binaryPattern,
459
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
460
- style: [styles.binaryText, {
461
- color: `${accentColor}40`
462
- }],
463
- children: "01101"
464
- })
465
- })]
466
- })
467
- })
468
- });
469
- }
470
- const styles = _reactNative.StyleSheet.create({
471
- container: {
472
- marginBottom: 12
473
- },
474
- card: {
475
- height: 82,
476
- borderRadius: 12,
477
- borderWidth: 1.5,
478
- overflow: "hidden",
479
- shadowOffset: {
480
- width: 0,
481
- height: 0
482
- },
483
- shadowRadius: 20,
484
- elevation: 15,
485
- backgroundColor: "rgba(5, 5, 10, 0.6)" // Darker glass background
486
- },
487
- glassLayer1: {
488
- ..._absoluteFill.absoluteFill,
489
- backgroundColor: "rgba(10, 10, 15, 0.7)",
490
- opacity: 0.8
491
- },
492
- glassLayer2: {
493
- ..._absoluteFill.absoluteFill,
494
- backgroundColor: "rgba(15, 15, 25, 0.5)",
495
- opacity: 0.6,
496
- top: "20%",
497
- left: "20%"
498
- },
499
- glassLayer3: {
500
- ..._absoluteFill.absoluteFill,
501
- backgroundColor: "rgba(20, 20, 35, 0.3)",
502
- opacity: 0.4,
503
- top: "40%",
504
- left: "40%"
505
- },
506
- glassShimmer: {
507
- ..._absoluteFill.absoluteFill,
508
- backgroundColor: "rgba(128, 128, 128, 0.06)",
509
- opacity: 0.6
510
- },
511
- glitchOverlayLayer: {
512
- ..._absoluteFill.absoluteFill,
513
- borderRadius: 12,
514
- borderWidth: 1,
515
- justifyContent: "center",
516
- zIndex: 5
517
- },
518
- glitchContent: {
519
- flexDirection: "row",
520
- alignItems: "center",
521
- paddingHorizontal: 16,
522
- height: "100%"
523
- },
524
- glitchTitle: {
525
- fontSize: 15,
526
- fontWeight: "700",
527
- letterSpacing: 2,
528
- fontFamily: "monospace",
529
- textShadowOffset: {
530
- width: 2,
531
- height: 2
532
- },
533
- textShadowRadius: 10
534
- },
535
- glitchSubtitle: {
536
- fontSize: 12,
537
- fontWeight: "500",
538
- marginTop: 2,
539
- letterSpacing: 1,
540
- fontFamily: "monospace",
541
- opacity: 0.8
542
- },
543
- cornerAccent: {
544
- position: "absolute",
545
- width: 16,
546
- height: 2
547
- },
548
- cornerTL: {
549
- top: 0,
550
- left: 0,
551
- width: 2,
552
- height: 16
553
- },
554
- cornerTR: {
555
- top: 0,
556
- right: 0
557
- },
558
- cornerBL: {
559
- bottom: 0,
560
- left: 0
561
- },
562
- cornerBR: {
563
- bottom: 0,
564
- right: 0,
565
- width: 2,
566
- height: 16
567
- },
568
- content: {
569
- flexDirection: "row",
570
- alignItems: "center",
571
- height: "100%",
572
- paddingHorizontal: 16,
573
- zIndex: 1
574
- },
575
- iconContainer: {
576
- width: 48,
577
- height: 48,
578
- borderRadius: 10,
579
- borderWidth: 1,
580
- justifyContent: "center",
581
- alignItems: "center",
582
- marginRight: 14,
583
- position: "relative"
584
- },
585
- iconInner: {
586
- width: 42,
587
- height: 42,
588
- borderRadius: 8,
589
- borderWidth: 1,
590
- justifyContent: "center",
591
- alignItems: "center"
592
- },
593
- iconGlow: {
594
- position: "absolute",
595
- width: 48,
596
- height: 48,
597
- borderRadius: 10,
598
- opacity: 0.1
599
- },
600
- textContainer: {
601
- flex: 1
602
- },
603
- title: {
604
- fontSize: 15,
605
- fontWeight: "700",
606
- color: "#FFFFFF",
607
- letterSpacing: 0.5,
608
- fontFamily: "monospace",
609
- textShadowOffset: {
610
- width: 0,
611
- height: 0
612
- },
613
- textShadowRadius: 8
614
- },
615
- subtitle: {
616
- fontSize: 12,
617
- fontWeight: "500",
618
- marginTop: 2,
619
- letterSpacing: 0.3,
620
- fontFamily: "monospace"
621
- },
622
- arrowContainer: {
623
- marginLeft: 8,
624
- opacity: 0.8
625
- },
626
- dataDots: {
627
- position: "absolute",
628
- right: 16,
629
- bottom: 8,
630
- flexDirection: "row",
631
- gap: 3
632
- },
633
- dot: {
634
- width: 3,
635
- height: 3,
636
- borderRadius: 1.5
637
- },
638
- binaryPattern: {
639
- position: "absolute",
640
- top: 8,
641
- right: 12,
642
- opacity: 0.05
643
- },
644
- binaryText: {
645
- fontSize: 8,
646
- fontFamily: "monospace",
647
- color: _index2.gameUIColors.info,
648
- letterSpacing: 1
649
- }
650
- });