dirk-cfx-react 1.1.1 → 1.1.2

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.
@@ -1,1416 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
- var zustand = require('zustand');
5
- var reactFontawesome = require('@fortawesome/react-fontawesome');
6
- var core = require('@mantine/core');
7
- var jsxRuntime = require('react/jsx-runtime');
8
- var framerMotion = require('framer-motion');
9
- var clickSoundUrl = require('../click_sound-PNCRRTM4.mp3');
10
- var hoverSoundUrl = require('../hover_sound-NBUA222C.mp3');
11
- require('@mantine/core/styles.css');
12
- require('@mantine/notifications/styles.css');
13
- require('./styles/notify.css');
14
- require('./styles/fonts.css');
15
- require('./styles/scrollBar.css');
16
- require('./styles/tornEdge.css');
17
- var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
18
- var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
19
- var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
20
- var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
21
- var hooks = require('@mantine/hooks');
22
-
23
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
24
-
25
- var clickSoundUrl__default = /*#__PURE__*/_interopDefault(clickSoundUrl);
26
- var hoverSoundUrl__default = /*#__PURE__*/_interopDefault(hoverSoundUrl);
27
-
28
- // src/utils/colorWithAlpha.ts
29
- var colorNames = {
30
- AliceBlue: { r: 240, g: 248, b: 255 },
31
- AntiqueWhite: { r: 250, g: 235, b: 215 },
32
- Aqua: { r: 0, g: 255, b: 255 },
33
- Aquamarine: { r: 127, g: 255, b: 212 },
34
- Azure: { r: 240, g: 255, b: 255 },
35
- Beige: { r: 245, g: 245, b: 220 },
36
- Bisque: { r: 255, g: 228, b: 196 },
37
- Black: { r: 0, g: 0, b: 0 },
38
- BlanchedAlmond: { r: 255, g: 235, b: 205 },
39
- Blue: { r: 0, g: 0, b: 255 },
40
- BlueViolet: { r: 138, g: 43, b: 226 },
41
- Brown: { r: 165, g: 42, b: 42 },
42
- BurlyWood: { r: 222, g: 184, b: 135 },
43
- CadetBlue: { r: 95, g: 158, b: 160 },
44
- Chartreuse: { r: 127, g: 255, b: 0 },
45
- Chocolate: { r: 210, g: 105, b: 30 },
46
- Coral: { r: 255, g: 127, b: 80 },
47
- CornflowerBlue: { r: 100, g: 149, b: 237 },
48
- Cornsilk: { r: 255, g: 248, b: 220 },
49
- Crimson: { r: 220, g: 20, b: 60 },
50
- Cyan: { r: 0, g: 255, b: 255 },
51
- DarkBlue: { r: 0, g: 0, b: 139 },
52
- DarkCyan: { r: 0, g: 139, b: 139 },
53
- DarkGoldenRod: { r: 184, g: 134, b: 11 },
54
- DarkGray: { r: 169, g: 169, b: 169 },
55
- DarkGreen: { r: 0, g: 100, b: 0 },
56
- DarkKhaki: { r: 189, g: 183, b: 107 },
57
- DarkMagenta: { r: 139, g: 0, b: 139 },
58
- DarkOliveGreen: { r: 85, g: 107, b: 47 },
59
- DarkOrange: { r: 255, g: 140, b: 0 },
60
- DarkOrchid: { r: 153, g: 50, b: 204 },
61
- DarkRed: { r: 139, g: 0, b: 0 },
62
- DarkSalmon: { r: 233, g: 150, b: 122 },
63
- DarkSeaGreen: { r: 143, g: 188, b: 143 },
64
- DarkSlateBlue: { r: 72, g: 61, b: 139 },
65
- DarkSlateGray: { r: 47, g: 79, b: 79 },
66
- DarkTurquoise: { r: 0, g: 206, b: 209 },
67
- DarkViolet: { r: 148, g: 0, b: 211 },
68
- DeepPink: { r: 255, g: 20, b: 147 },
69
- DeepSkyBlue: { r: 0, g: 191, b: 255 },
70
- DimGray: { r: 105, g: 105, b: 105 },
71
- DodgerBlue: { r: 30, g: 144, b: 255 },
72
- FireBrick: { r: 178, g: 34, b: 34 },
73
- FloralWhite: { r: 255, g: 250, b: 240 },
74
- ForestGreen: { r: 34, g: 139, b: 34 },
75
- Fuchsia: { r: 255, g: 0, b: 255 },
76
- Gainsboro: { r: 220, g: 220, b: 220 },
77
- GhostWhite: { r: 248, g: 248, b: 255 },
78
- Gold: { r: 255, g: 215, b: 0 },
79
- GoldenRod: { r: 218, g: 165, b: 32 },
80
- Gray: { r: 128, g: 128, b: 128 },
81
- Green: { r: 0, g: 128, b: 0 },
82
- GreenYellow: { r: 173, g: 255, b: 47 },
83
- HoneyDew: { r: 240, g: 255, b: 240 },
84
- HotPink: { r: 255, g: 105, b: 180 },
85
- IndianRed: { r: 205, g: 92, b: 92 },
86
- Indigo: { r: 75, g: 0, b: 130 },
87
- Ivory: { r: 255, g: 255, b: 240 },
88
- Khaki: { r: 240, g: 230, b: 140 },
89
- Lavender: { r: 230, g: 230, b: 250 },
90
- LavenderBlush: { r: 255, g: 240, b: 245 },
91
- LawnGreen: { r: 124, g: 252, b: 0 },
92
- LemonChiffon: { r: 255, g: 250, b: 205 },
93
- LightBlue: { r: 173, g: 216, b: 230 },
94
- LightCoral: { r: 240, g: 128, b: 128 },
95
- LightCyan: { r: 224, g: 255, b: 255 },
96
- LightGoldenRodYellow: { r: 250, g: 250, b: 210 },
97
- LightGray: { r: 211, g: 211, b: 211 },
98
- LightGreen: { r: 144, g: 238, b: 144 },
99
- LightPink: { r: 255, g: 182, b: 193 },
100
- LightSalmon: { r: 255, g: 160, b: 122 },
101
- LightSeaGreen: { r: 32, g: 178, b: 170 },
102
- LightSkyBlue: { r: 135, g: 206, b: 250 },
103
- LightSlateGray: { r: 119, g: 136, b: 153 },
104
- LightSteelBlue: { r: 176, g: 196, b: 222 },
105
- LightYellow: { r: 255, g: 255, b: 224 },
106
- Lime: { r: 0, g: 255, b: 0 },
107
- LimeGreen: { r: 50, g: 205, b: 50 },
108
- Linen: { r: 250, g: 240, b: 230 },
109
- Magenta: { r: 255, g: 0, b: 255 },
110
- Maroon: { r: 128, g: 0, b: 0 },
111
- // Maroon
112
- MediumAquaMarine: { r: 102, g: 205, b: 170 },
113
- MediumBlue: { r: 0, g: 0, b: 205 },
114
- MediumOrchid: { r: 186, g: 85, b: 211 },
115
- MediumPurple: { r: 147, g: 112, b: 219 },
116
- MediumSeaGreen: { r: 60, g: 179, b: 113 },
117
- MediumSlateBlue: { r: 123, g: 104, b: 238 },
118
- MediumSpringGreen: { r: 0, g: 250, b: 154 },
119
- MediumTurquoise: { r: 72, g: 209, b: 204 },
120
- MediumVioletRed: { r: 199, g: 21, b: 133 },
121
- MidnightBlue: { r: 25, g: 25, b: 112 },
122
- MintCream: { r: 245, g: 255, b: 250 },
123
- MistyRose: { r: 255, g: 228, b: 225 },
124
- Moccasin: { r: 255, g: 228, b: 181 },
125
- NavajoWhite: { r: 255, g: 222, b: 173 },
126
- Navy: { r: 0, g: 0, b: 128 },
127
- OldLace: { r: 253, g: 245, b: 230 },
128
- Olive: { r: 128, g: 128, b: 0 },
129
- OliveDrab: { r: 107, g: 142, b: 35 },
130
- Orange: { r: 255, g: 165, b: 0 },
131
- OrangeRed: { r: 255, g: 69, b: 0 },
132
- Orchid: { r: 218, g: 112, b: 214 },
133
- PaleGoldenRod: { r: 238, g: 232, b: 170 },
134
- PaleGreen: { r: 152, g: 251, b: 152 },
135
- PaleTurquoise: { r: 175, g: 238, b: 238 },
136
- PaleVioletRed: { r: 219, g: 112, b: 147 },
137
- PapayaWhip: { r: 255, g: 239, b: 213 },
138
- PeachPuff: { r: 255, g: 218, b: 185 },
139
- Peru: { r: 205, g: 133, b: 63 },
140
- Pink: { r: 255, g: 192, b: 203 },
141
- Plum: { r: 221, g: 160, b: 221 },
142
- PowderBlue: { r: 176, g: 224, b: 230 },
143
- Purple: { r: 128, g: 0, b: 128 },
144
- RebeccaPurple: { r: 102, g: 51, b: 153 },
145
- Red: { r: 255, g: 0, b: 0 },
146
- RosyBrown: { r: 188, g: 143, b: 143 },
147
- RoyalBlue: { r: 65, g: 105, b: 225 },
148
- SaddleBrown: { r: 139, g: 69, b: 19 },
149
- Salmon: { r: 250, g: 128, b: 114 },
150
- SandyBrown: { r: 244, g: 164, b: 96 },
151
- SeaGreen: { r: 46, g: 139, b: 87 },
152
- SeaShell: { r: 255, g: 245, b: 238 },
153
- Sienna: { r: 160, g: 82, b: 45 },
154
- Silver: { r: 192, g: 192, b: 192 },
155
- SkyBlue: { r: 135, g: 206, b: 235 },
156
- SlateBlue: { r: 106, g: 90, b: 205 },
157
- SlateGray: { r: 112, g: 128, b: 144 },
158
- Snow: { r: 255, g: 250, b: 250 },
159
- SpringGreen: { r: 0, g: 255, b: 127 },
160
- SteelBlue: { r: 70, g: 130, b: 180 },
161
- Tan: { r: 210, g: 180, b: 140 },
162
- Teal: { r: 0, g: 128, b: 128 },
163
- Thistle: { r: 216, g: 191, b: 216 },
164
- Tomato: { r: 255, g: 99, b: 71 },
165
- Turquoise: { r: 64, g: 224, b: 208 },
166
- Violet: { r: 238, g: 130, b: 238 },
167
- Wheat: { r: 245, g: 222, b: 179 },
168
- White: { r: 255, g: 255, b: 255 },
169
- WhiteSmoke: { r: 245, g: 245, b: 245 },
170
- Yellow: { r: 255, g: 255, b: 0 },
171
- YellowGreen: { r: 154, g: 205, b: 50 }
172
- };
173
- function colorWithAlpha(color, alpha4) {
174
- const lowerCasedColor = color.toLowerCase();
175
- if (colorNames[lowerCasedColor]) {
176
- const rgb = colorNames[lowerCasedColor];
177
- return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha4})`;
178
- }
179
- if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
180
- const hex = color.slice(1);
181
- const bigint = parseInt(hex, 16);
182
- const r = bigint >> 16 & 255;
183
- const g = bigint >> 8 & 255;
184
- const b = bigint & 255;
185
- return `rgba(${r}, ${g}, ${b}, ${alpha4})`;
186
- }
187
- if (/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(color)) {
188
- const result = color.match(/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/);
189
- if (result) {
190
- return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha4})`;
191
- }
192
- }
193
- return color;
194
- }
195
-
196
- // src/utils/misc.ts
197
- var isEnvBrowser = () => !window.invokeNative;
198
-
199
- // src/utils/fetchNui.ts
200
- async function fetchNui(eventName, data, mockData) {
201
- const options = {
202
- method: "post",
203
- headers: {
204
- "Content-Type": "application/json; charset=UTF-8"
205
- },
206
- body: JSON.stringify(data)
207
- };
208
- if (isEnvBrowser() && mockData) return mockData;
209
- if (isEnvBrowser() && mockData === void 0) {
210
- console.warn(
211
- `[fetchNui] Called fetchNui for event "${eventName}" in browser environment without mockData. Returning empty object.`
212
- );
213
- return {};
214
- }
215
- const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app";
216
- const resp = await fetch(`https://${resourceName}/${eventName}`, options);
217
- return await resp.json();
218
- }
219
- async function registerInitialFetch(eventName, data, mockData) {
220
- const fetcher = () => fetchNui(eventName, data, mockData);
221
- return fetcher();
222
- }
223
- var localeStore = zustand.create((set, get) => {
224
- return {
225
- locales: {
226
- "OccupantsDesc": "Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant."
227
- },
228
- locale: (key, ...args) => {
229
- const exists = get().locales[key];
230
- let translation = exists || key;
231
- if (args.length) {
232
- translation = translation.replace(/%s/g, () => String(args.shift() || ""));
233
- }
234
- return translation;
235
- }
236
- };
237
- });
238
- var locale = localeStore.getState().locale;
239
- registerInitialFetch("GET_LOCALES", void 0).then((data) => {
240
- localeStore.setState({ locales: data });
241
- });
242
- function BorderedIcon(props) {
243
- const theme = core.useMantineTheme();
244
- return /* @__PURE__ */ jsxRuntime.jsx(
245
- reactFontawesome.FontAwesomeIcon,
246
- {
247
- icon: props.icon,
248
- color: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][theme.primaryShade], props.hovered ? 0.9 : 0.9),
249
- style: {
250
- // backgroundColor: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7 as number], (props.hoverable ? (props.hovered ? 0.3 : 0.2) : 0.2)),
251
- backgroundColor: "rgba(0, 0, 0, 0.5)",
252
- padding: props.p || theme.spacing.xs,
253
- transition: "all 0.2s ease-in-out",
254
- aspectRatio: "1/1",
255
- fontSize: props.fontSize ? props.fontSize : "2.5vh",
256
- borderRadius: theme.radius.xs,
257
- // border: `2px solid var(--mantine-primary-color-9)`,
258
- outline: `0.2vh solid ${colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][9], 0.8)}`,
259
- boxShadow: `inset 0 0 2vh ${colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7], 0.5)}`
260
- }
261
- }
262
- );
263
- }
264
- var MotionFlex = framerMotion.motion.create(core.Flex);
265
- var MotionText = framerMotion.motion.create(core.Text);
266
- var MotionImage = framerMotion.motion.create(core.Image);
267
- var MotionIcon = framerMotion.motion.create(reactFontawesome.FontAwesomeIcon);
268
- function Counter(props) {
269
- return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: props.count > 0 && /* @__PURE__ */ jsxRuntime.jsx(
270
- MotionFlex,
271
- {
272
- initial: { opacity: 0 },
273
- animate: { opacity: 1 },
274
- exit: { opacity: 0 },
275
- fz: "1.25vh",
276
- h: "1.75vh",
277
- justify: "center",
278
- align: "center",
279
- bg: props.color || "rgba(0, 0, 0, 0.51)",
280
- style: {
281
- borderRadius: "50%",
282
- aspectRatio: "1/1",
283
- marginBottom: "0.3vh",
284
- fontFamily: "Akrobat Bold",
285
- boxShadow: "0 0 5px rgba(0, 0, 0, 0.3)",
286
- ...props.style
287
- },
288
- children: props.count
289
- },
290
- "counter"
291
- ) });
292
- }
293
- var FloatingParticles = ({
294
- icons = [],
295
- particleCount = 55,
296
- color = "#00a552ff",
297
- size = 32,
298
- speed = "slow",
299
- opacity = 0.3,
300
- style = {},
301
- mouseRepelDistance = 150,
302
- mouseRepelStrength = 50,
303
- backgroundColor = "transparent"
304
- }) => {
305
- const containerRef = react.useRef(null);
306
- const [particles, setParticles] = react.useState([]);
307
- const mouseX = framerMotion.useMotionValue(0);
308
- const mouseY = framerMotion.useMotionValue(0);
309
- const durationMap = {
310
- slow: { base: 10, variance: 10 },
311
- medium: { base: 2, variance: 2 },
312
- fast: { base: 4, variance: 2 }
313
- };
314
- const duration = durationMap[speed];
315
- const seededRandom = (seed) => {
316
- const x = Math.sin(seed) * 1e4;
317
- return x - Math.floor(x);
318
- };
319
- react.useEffect(() => {
320
- if (!containerRef.current) return;
321
- const bounds = containerRef.current.getBoundingClientRect();
322
- const newParticles = [...Array(particleCount)].map((_, i) => {
323
- const seedX = i * 123.456;
324
- const seedY = i * 789.012;
325
- const seedDuration = i * 345.678;
326
- const baseX = seededRandom(seedX) * bounds.width;
327
- const baseY = seededRandom(seedY) * bounds.height;
328
- return {
329
- id: i,
330
- baseX,
331
- baseY,
332
- currentX: baseX,
333
- currentY: baseY,
334
- icon: icons.length > 0 ? icons[i % icons.length] : null,
335
- animationDuration: duration.base + seededRandom(seedDuration) * duration.variance
336
- };
337
- });
338
- setParticles(newParticles);
339
- }, [particleCount, icons.length, duration.base, duration.variance]);
340
- react.useEffect(() => {
341
- if (!containerRef.current) return;
342
- const handleMouseMove = (e) => {
343
- const bounds = containerRef.current.getBoundingClientRect();
344
- const x = e.clientX - bounds.left;
345
- const y = e.clientY - bounds.top;
346
- mouseX.set(x);
347
- mouseY.set(y);
348
- setParticles(
349
- (prevParticles) => prevParticles.map((particle) => {
350
- const dx = x - particle.baseX;
351
- const dy = y - particle.baseY;
352
- const distance = Math.sqrt(dx * dx + dy * dy);
353
- if (distance < mouseRepelDistance && distance > 0) {
354
- const force = (mouseRepelDistance - distance) / mouseRepelDistance;
355
- const repelX = dx / distance * force * mouseRepelStrength * -1;
356
- const repelY = dy / distance * force * mouseRepelStrength * -1;
357
- return {
358
- ...particle,
359
- currentX: particle.baseX + repelX,
360
- currentY: particle.baseY + repelY
361
- };
362
- } else {
363
- return {
364
- ...particle,
365
- currentX: particle.baseX,
366
- currentY: particle.baseY
367
- };
368
- }
369
- })
370
- );
371
- };
372
- const handleMouseLeave = () => {
373
- setParticles(
374
- (prevParticles) => prevParticles.map((particle) => ({
375
- ...particle,
376
- currentX: particle.baseX,
377
- currentY: particle.baseY
378
- }))
379
- );
380
- };
381
- const container = containerRef.current;
382
- container.addEventListener("mousemove", handleMouseMove);
383
- container.addEventListener("mouseleave", handleMouseLeave);
384
- return () => {
385
- container.removeEventListener("mousemove", handleMouseMove);
386
- container.removeEventListener("mouseleave", handleMouseLeave);
387
- };
388
- }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
389
- react.useEffect(() => {
390
- const handleResize = () => {
391
- if (!containerRef.current) return;
392
- const bounds = containerRef.current.getBoundingClientRect();
393
- setParticles(
394
- (prevParticles) => prevParticles.map((particle, i) => {
395
- const seedX = i * 123.456 + bounds.width;
396
- const seedY = i * 789.012 + bounds.height;
397
- const newBaseX = seededRandom(seedX) * bounds.width;
398
- const newBaseY = seededRandom(seedY) * bounds.height;
399
- return {
400
- ...particle,
401
- baseX: newBaseX,
402
- baseY: newBaseY,
403
- currentX: newBaseX,
404
- currentY: newBaseY
405
- };
406
- })
407
- );
408
- };
409
- window.addEventListener("resize", handleResize);
410
- return () => window.removeEventListener("resize", handleResize);
411
- }, []);
412
- return /* @__PURE__ */ jsxRuntime.jsx(
413
- "div",
414
- {
415
- ref: containerRef,
416
- style: {
417
- position: "absolute",
418
- overflow: "hidden",
419
- width: "100%",
420
- height: "100%",
421
- zIndex: -1,
422
- backgroundColor,
423
- ...style
424
- },
425
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: particles.map((particle) => /* @__PURE__ */ jsxRuntime.jsx(
426
- framerMotion.motion.div,
427
- {
428
- style: {
429
- position: "absolute",
430
- width: size,
431
- height: size,
432
- color,
433
- opacity,
434
- left: 0,
435
- top: 0
436
- },
437
- animate: {
438
- x: particle.currentX,
439
- y: particle.currentY,
440
- scale: [0.8, 1.1, 0.8],
441
- opacity: [opacity * 0.5, opacity, opacity * 0.5],
442
- // random rotate between 0 and 360 so that not all particles rotate the same
443
- rotate: particle.id % 2 === 0 ? [0, 360] : [360, 0]
444
- },
445
- transition: {
446
- x: { type: "spring", stiffness: 150, damping: 20 },
447
- y: { type: "spring", stiffness: 150, damping: 20 },
448
- rotate: {
449
- duration: particle.animationDuration,
450
- repeat: Infinity,
451
- ease: "linear"
452
- },
453
- scale: {
454
- duration: particle.animationDuration,
455
- repeat: Infinity,
456
- delay: seededRandom(particle.id * 111.222) * 5,
457
- ease: "easeInOut"
458
- },
459
- opacity: {
460
- duration: particle.animationDuration,
461
- repeat: Infinity,
462
- delay: seededRandom(particle.id * 333.444) * 5,
463
- ease: "easeInOut"
464
- }
465
- },
466
- children: particle.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: particle.icon, style: { width: "70%", height: "70%" } }) }) : /* @__PURE__ */ jsxRuntime.jsx(
467
- "div",
468
- {
469
- style: {
470
- width: "100%",
471
- height: "100%",
472
- borderRadius: "50%",
473
- backgroundColor: color
474
- }
475
- }
476
- )
477
- },
478
- particle.id
479
- )) })
480
- }
481
- );
482
- };
483
- function InfoBox(props) {
484
- const theme = core.useMantineTheme();
485
- return /* @__PURE__ */ jsxRuntime.jsxs(
486
- core.Flex,
487
- {
488
- w: "fit-content",
489
- h: "fit-content",
490
- style: {
491
- borderRadius: theme.radius.xs,
492
- overflow: "hidden",
493
- border: `0.2vh solid rgba(77,77,77,0.3)`
494
- },
495
- align: "center",
496
- children: [
497
- /* @__PURE__ */ jsxRuntime.jsx(
498
- core.Flex,
499
- {
500
- miw: "4vh",
501
- p: "xxs",
502
- bg: "rgba(77,77,77,0.2)",
503
- direction: "column",
504
- justify: "center",
505
- align: "center",
506
- children: /* @__PURE__ */ jsxRuntime.jsx(
507
- core.Text,
508
- {
509
- c: "lightgrey",
510
- size: "xxs",
511
- style: {
512
- fontFamily: "Akrobat Bold",
513
- letterSpacing: "0.05em",
514
- textTransform: "uppercase"
515
- },
516
- children: props.leftSide
517
- }
518
- )
519
- }
520
- ),
521
- /* @__PURE__ */ jsxRuntime.jsx(
522
- core.Flex,
523
- {
524
- p: "xxs",
525
- flex: 1,
526
- miw: "4vh",
527
- bg: "rgba(77,77,77,0.5)",
528
- direction: "column",
529
- align: "center",
530
- justify: "center",
531
- children: /* @__PURE__ */ jsxRuntime.jsx(
532
- core.Text,
533
- {
534
- c: "lightgrey",
535
- size: "xxs",
536
- style: {
537
- fontFamily: "Akrobat Bold",
538
- letterSpacing: "0.05em",
539
- textTransform: "uppercase"
540
- },
541
- children: props.rightSide
542
- }
543
- )
544
- }
545
- )
546
- ]
547
- }
548
- );
549
- }
550
- function InputContainer(props) {
551
- const theme = core.useMantineTheme();
552
- return /* @__PURE__ */ jsxRuntime.jsxs(
553
- MotionFlex,
554
- {
555
- w: props.w || "100%",
556
- flex: props.flex,
557
- direction: "column",
558
- h: props.h,
559
- gap: props.title ? "xs" : 0,
560
- bg: props.bg || core.alpha("var(--mantine-color-dark-9)", 0.65),
561
- p: props.p || "sm",
562
- style: {
563
- borderRadius: theme.radius.xs,
564
- boxShadow: theme.shadows.sm,
565
- overflow: "hidden",
566
- border: props.error ? `1px solid rgba(255, 100, 100, 0.8)` : "1px solid var(--mantine-color-dark-7)",
567
- ...props.style
568
- },
569
- variants: props.variants,
570
- children: [
571
- /* @__PURE__ */ jsxRuntime.jsxs(
572
- core.Flex,
573
- {
574
- align: "center",
575
- gap: "xs",
576
- children: [
577
- (props.title || props.description) && /* @__PURE__ */ jsxRuntime.jsxs(
578
- core.Flex,
579
- {
580
- direction: "column",
581
- gap: "xxs",
582
- p: props.p == "0" ? "sm" : 0,
583
- children: [
584
- props.title && /* @__PURE__ */ jsxRuntime.jsx(
585
- core.Text,
586
- {
587
- size: "sm",
588
- style: {
589
- lineHeight: "1.25vh",
590
- fontFamily: "Akrobat Bold",
591
- letterSpacing: "0.05em",
592
- textTransform: "uppercase"
593
- },
594
- children: props.title
595
- }
596
- ),
597
- props.description && /* @__PURE__ */ jsxRuntime.jsx(
598
- core.Text,
599
- {
600
- size: "xs",
601
- c: "rgba(255, 255, 255, 0.8)",
602
- fw: 400,
603
- children: props.description
604
- }
605
- )
606
- ]
607
- }
608
- ),
609
- props.error && /* @__PURE__ */ jsxRuntime.jsx(
610
- core.Text,
611
- {
612
- size: "xs",
613
- c: theme.colors.red[9],
614
- fw: 600,
615
- mb: "auto",
616
- lh: "0.8",
617
- children: props.error
618
- }
619
- ),
620
- /* @__PURE__ */ jsxRuntime.jsx(
621
- core.Flex,
622
- {
623
- ml: "auto",
624
- children: props.rightSection
625
- }
626
- )
627
- ]
628
- }
629
- ),
630
- props.children
631
- ]
632
- }
633
- );
634
- }
635
- var useAudio = zustand.create(() => {
636
- const audioRefs = {};
637
- const sounds = {
638
- click: clickSoundUrl__default.default,
639
- hover: hoverSoundUrl__default.default
640
- };
641
- for (const [key, src] of Object.entries(sounds)) {
642
- audioRefs[key] = new Audio(src);
643
- }
644
- return {
645
- play: (sound) => {
646
- const audio = audioRefs[sound];
647
- if (!audio) return console.warn(`Sound '${sound}' not found.`);
648
- audio.currentTime = 0;
649
- audio.volume = 0.1;
650
- audio.play();
651
- },
652
- stop: (sound) => {
653
- const audio = audioRefs[sound];
654
- if (!audio) return console.warn(`Sound '${sound}' not found.`);
655
- audio.pause();
656
- audio.currentTime = 0;
657
- }
658
- };
659
- });
660
- function SegmentedControl(props) {
661
- const theme = core.useMantineTheme();
662
- const play = useAudio((state) => state.play);
663
- const handleChange = (newValue) => {
664
- if (props.sounds) play("click");
665
- if (props.onChange) {
666
- props.onChange(newValue);
667
- }
668
- };
669
- return /* @__PURE__ */ jsxRuntime.jsx(
670
- core.Flex,
671
- {
672
- bg: "rgba(33, 33, 33, 0.6)",
673
- w: props.w || "fit-content",
674
- style: {
675
- borderRadius: props.roundEdges !== false ? theme.radius.xs : 0,
676
- overflow: "hidden"
677
- },
678
- ...props,
679
- children: props.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
680
- framerMotion.motion.div,
681
- {
682
- initial: { x: -100, opacity: 0 },
683
- animate: { x: 0, opacity: 1 },
684
- transition: { duration: 0.3, delay: index * 0.1, ease: "easeInOut" },
685
- style: {
686
- display: "flex",
687
- flexDirection: "row",
688
- alignItems: "center",
689
- flex: 1
690
- },
691
- children: /* @__PURE__ */ jsxRuntime.jsx(
692
- Segment,
693
- {
694
- label: item.label,
695
- value: item.value,
696
- icon: item.icon,
697
- rightSection: item.rightSection,
698
- fz: props.fz,
699
- color: props.color,
700
- selected: !props.multi ? props.value === item.value : Array.isArray(props.value) && props.value.includes(item.value),
701
- onClick: () => {
702
- if (props.multi) {
703
- const newValue = Array.isArray(props.value) ? props.value.includes(item.value) ? props.value.filter((v) => v !== item.value) : [...props.value, item.value] : [item.value];
704
- handleChange(newValue);
705
- } else {
706
- handleChange(item.value);
707
- }
708
- }
709
- },
710
- item.value
711
- )
712
- },
713
- index
714
- ))
715
- }
716
- );
717
- }
718
- function Segment(props) {
719
- const theme = core.useMantineTheme();
720
- return /* @__PURE__ */ jsxRuntime.jsxs(
721
- MotionFlex,
722
- {
723
- onClick: props.onClick,
724
- w: "100%",
725
- direction: "column",
726
- align: "center",
727
- h: "100%",
728
- bg: props.selected ? props.color ? core.alpha(props.color, 0.2) : colorWithAlpha(theme.colors[theme.primaryColor][theme.primaryShade], 0.2) : "transparent",
729
- pos: "relative",
730
- style: {
731
- // position: "relative",
732
- cursor: "pointer"
733
- },
734
- justify: "center",
735
- whileHover: { scale: 1.05 },
736
- whileTap: { scale: 0.95 },
737
- children: [
738
- /* @__PURE__ */ jsxRuntime.jsxs(
739
- core.Flex,
740
- {
741
- align: "center",
742
- gap: "xs",
743
- p: "xs",
744
- children: [
745
- props.icon && /* @__PURE__ */ jsxRuntime.jsx(
746
- MotionIcon,
747
- {
748
- icon: props.icon,
749
- initial: {
750
- color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "inherit"
751
- },
752
- animate: {
753
- color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "inherit"
754
- },
755
- exit: {
756
- color: "inherit"
757
- },
758
- style: {
759
- fontSize: theme.fontSizes.xs,
760
- marginBottom: "0.2vh"
761
- }
762
- }
763
- ),
764
- /* @__PURE__ */ jsxRuntime.jsx(
765
- MotionText,
766
- {
767
- size: props.fz || "xs",
768
- initial: {
769
- color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "rgba(255, 255, 255, 0.7)"
770
- },
771
- animate: {
772
- color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "rgba(255, 255, 255, 0.7)"
773
- },
774
- exit: {
775
- color: "rgba(255, 255, 255, 0.7)"
776
- },
777
- style: {
778
- fontFamily: "Akrobat Bold",
779
- letterSpacing: "0.1em",
780
- textTransform: "uppercase"
781
- },
782
- children: props.label.toUpperCase()
783
- }
784
- ),
785
- props.rightSection
786
- ]
787
- }
788
- ),
789
- /* @__PURE__ */ jsxRuntime.jsx(
790
- framerMotion.motion.div,
791
- {
792
- initial: false,
793
- animate: {
794
- scaleX: props.selected ? 1 : 0,
795
- opacity: props.selected ? 1 : 0
796
- },
797
- transition: {
798
- duration: 0.3,
799
- ease: [0.4, 0, 0.2, 1]
800
- // Custom easing curve for smooth feel
801
- },
802
- style: {
803
- position: "absolute",
804
- bottom: 0,
805
- left: 0,
806
- right: 0,
807
- height: "0.2vh",
808
- backgroundColor: props.color || theme.colors[theme.primaryColor][5],
809
- transformOrigin: "center"
810
- }
811
- }
812
- )
813
- ]
814
- }
815
- );
816
- }
817
- var NavigationContext = react.createContext(null);
818
- function useNavigation(selector) {
819
- const navigation = react.useContext(NavigationContext);
820
- if (!navigation) {
821
- throw new Error("useNavigation must be used within a NavigationProvider");
822
- }
823
- return zustand.useStore(navigation, selector);
824
- }
825
- function useNavigationStore() {
826
- const navigation = react.useContext(NavigationContext);
827
- if (!navigation) {
828
- throw new Error("useNavigationStore must be used within a NavigationProvider");
829
- }
830
- return navigation;
831
- }
832
- function NavigationProvider({ children, defaultPage }) {
833
- const storeRef = react.useRef(
834
- zustand.create(() => ({
835
- pageId: defaultPage || "home"
836
- }))
837
- );
838
- return /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.Provider, { value: storeRef.current, children });
839
- }
840
- function NavBar(props) {
841
- const pageId = useNavigation((state) => state.pageId);
842
- const store = useNavigationStore();
843
- return /* @__PURE__ */ jsxRuntime.jsx(
844
- SegmentedControl,
845
- {
846
- sounds: true,
847
- w: "100%",
848
- value: pageId,
849
- items: props.items,
850
- onChange: (value) => {
851
- store.setState({ pageId: value });
852
- }
853
- }
854
- );
855
- }
856
- var containerVariants = {
857
- hidden: { opacity: 0 },
858
- visible: {
859
- opacity: 1,
860
- transition: {
861
- staggerChildren: 0.1,
862
- delayChildren: 0.05
863
- }
864
- },
865
- exit: {
866
- opacity: 0,
867
- transition: {
868
- staggerChildren: 0.05,
869
- staggerDirection: -1
870
- }
871
- }
872
- };
873
- var itemVariants = {
874
- hidden: {
875
- opacity: 0,
876
- x: 20,
877
- scale: 0.95
878
- },
879
- visible: {
880
- opacity: 1,
881
- x: 0,
882
- scale: 1,
883
- transition: {
884
- type: "spring",
885
- stiffness: 300,
886
- damping: 24
887
- }
888
- },
889
- exit: {
890
- opacity: 0,
891
- x: -10,
892
- scale: 0.95,
893
- transition: {
894
- duration: 0.2
895
- }
896
- }
897
- };
898
- function SegmentedProgress(props) {
899
- const progressPerSegment = 100 / props.segments;
900
- const filledSegments = Math.floor(props.progress / progressPerSegment);
901
- const partialFill = props.progress % progressPerSegment / progressPerSegment;
902
- return /* @__PURE__ */ jsxRuntime.jsx(
903
- MotionFlex,
904
- {
905
- w: "100%",
906
- h: props.size || "1vh",
907
- gap: "xs",
908
- initial: "hidden",
909
- animate: "visible",
910
- variants: containerVariants,
911
- children: [...Array(props.segments)].map((_, index) => {
912
- const isFilled = index < filledSegments;
913
- const isPartial = index === filledSegments;
914
- return /* @__PURE__ */ jsxRuntime.jsx(
915
- framerMotion.motion.div,
916
- {
917
- variants: itemVariants,
918
- style: {
919
- width: `${100 / props.segments}%`,
920
- // Ensures equal width distribution
921
- height: "100%",
922
- background: isFilled ? "rgba(255, 255, 255, 0.8)" : isPartial ? `linear-gradient(to right, rgba(255, 255, 255, 0.8) ${partialFill * 100}%, rgba(255, 255, 255, 0.2) ${partialFill * 100}%)` : "rgba(255, 255, 255, 0.2)",
923
- transition: "background 0.3s ease"
924
- }
925
- },
926
- index
927
- );
928
- })
929
- }
930
- );
931
- }
932
- fontawesomeSvgCore.library.add(freeSolidSvgIcons.fas, freeRegularSvgIcons.far, freeBrandsSvgIcons.fab);
933
- var useSettings = zustand.create((set) => ({
934
- game: "fivem",
935
- primaryColor: "dirk",
936
- primaryShade: 9,
937
- itemImgPath: "https://assets.dirkcfx.com/items/",
938
- customTheme: {}
939
- }));
940
- registerInitialFetch("GET_SETTINGS", void 0, {
941
- game: "fivem",
942
- primaryColor: "dirk",
943
- primaryShade: 9,
944
- itemImgPath: "https://assets.dirkcfx.com/items/",
945
- customTheme: {}
946
- }).then((data) => {
947
- useSettings.setState({
948
- ...data
949
- });
950
- });
951
- function Title(props) {
952
- const game = useSettings((state) => state.game);
953
- const theme = core.useMantineTheme();
954
- return /* @__PURE__ */ jsxRuntime.jsx(
955
- core.Flex,
956
- {
957
- direction: "column",
958
- bg: props.bg || "transparent",
959
- gap: "xs",
960
- w: props.w || "100%",
961
- p: props.p || "0",
962
- style: {
963
- userSelect: "none",
964
- borderBottom: props.removeBorder ? "none" : `0.2vh solid ${props.borderColor || colorWithAlpha(theme.colors[theme.primaryColor][9], 0.5)}`
965
- },
966
- children: /* @__PURE__ */ jsxRuntime.jsxs(
967
- core.Flex,
968
- {
969
- align: "center",
970
- justify: "center",
971
- children: [
972
- /* @__PURE__ */ jsxRuntime.jsxs(
973
- core.Flex,
974
- {
975
- align: "center",
976
- gap: "sm",
977
- pr: "xs",
978
- children: [
979
- /* @__PURE__ */ jsxRuntime.jsx(
980
- BorderedIcon,
981
- {
982
- icon: props.icon,
983
- fontSize: theme.fontSizes.md,
984
- color: props.iconColor
985
- }
986
- ),
987
- /* @__PURE__ */ jsxRuntime.jsxs(
988
- core.Flex,
989
- {
990
- direction: "column",
991
- gap: "0.25vh",
992
- children: [
993
- /* @__PURE__ */ jsxRuntime.jsx(core.Text, { p: "0", size: "sm", style: {
994
- lineHeight: theme.fontSizes.md,
995
- fontFamily: game == "fivem" ? "Akrobat Bold" : "Red Dead",
996
- letterSpacing: "0.05em",
997
- textTransform: "uppercase"
998
- }, children: props.title }),
999
- /* @__PURE__ */ jsxRuntime.jsx(
1000
- core.Text,
1001
- {
1002
- size: "xs",
1003
- c: "grey",
1004
- style: { whiteSpace: "normal", wordWrap: "break-word" },
1005
- children: props.description
1006
- }
1007
- )
1008
- ]
1009
- }
1010
- )
1011
- ]
1012
- }
1013
- ),
1014
- /* @__PURE__ */ jsxRuntime.jsx(
1015
- core.Flex,
1016
- {
1017
- ml: "auto",
1018
- align: "center",
1019
- gap: "xs",
1020
- children: props.rightSection
1021
- }
1022
- )
1023
- ]
1024
- }
1025
- )
1026
- }
1027
- );
1028
- }
1029
- function LevelBanner(props) {
1030
- return /* @__PURE__ */ jsxRuntime.jsxs(
1031
- MotionFlex,
1032
- {
1033
- w: "35vh",
1034
- pos: "absolute",
1035
- left: "50%",
1036
- align: "center",
1037
- gap: "xs",
1038
- style: {
1039
- borderRadius: core.useMantineTheme().radius.xxs
1040
- },
1041
- initial: { opacity: 0, y: -10, transform: "translateX(-50%)" },
1042
- animate: { opacity: 1, y: 0, transform: "translateX(-50%)" },
1043
- exit: { opacity: 0, y: -10, transform: "translateX(-50%)" },
1044
- transition: { duration: 0.3 },
1045
- direction: "column",
1046
- children: [
1047
- /* @__PURE__ */ jsxRuntime.jsxs(
1048
- core.Flex,
1049
- {
1050
- w: "100%",
1051
- justify: "space-between",
1052
- children: [
1053
- /* @__PURE__ */ jsxRuntime.jsxs(
1054
- core.Text,
1055
- {
1056
- size: "xxs",
1057
- c: "rgba(255, 255, 255, 0.9)",
1058
- style: {
1059
- fontFamily: "Akrobat Bold",
1060
- letterSpacing: "0.1em"
1061
- },
1062
- children: [
1063
- "LVL ",
1064
- props.level
1065
- ]
1066
- }
1067
- ),
1068
- /* @__PURE__ */ jsxRuntime.jsxs(
1069
- core.Text,
1070
- {
1071
- size: "xxs",
1072
- c: "rgba(255, 255, 255, 0.7)",
1073
- style: {
1074
- fontFamily: "Akrobat Bold",
1075
- letterSpacing: "0.1em"
1076
- },
1077
- children: [
1078
- props.exp,
1079
- "/",
1080
- props.nextLevelXP,
1081
- " XP"
1082
- ]
1083
- }
1084
- ),
1085
- /* @__PURE__ */ jsxRuntime.jsxs(
1086
- core.Text,
1087
- {
1088
- size: "xxs",
1089
- c: "rgba(255, 255, 255, 0.7)",
1090
- style: {
1091
- fontFamily: "Akrobat Bold",
1092
- letterSpacing: "0.1em"
1093
- },
1094
- children: [
1095
- "LVL ",
1096
- props.level + 1
1097
- ]
1098
- }
1099
- )
1100
- ]
1101
- }
1102
- ),
1103
- /* @__PURE__ */ jsxRuntime.jsx(
1104
- core.Progress,
1105
- {
1106
- color: props.color,
1107
- w: "100%",
1108
- size: "sm",
1109
- value: props.progressToLevel
1110
- }
1111
- )
1112
- ]
1113
- }
1114
- );
1115
- }
1116
- function LevelPanel(props) {
1117
- const theme = core.useMantineTheme();
1118
- return /* @__PURE__ */ jsxRuntime.jsxs(
1119
- core.Flex,
1120
- {
1121
- w: "fit-content",
1122
- pr: "8vh",
1123
- pl: "8vh",
1124
- bg: "linear-gradient(180deg, rgba(30, 30, 30, 0.82) 0%, rgba(30, 30, 30, 0.3) 50%, rgba(30, 30, 30, 0.6) 100%)",
1125
- style: {
1126
- borderRadius: theme.radius.xs,
1127
- boxShadow: theme.shadows.sm,
1128
- outline: "0.2vh solid rgba(255,255,255,0.1)"
1129
- },
1130
- justify: "center",
1131
- align: "center",
1132
- direction: "column",
1133
- p: "sm",
1134
- children: [
1135
- /* @__PURE__ */ jsxRuntime.jsx(
1136
- core.RingProgress,
1137
- {
1138
- size: 190,
1139
- roundCaps: true,
1140
- thickness: 10,
1141
- sections: [{ value: props.progressToLevel, color: core.alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.9) }],
1142
- label: /* @__PURE__ */ jsxRuntime.jsx(
1143
- core.Flex,
1144
- {
1145
- justify: "center",
1146
- align: "center",
1147
- direction: "column",
1148
- children: /* @__PURE__ */ jsxRuntime.jsx(
1149
- core.Text,
1150
- {
1151
- size: "6vh",
1152
- c: core.alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.9),
1153
- style: {
1154
- fontFamily: "Akrobat Black",
1155
- textShadow: `0 0 10px ${core.alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.7)}`
1156
- },
1157
- children: props.level
1158
- }
1159
- )
1160
- }
1161
- )
1162
- }
1163
- ),
1164
- /* @__PURE__ */ jsxRuntime.jsx(
1165
- core.Text,
1166
- {
1167
- size: "sm",
1168
- style: {
1169
- fontFamily: "Akrobat Black",
1170
- letterSpacing: "0.05em",
1171
- textTransform: "uppercase"
1172
- },
1173
- children: props.text || locale("Level")
1174
- }
1175
- ),
1176
- /* @__PURE__ */ jsxRuntime.jsxs(
1177
- core.Text,
1178
- {
1179
- size: "xs",
1180
- c: "rgba(255,255,255,0.6)",
1181
- children: [
1182
- props.exp,
1183
- "/",
1184
- props.nextLevelXP,
1185
- " ",
1186
- locale("EXP")
1187
- ]
1188
- }
1189
- )
1190
- ]
1191
- }
1192
- );
1193
- }
1194
- var ModalContext = react.createContext(null);
1195
- function useModal(selector) {
1196
- const modal = react.useContext(ModalContext);
1197
- if (!modal) {
1198
- throw new Error("useModal must be used within a ModalProvider");
1199
- }
1200
- return zustand.useStore(modal, selector);
1201
- }
1202
- function ModalProvider({ children, defaultPage }) {
1203
- const storeRef = react.useRef(
1204
- zustand.create(() => ({
1205
- active: null
1206
- }))
1207
- );
1208
- return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: storeRef.current, children: [
1209
- /* @__PURE__ */ jsxRuntime.jsx(Modal, {}),
1210
- children
1211
- ] });
1212
- }
1213
- function useModalActions() {
1214
- const modal = react.useContext(ModalContext);
1215
- if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
1216
- const showModal = (openModal) => {
1217
- modal.setState({ active: openModal });
1218
- };
1219
- const hideModal = () => {
1220
- modal.setState({ active: null });
1221
- };
1222
- return { showModal, hideModal };
1223
- }
1224
- function Modal() {
1225
- const active = useModal((state) => state.active);
1226
- const { hideModal } = useModalActions();
1227
- const ref = hooks.useClickOutside(() => {
1228
- if (!active) return;
1229
- if (active.clickOutside == false) return;
1230
- if (active) {
1231
- hideModal();
1232
- }
1233
- });
1234
- const theme = core.useMantineTheme();
1235
- return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && /* @__PURE__ */ jsxRuntime.jsx(
1236
- MotionFlex,
1237
- {
1238
- h: "100%",
1239
- w: "100%",
1240
- bg: "rgba(0, 0, 0, 0.3)",
1241
- pos: "absolute",
1242
- style: {
1243
- zIndex: 2e3,
1244
- filter: "drop-shadow(0 0 2vh black)"
1245
- },
1246
- initial: { opacity: 0 },
1247
- animate: { opacity: 1 },
1248
- exit: { opacity: 0 },
1249
- align: "center",
1250
- justify: "center",
1251
- children: /* @__PURE__ */ jsxRuntime.jsxs(
1252
- MotionFlex,
1253
- {
1254
- pos: "absolute",
1255
- top: "50%",
1256
- left: "50%",
1257
- ref,
1258
- w: active.width || "40%",
1259
- style: {
1260
- transform: "translate(-50%, -50%)",
1261
- borderRadius: theme.radius.xs,
1262
- boxShadow: theme.shadows.xl,
1263
- zIndex: 2100
1264
- },
1265
- bg: "rgba(48, 48, 48, 0.84)",
1266
- initial: { scale: 0.8, opacity: 0, transform: "translate(-50%, -50%)" },
1267
- animate: { scale: 1, opacity: 1, transform: "translate(-50%, -50%)" },
1268
- exit: { scale: 0.8, opacity: 0, transform: "translate(-50%, -50%)" },
1269
- p: "sm",
1270
- direction: "column",
1271
- maw: "70%",
1272
- gap: "xs",
1273
- children: [
1274
- /* @__PURE__ */ jsxRuntime.jsxs(
1275
- core.Flex,
1276
- {
1277
- direction: "column",
1278
- w: "100%",
1279
- children: [
1280
- /* @__PURE__ */ jsxRuntime.jsxs(
1281
- core.Flex,
1282
- {
1283
- w: "100%",
1284
- align: "center",
1285
- gap: "xs",
1286
- children: [
1287
- active.icon && /* @__PURE__ */ jsxRuntime.jsx(
1288
- reactFontawesome.FontAwesomeIcon,
1289
- {
1290
- icon: active.icon,
1291
- style: {
1292
- fontSize: theme.fontSizes.xs
1293
- }
1294
- }
1295
- ),
1296
- /* @__PURE__ */ jsxRuntime.jsx(
1297
- core.Text,
1298
- {
1299
- size: "sm",
1300
- children: active.title
1301
- }
1302
- ),
1303
- /* @__PURE__ */ jsxRuntime.jsx(
1304
- MotionIcon,
1305
- {
1306
- icon: "times",
1307
- color: "rgba(255, 255, 255, 0.7)",
1308
- whileHover: {
1309
- scale: 1.1,
1310
- filter: "brightness(1.2)"
1311
- },
1312
- style: {
1313
- marginLeft: "auto",
1314
- cursor: "pointer",
1315
- fontSize: theme.fontSizes.sm
1316
- },
1317
- onClick: () => {
1318
- hideModal();
1319
- }
1320
- }
1321
- )
1322
- ]
1323
- }
1324
- ),
1325
- active.description && /* @__PURE__ */ jsxRuntime.jsx(
1326
- core.Text,
1327
- {
1328
- size: "xs",
1329
- c: "rgba(255, 255, 255, 0.7)",
1330
- children: active.description
1331
- }
1332
- )
1333
- ]
1334
- }
1335
- ),
1336
- active.children
1337
- ]
1338
- }
1339
- )
1340
- }
1341
- ) });
1342
- }
1343
- function PromptModal(props) {
1344
- const theme = core.useMantineTheme();
1345
- return /* @__PURE__ */ jsxRuntime.jsxs(
1346
- MotionFlex,
1347
- {
1348
- gap: "sm",
1349
- direction: "column",
1350
- flex: 1,
1351
- children: [
1352
- /* @__PURE__ */ jsxRuntime.jsx(
1353
- core.Text,
1354
- {
1355
- size: "xs",
1356
- c: "rgba(255, 255, 255, 0.8)",
1357
- children: props.message
1358
- }
1359
- ),
1360
- /* @__PURE__ */ jsxRuntime.jsx(
1361
- core.Flex,
1362
- {
1363
- gap: "sm",
1364
- children: props.buttons.map((button, index) => /* @__PURE__ */ jsxRuntime.jsx(
1365
- core.Button,
1366
- {
1367
- variant: button.variant,
1368
- color: button.color,
1369
- flex: 0.5,
1370
- onClick: button.onClick,
1371
- leftSection: button.icon ? /* @__PURE__ */ jsxRuntime.jsx(
1372
- reactFontawesome.FontAwesomeIcon,
1373
- {
1374
- icon: button.icon,
1375
- style: {
1376
- fontSize: theme.fontSizes.xs
1377
- }
1378
- }
1379
- ) : void 0,
1380
- children: button.text
1381
- },
1382
- index
1383
- ))
1384
- }
1385
- )
1386
- ]
1387
- }
1388
- );
1389
- }
1390
-
1391
- exports.BorderedIcon = BorderedIcon;
1392
- exports.Counter = Counter;
1393
- exports.FloatingParticles = FloatingParticles;
1394
- exports.InfoBox = InfoBox;
1395
- exports.InputContainer = InputContainer;
1396
- exports.LevelBanner = LevelBanner;
1397
- exports.LevelPanel = LevelPanel;
1398
- exports.ModalContext = ModalContext;
1399
- exports.ModalProvider = ModalProvider;
1400
- exports.MotionFlex = MotionFlex;
1401
- exports.MotionIcon = MotionIcon;
1402
- exports.MotionImage = MotionImage;
1403
- exports.MotionText = MotionText;
1404
- exports.NavBar = NavBar;
1405
- exports.NavigationContext = NavigationContext;
1406
- exports.NavigationProvider = NavigationProvider;
1407
- exports.PromptModal = PromptModal;
1408
- exports.SegmentedControl = SegmentedControl;
1409
- exports.SegmentedProgress = SegmentedProgress;
1410
- exports.Title = Title;
1411
- exports.useModal = useModal;
1412
- exports.useModalActions = useModalActions;
1413
- exports.useNavigation = useNavigation;
1414
- exports.useNavigationStore = useNavigationStore;
1415
- //# sourceMappingURL=index.cjs.map
1416
- //# sourceMappingURL=index.cjs.map