dirk-cfx-react 1.1.2 → 1.1.6

package/dist/components/index.js

@@ -0,0 +1,1383 @@
+import { createContext, useRef, useState, useEffect, useContext } from 'react';
+import { create, useStore } from 'zustand';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Flex, Text, Image, useMantineTheme, alpha, Progress, RingProgress, Button } from '@mantine/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
+import clickSoundUrl from '../click_sound-PNCRRTM4.mp3';
+import hoverSoundUrl from '../hover_sound-NBUA222C.mp3';
+import { useClickOutside } from '@mantine/hooks';
+
+// src/utils/colorWithAlpha.ts
+var colorNames = {
+  AliceBlue: { r: 240, g: 248, b: 255 },
+  AntiqueWhite: { r: 250, g: 235, b: 215 },
+  Aqua: { r: 0, g: 255, b: 255 },
+  Aquamarine: { r: 127, g: 255, b: 212 },
+  Azure: { r: 240, g: 255, b: 255 },
+  Beige: { r: 245, g: 245, b: 220 },
+  Bisque: { r: 255, g: 228, b: 196 },
+  Black: { r: 0, g: 0, b: 0 },
+  BlanchedAlmond: { r: 255, g: 235, b: 205 },
+  Blue: { r: 0, g: 0, b: 255 },
+  BlueViolet: { r: 138, g: 43, b: 226 },
+  Brown: { r: 165, g: 42, b: 42 },
+  BurlyWood: { r: 222, g: 184, b: 135 },
+  CadetBlue: { r: 95, g: 158, b: 160 },
+  Chartreuse: { r: 127, g: 255, b: 0 },
+  Chocolate: { r: 210, g: 105, b: 30 },
+  Coral: { r: 255, g: 127, b: 80 },
+  CornflowerBlue: { r: 100, g: 149, b: 237 },
+  Cornsilk: { r: 255, g: 248, b: 220 },
+  Crimson: { r: 220, g: 20, b: 60 },
+  Cyan: { r: 0, g: 255, b: 255 },
+  DarkBlue: { r: 0, g: 0, b: 139 },
+  DarkCyan: { r: 0, g: 139, b: 139 },
+  DarkGoldenRod: { r: 184, g: 134, b: 11 },
+  DarkGray: { r: 169, g: 169, b: 169 },
+  DarkGreen: { r: 0, g: 100, b: 0 },
+  DarkKhaki: { r: 189, g: 183, b: 107 },
+  DarkMagenta: { r: 139, g: 0, b: 139 },
+  DarkOliveGreen: { r: 85, g: 107, b: 47 },
+  DarkOrange: { r: 255, g: 140, b: 0 },
+  DarkOrchid: { r: 153, g: 50, b: 204 },
+  DarkRed: { r: 139, g: 0, b: 0 },
+  DarkSalmon: { r: 233, g: 150, b: 122 },
+  DarkSeaGreen: { r: 143, g: 188, b: 143 },
+  DarkSlateBlue: { r: 72, g: 61, b: 139 },
+  DarkSlateGray: { r: 47, g: 79, b: 79 },
+  DarkTurquoise: { r: 0, g: 206, b: 209 },
+  DarkViolet: { r: 148, g: 0, b: 211 },
+  DeepPink: { r: 255, g: 20, b: 147 },
+  DeepSkyBlue: { r: 0, g: 191, b: 255 },
+  DimGray: { r: 105, g: 105, b: 105 },
+  DodgerBlue: { r: 30, g: 144, b: 255 },
+  FireBrick: { r: 178, g: 34, b: 34 },
+  FloralWhite: { r: 255, g: 250, b: 240 },
+  ForestGreen: { r: 34, g: 139, b: 34 },
+  Fuchsia: { r: 255, g: 0, b: 255 },
+  Gainsboro: { r: 220, g: 220, b: 220 },
+  GhostWhite: { r: 248, g: 248, b: 255 },
+  Gold: { r: 255, g: 215, b: 0 },
+  GoldenRod: { r: 218, g: 165, b: 32 },
+  Gray: { r: 128, g: 128, b: 128 },
+  Green: { r: 0, g: 128, b: 0 },
+  GreenYellow: { r: 173, g: 255, b: 47 },
+  HoneyDew: { r: 240, g: 255, b: 240 },
+  HotPink: { r: 255, g: 105, b: 180 },
+  IndianRed: { r: 205, g: 92, b: 92 },
+  Indigo: { r: 75, g: 0, b: 130 },
+  Ivory: { r: 255, g: 255, b: 240 },
+  Khaki: { r: 240, g: 230, b: 140 },
+  Lavender: { r: 230, g: 230, b: 250 },
+  LavenderBlush: { r: 255, g: 240, b: 245 },
+  LawnGreen: { r: 124, g: 252, b: 0 },
+  LemonChiffon: { r: 255, g: 250, b: 205 },
+  LightBlue: { r: 173, g: 216, b: 230 },
+  LightCoral: { r: 240, g: 128, b: 128 },
+  LightCyan: { r: 224, g: 255, b: 255 },
+  LightGoldenRodYellow: { r: 250, g: 250, b: 210 },
+  LightGray: { r: 211, g: 211, b: 211 },
+  LightGreen: { r: 144, g: 238, b: 144 },
+  LightPink: { r: 255, g: 182, b: 193 },
+  LightSalmon: { r: 255, g: 160, b: 122 },
+  LightSeaGreen: { r: 32, g: 178, b: 170 },
+  LightSkyBlue: { r: 135, g: 206, b: 250 },
+  LightSlateGray: { r: 119, g: 136, b: 153 },
+  LightSteelBlue: { r: 176, g: 196, b: 222 },
+  LightYellow: { r: 255, g: 255, b: 224 },
+  Lime: { r: 0, g: 255, b: 0 },
+  LimeGreen: { r: 50, g: 205, b: 50 },
+  Linen: { r: 250, g: 240, b: 230 },
+  Magenta: { r: 255, g: 0, b: 255 },
+  Maroon: { r: 128, g: 0, b: 0 },
+  // Maroon
+  MediumAquaMarine: { r: 102, g: 205, b: 170 },
+  MediumBlue: { r: 0, g: 0, b: 205 },
+  MediumOrchid: { r: 186, g: 85, b: 211 },
+  MediumPurple: { r: 147, g: 112, b: 219 },
+  MediumSeaGreen: { r: 60, g: 179, b: 113 },
+  MediumSlateBlue: { r: 123, g: 104, b: 238 },
+  MediumSpringGreen: { r: 0, g: 250, b: 154 },
+  MediumTurquoise: { r: 72, g: 209, b: 204 },
+  MediumVioletRed: { r: 199, g: 21, b: 133 },
+  MidnightBlue: { r: 25, g: 25, b: 112 },
+  MintCream: { r: 245, g: 255, b: 250 },
+  MistyRose: { r: 255, g: 228, b: 225 },
+  Moccasin: { r: 255, g: 228, b: 181 },
+  NavajoWhite: { r: 255, g: 222, b: 173 },
+  Navy: { r: 0, g: 0, b: 128 },
+  OldLace: { r: 253, g: 245, b: 230 },
+  Olive: { r: 128, g: 128, b: 0 },
+  OliveDrab: { r: 107, g: 142, b: 35 },
+  Orange: { r: 255, g: 165, b: 0 },
+  OrangeRed: { r: 255, g: 69, b: 0 },
+  Orchid: { r: 218, g: 112, b: 214 },
+  PaleGoldenRod: { r: 238, g: 232, b: 170 },
+  PaleGreen: { r: 152, g: 251, b: 152 },
+  PaleTurquoise: { r: 175, g: 238, b: 238 },
+  PaleVioletRed: { r: 219, g: 112, b: 147 },
+  PapayaWhip: { r: 255, g: 239, b: 213 },
+  PeachPuff: { r: 255, g: 218, b: 185 },
+  Peru: { r: 205, g: 133, b: 63 },
+  Pink: { r: 255, g: 192, b: 203 },
+  Plum: { r: 221, g: 160, b: 221 },
+  PowderBlue: { r: 176, g: 224, b: 230 },
+  Purple: { r: 128, g: 0, b: 128 },
+  RebeccaPurple: { r: 102, g: 51, b: 153 },
+  Red: { r: 255, g: 0, b: 0 },
+  RosyBrown: { r: 188, g: 143, b: 143 },
+  RoyalBlue: { r: 65, g: 105, b: 225 },
+  SaddleBrown: { r: 139, g: 69, b: 19 },
+  Salmon: { r: 250, g: 128, b: 114 },
+  SandyBrown: { r: 244, g: 164, b: 96 },
+  SeaGreen: { r: 46, g: 139, b: 87 },
+  SeaShell: { r: 255, g: 245, b: 238 },
+  Sienna: { r: 160, g: 82, b: 45 },
+  Silver: { r: 192, g: 192, b: 192 },
+  SkyBlue: { r: 135, g: 206, b: 235 },
+  SlateBlue: { r: 106, g: 90, b: 205 },
+  SlateGray: { r: 112, g: 128, b: 144 },
+  Snow: { r: 255, g: 250, b: 250 },
+  SpringGreen: { r: 0, g: 255, b: 127 },
+  SteelBlue: { r: 70, g: 130, b: 180 },
+  Tan: { r: 210, g: 180, b: 140 },
+  Teal: { r: 0, g: 128, b: 128 },
+  Thistle: { r: 216, g: 191, b: 216 },
+  Tomato: { r: 255, g: 99, b: 71 },
+  Turquoise: { r: 64, g: 224, b: 208 },
+  Violet: { r: 238, g: 130, b: 238 },
+  Wheat: { r: 245, g: 222, b: 179 },
+  White: { r: 255, g: 255, b: 255 },
+  WhiteSmoke: { r: 245, g: 245, b: 245 },
+  Yellow: { r: 255, g: 255, b: 0 },
+  YellowGreen: { r: 154, g: 205, b: 50 }
+};
+function colorWithAlpha(color, alpha4) {
+  const lowerCasedColor = color.toLowerCase();
+  if (colorNames[lowerCasedColor]) {
+    const rgb = colorNames[lowerCasedColor];
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha4})`;
+  }
+  if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
+    const hex = color.slice(1);
+    const bigint = parseInt(hex, 16);
+    const r = bigint >> 16 & 255;
+    const g = bigint >> 8 & 255;
+    const b = bigint & 255;
+    return `rgba(${r}, ${g}, ${b}, ${alpha4})`;
+  }
+  if (/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(color)) {
+    const result = color.match(/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/);
+    if (result) {
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha4})`;
+    }
+  }
+  return color;
+}
+
+// src/utils/misc.ts
+var isEnvBrowser = () => !window.invokeNative;
+
+// src/utils/fetchNui.ts
+async function fetchNui(eventName, data, mockData) {
+  const options = {
+    method: "post",
+    headers: {
+      "Content-Type": "application/json; charset=UTF-8"
+    },
+    body: JSON.stringify(data)
+  };
+  if (isEnvBrowser() && mockData === void 0) {
+    console.warn(
+      `[fetchNui] Called fetchNui for event "${eventName}" in browser environment without mockData. Returning empty object.`
+    );
+    return {};
+  }
+  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app";
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+  return await resp.json();
+}
+async function registerInitialFetch(eventName, data, mockData) {
+  const fetcher = () => fetchNui(eventName, data, mockData);
+  return fetcher();
+}
+var localeStore = create((set, get) => {
+  return {
+    locales: {
+      "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."
+    },
+    locale: (key, ...args) => {
+      const exists = get().locales[key];
+      let translation = exists || key;
+      if (args.length) {
+        translation = translation.replace(/%s/g, () => String(args.shift() || ""));
+      }
+      return translation;
+    }
+  };
+});
+var locale = localeStore.getState().locale;
+registerInitialFetch("GET_LOCALES", void 0).then((data) => {
+  localeStore.setState({ locales: data });
+});
+var useSettings = create(() => ({
+  hydrated: false,
+  game: "fivem",
+  primaryColor: "dirk",
+  primaryShade: 9,
+  itemImgPath: "",
+  customTheme: [
+    "#f0f4ff",
+    "#d9e3ff",
+    "#bfcfff",
+    "#a6bbff",
+    "#8ca7ff",
+    "#7393ff",
+    "#5a7fff",
+    "#406bff",
+    "#2547ff",
+    "#0b33ff"
+  ]
+}));
+registerInitialFetch("GET_SETTINGS").then((data) => {
+  useSettings.setState({
+    ...data,
+    hydrated: true
+  });
+}).catch(() => {
+  useSettings.setState({ hydrated: true });
+});
+function BorderedIcon(props) {
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsx(
+    FontAwesomeIcon,
+    {
+      icon: props.icon,
+      color: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][theme.primaryShade], props.hovered ? 0.9 : 0.9),
+      style: {
+        // backgroundColor: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7 as number], (props.hoverable ? (props.hovered ? 0.3 : 0.2) : 0.2)),
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        padding: props.p || theme.spacing.xs,
+        transition: "all 0.2s ease-in-out",
+        aspectRatio: "1/1",
+        fontSize: props.fontSize ? props.fontSize : "2.5vh",
+        borderRadius: theme.radius.xs,
+        // border: `2px solid var(--mantine-primary-color-9)`,
+        outline: `0.2vh solid ${colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][9], 0.8)}`,
+        boxShadow: `inset 0 0 2vh ${colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7], 0.5)}`
+      }
+    }
+  );
+}
+var MotionFlex = motion.create(Flex);
+var MotionText = motion.create(Text);
+var MotionImage = motion.create(Image);
+var MotionIcon = motion.create(FontAwesomeIcon);
+function Counter(props) {
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: props.count > 0 && /* @__PURE__ */ jsx(
+    MotionFlex,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      fz: "1.25vh",
+      h: "1.75vh",
+      justify: "center",
+      align: "center",
+      bg: props.color || "rgba(0, 0, 0, 0.51)",
+      style: {
+        borderRadius: "50%",
+        aspectRatio: "1/1",
+        marginBottom: "0.3vh",
+        fontFamily: "Akrobat Bold",
+        boxShadow: "0 0 5px rgba(0, 0, 0, 0.3)",
+        ...props.style
+      },
+      children: props.count
+    },
+    "counter"
+  ) });
+}
+var FloatingParticles = ({
+  icons = [],
+  particleCount = 55,
+  color = "#00a552ff",
+  size = 32,
+  speed = "slow",
+  opacity = 0.3,
+  style = {},
+  mouseRepelDistance = 150,
+  mouseRepelStrength = 50,
+  backgroundColor = "transparent"
+}) => {
+  const containerRef = useRef(null);
+  const [particles, setParticles] = useState([]);
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  const durationMap = {
+    slow: { base: 10, variance: 10 },
+    medium: { base: 2, variance: 2 },
+    fast: { base: 4, variance: 2 }
+  };
+  const duration = durationMap[speed];
+  const seededRandom = (seed) => {
+    const x = Math.sin(seed) * 1e4;
+    return x - Math.floor(x);
+  };
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const bounds = containerRef.current.getBoundingClientRect();
+    const newParticles = [...Array(particleCount)].map((_, i) => {
+      const seedX = i * 123.456;
+      const seedY = i * 789.012;
+      const seedDuration = i * 345.678;
+      const baseX = seededRandom(seedX) * bounds.width;
+      const baseY = seededRandom(seedY) * bounds.height;
+      return {
+        id: i,
+        baseX,
+        baseY,
+        currentX: baseX,
+        currentY: baseY,
+        icon: icons.length > 0 ? icons[i % icons.length] : null,
+        animationDuration: duration.base + seededRandom(seedDuration) * duration.variance
+      };
+    });
+    setParticles(newParticles);
+  }, [particleCount, icons.length, duration.base, duration.variance]);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const handleMouseMove = (e) => {
+      const bounds = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - bounds.left;
+      const y = e.clientY - bounds.top;
+      mouseX.set(x);
+      mouseY.set(y);
+      setParticles(
+        (prevParticles) => prevParticles.map((particle) => {
+          const dx = x - particle.baseX;
+          const dy = y - particle.baseY;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          if (distance < mouseRepelDistance && distance > 0) {
+            const force = (mouseRepelDistance - distance) / mouseRepelDistance;
+            const repelX = dx / distance * force * mouseRepelStrength * -1;
+            const repelY = dy / distance * force * mouseRepelStrength * -1;
+            return {
+              ...particle,
+              currentX: particle.baseX + repelX,
+              currentY: particle.baseY + repelY
+            };
+          } else {
+            return {
+              ...particle,
+              currentX: particle.baseX,
+              currentY: particle.baseY
+            };
+          }
+        })
+      );
+    };
+    const handleMouseLeave = () => {
+      setParticles(
+        (prevParticles) => prevParticles.map((particle) => ({
+          ...particle,
+          currentX: particle.baseX,
+          currentY: particle.baseY
+        }))
+      );
+    };
+    const container = containerRef.current;
+    container.addEventListener("mousemove", handleMouseMove);
+    container.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      container.removeEventListener("mousemove", handleMouseMove);
+      container.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
+  useEffect(() => {
+    const handleResize = () => {
+      if (!containerRef.current) return;
+      const bounds = containerRef.current.getBoundingClientRect();
+      setParticles(
+        (prevParticles) => prevParticles.map((particle, i) => {
+          const seedX = i * 123.456 + bounds.width;
+          const seedY = i * 789.012 + bounds.height;
+          const newBaseX = seededRandom(seedX) * bounds.width;
+          const newBaseY = seededRandom(seedY) * bounds.height;
+          return {
+            ...particle,
+            baseX: newBaseX,
+            baseY: newBaseY,
+            currentX: newBaseX,
+            currentY: newBaseY
+          };
+        })
+      );
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        position: "absolute",
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        zIndex: -1,
+        backgroundColor,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: particles.map((particle) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          style: {
+            position: "absolute",
+            width: size,
+            height: size,
+            color,
+            opacity,
+            left: 0,
+            top: 0
+          },
+          animate: {
+            x: particle.currentX,
+            y: particle.currentY,
+            scale: [0.8, 1.1, 0.8],
+            opacity: [opacity * 0.5, opacity, opacity * 0.5],
+            // random rotate between 0 and 360 so that not all particles rotate the same
+            rotate: particle.id % 2 === 0 ? [0, 360] : [360, 0]
+          },
+          transition: {
+            x: { type: "spring", stiffness: 150, damping: 20 },
+            y: { type: "spring", stiffness: 150, damping: 20 },
+            rotate: {
+              duration: particle.animationDuration,
+              repeat: Infinity,
+              ease: "linear"
+            },
+            scale: {
+              duration: particle.animationDuration,
+              repeat: Infinity,
+              delay: seededRandom(particle.id * 111.222) * 5,
+              ease: "easeInOut"
+            },
+            opacity: {
+              duration: particle.animationDuration,
+              repeat: Infinity,
+              delay: seededRandom(particle.id * 333.444) * 5,
+              ease: "easeInOut"
+            }
+          },
+          children: particle.icon ? /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: particle.icon, style: { width: "70%", height: "70%" } }) }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "100%",
+                borderRadius: "50%",
+                backgroundColor: color
+              }
+            }
+          )
+        },
+        particle.id
+      )) })
+    }
+  );
+};
+function InfoBox(props) {
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      w: "fit-content",
+      h: "fit-content",
+      style: {
+        borderRadius: theme.radius.xs,
+        overflow: "hidden",
+        border: `0.2vh solid rgba(77,77,77,0.3)`
+      },
+      align: "center",
+      children: [
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            miw: "4vh",
+            p: "xxs",
+            bg: "rgba(77,77,77,0.2)",
+            direction: "column",
+            justify: "center",
+            align: "center",
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                c: "lightgrey",
+                size: "xxs",
+                style: {
+                  fontFamily: "Akrobat Bold",
+                  letterSpacing: "0.05em",
+                  textTransform: "uppercase"
+                },
+                children: props.leftSide
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            p: "xxs",
+            flex: 1,
+            miw: "4vh",
+            bg: "rgba(77,77,77,0.5)",
+            direction: "column",
+            align: "center",
+            justify: "center",
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                c: "lightgrey",
+                size: "xxs",
+                style: {
+                  fontFamily: "Akrobat Bold",
+                  letterSpacing: "0.05em",
+                  textTransform: "uppercase"
+                },
+                children: props.rightSide
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function InputContainer(props) {
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
+    MotionFlex,
+    {
+      w: props.w || "100%",
+      flex: props.flex,
+      direction: "column",
+      h: props.h,
+      gap: props.title ? "xs" : 0,
+      bg: props.bg || alpha("var(--mantine-color-dark-9)", 0.65),
+      p: props.p || "sm",
+      style: {
+        borderRadius: theme.radius.xs,
+        boxShadow: theme.shadows.sm,
+        overflow: "hidden",
+        border: props.error ? `1px solid rgba(255, 100, 100, 0.8)` : "1px solid var(--mantine-color-dark-7)",
+        ...props.style
+      },
+      variants: props.variants,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            gap: "xs",
+            children: [
+              (props.title || props.description) && /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  direction: "column",
+                  gap: "xxs",
+                  p: props.p == "0" ? "sm" : 0,
+                  children: [
+                    props.title && /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "sm",
+                        style: {
+                          lineHeight: "1.25vh",
+                          fontFamily: "Akrobat Bold",
+                          letterSpacing: "0.05em",
+                          textTransform: "uppercase"
+                        },
+                        children: props.title
+                      }
+                    ),
+                    props.description && /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "xs",
+                        c: "rgba(255, 255, 255, 0.8)",
+                        fw: 400,
+                        children: props.description
+                      }
+                    )
+                  ]
+                }
+              ),
+              props.error && /* @__PURE__ */ jsx(
+                Text,
+                {
+                  size: "xs",
+                  c: theme.colors.red[9],
+                  fw: 600,
+                  mb: "auto",
+                  lh: "0.8",
+                  children: props.error
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Flex,
+                {
+                  ml: "auto",
+                  children: props.rightSection
+                }
+              )
+            ]
+          }
+        ),
+        props.children
+      ]
+    }
+  );
+}
+var useAudio = create(() => {
+  const audioRefs = {};
+  const sounds = {
+    click: clickSoundUrl,
+    hover: hoverSoundUrl
+  };
+  for (const [key, src] of Object.entries(sounds)) {
+    audioRefs[key] = new Audio(src);
+  }
+  return {
+    play: (sound) => {
+      const audio = audioRefs[sound];
+      if (!audio) return console.warn(`Sound '${sound}' not found.`);
+      audio.currentTime = 0;
+      audio.volume = 0.1;
+      audio.play();
+    },
+    stop: (sound) => {
+      const audio = audioRefs[sound];
+      if (!audio) return console.warn(`Sound '${sound}' not found.`);
+      audio.pause();
+      audio.currentTime = 0;
+    }
+  };
+});
+function SegmentedControl(props) {
+  const theme = useMantineTheme();
+  const play = useAudio((state) => state.play);
+  const handleChange = (newValue) => {
+    if (props.sounds) play("click");
+    if (props.onChange) {
+      props.onChange(newValue);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      bg: "rgba(33, 33, 33, 0.6)",
+      w: props.w || "fit-content",
+      style: {
+        borderRadius: props.roundEdges !== false ? theme.radius.xs : 0,
+        overflow: "hidden"
+      },
+      ...props,
+      children: props.items.map((item, index) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: { x: -100, opacity: 0 },
+          animate: { x: 0, opacity: 1 },
+          transition: { duration: 0.3, delay: index * 0.1, ease: "easeInOut" },
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            flex: 1
+          },
+          children: /* @__PURE__ */ jsx(
+            Segment,
+            {
+              label: item.label,
+              value: item.value,
+              icon: item.icon,
+              rightSection: item.rightSection,
+              fz: props.fz,
+              color: props.color,
+              selected: !props.multi ? props.value === item.value : Array.isArray(props.value) && props.value.includes(item.value),
+              onClick: () => {
+                if (props.multi) {
+                  const newValue = Array.isArray(props.value) ? props.value.includes(item.value) ? props.value.filter((v) => v !== item.value) : [...props.value, item.value] : [item.value];
+                  handleChange(newValue);
+                } else {
+                  handleChange(item.value);
+                }
+              }
+            },
+            item.value
+          )
+        },
+        index
+      ))
+    }
+  );
+}
+function Segment(props) {
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
+    MotionFlex,
+    {
+      onClick: props.onClick,
+      w: "100%",
+      direction: "column",
+      align: "center",
+      h: "100%",
+      bg: props.selected ? props.color ? alpha(props.color, 0.2) : colorWithAlpha(theme.colors[theme.primaryColor][theme.primaryShade], 0.2) : "transparent",
+      pos: "relative",
+      style: {
+        // position: "relative",
+        cursor: "pointer"
+      },
+      justify: "center",
+      whileHover: { scale: 1.05 },
+      whileTap: { scale: 0.95 },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            align: "center",
+            gap: "xs",
+            p: "xs",
+            children: [
+              props.icon && /* @__PURE__ */ jsx(
+                MotionIcon,
+                {
+                  icon: props.icon,
+                  initial: {
+                    color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "inherit"
+                  },
+                  animate: {
+                    color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "inherit"
+                  },
+                  exit: {
+                    color: "inherit"
+                  },
+                  style: {
+                    fontSize: theme.fontSizes.xs,
+                    marginBottom: "0.2vh"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MotionText,
+                {
+                  size: props.fz || "xs",
+                  initial: {
+                    color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "rgba(255, 255, 255, 0.7)"
+                  },
+                  animate: {
+                    color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "rgba(255, 255, 255, 0.7)"
+                  },
+                  exit: {
+                    color: "rgba(255, 255, 255, 0.7)"
+                  },
+                  style: {
+                    fontFamily: "Akrobat Bold",
+                    letterSpacing: "0.1em",
+                    textTransform: "uppercase"
+                  },
+                  children: props.label.toUpperCase()
+                }
+              ),
+              props.rightSection
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: false,
+            animate: {
+              scaleX: props.selected ? 1 : 0,
+              opacity: props.selected ? 1 : 0
+            },
+            transition: {
+              duration: 0.3,
+              ease: [0.4, 0, 0.2, 1]
+              // Custom easing curve for smooth feel
+            },
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: "0.2vh",
+              backgroundColor: props.color || theme.colors[theme.primaryColor][5],
+              transformOrigin: "center"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var NavigationContext = createContext(null);
+function useNavigation(selector) {
+  const navigation = useContext(NavigationContext);
+  if (!navigation) {
+    throw new Error("useNavigation must be used within a NavigationProvider");
+  }
+  return useStore(navigation, selector);
+}
+function useNavigationStore() {
+  const navigation = useContext(NavigationContext);
+  if (!navigation) {
+    throw new Error("useNavigationStore must be used within a NavigationProvider");
+  }
+  return navigation;
+}
+function NavigationProvider({ children, defaultPage }) {
+  const storeRef = useRef(
+    create(() => ({
+      pageId: defaultPage || "home"
+    }))
+  );
+  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: storeRef.current, children });
+}
+function NavBar(props) {
+  const pageId = useNavigation((state) => state.pageId);
+  const store = useNavigationStore();
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      sounds: true,
+      w: "100%",
+      value: pageId,
+      items: props.items,
+      onChange: (value) => {
+        store.setState({ pageId: value });
+      }
+    }
+  );
+}
+var containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.05
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      staggerChildren: 0.05,
+      staggerDirection: -1
+    }
+  }
+};
+var itemVariants = {
+  hidden: {
+    opacity: 0,
+    x: 20,
+    scale: 0.95
+  },
+  visible: {
+    opacity: 1,
+    x: 0,
+    scale: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 24
+    }
+  },
+  exit: {
+    opacity: 0,
+    x: -10,
+    scale: 0.95,
+    transition: {
+      duration: 0.2
+    }
+  }
+};
+function SegmentedProgress(props) {
+  const progressPerSegment = 100 / props.segments;
+  const filledSegments = Math.floor(props.progress / progressPerSegment);
+  const partialFill = props.progress % progressPerSegment / progressPerSegment;
+  return /* @__PURE__ */ jsx(
+    MotionFlex,
+    {
+      w: "100%",
+      h: props.size || "1vh",
+      gap: "xs",
+      initial: "hidden",
+      animate: "visible",
+      variants: containerVariants,
+      children: [...Array(props.segments)].map((_, index) => {
+        const isFilled = index < filledSegments;
+        const isPartial = index === filledSegments;
+        return /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: itemVariants,
+            style: {
+              width: `${100 / props.segments}%`,
+              // Ensures equal width distribution
+              height: "100%",
+              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)",
+              transition: "background 0.3s ease"
+            }
+          },
+          index
+        );
+      })
+    }
+  );
+}
+function Title(props) {
+  const game = useSettings((state) => state.game);
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      direction: "column",
+      bg: props.bg || "transparent",
+      gap: "xs",
+      w: props.w || "100%",
+      p: props.p || "0",
+      style: {
+        userSelect: "none",
+        borderBottom: props.removeBorder ? "none" : `0.2vh solid ${props.borderColor || colorWithAlpha(theme.colors[theme.primaryColor][9], 0.5)}`
+      },
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          justify: "center",
+          children: [
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                align: "center",
+                gap: "sm",
+                pr: "xs",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    BorderedIcon,
+                    {
+                      icon: props.icon,
+                      fontSize: theme.fontSizes.md,
+                      color: props.iconColor
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      direction: "column",
+                      gap: "0.25vh",
+                      children: [
+                        /* @__PURE__ */ jsx(Text, { p: "0", size: "sm", style: {
+                          lineHeight: theme.fontSizes.md,
+                          fontFamily: game == "fivem" ? "Akrobat Bold" : "Red Dead",
+                          letterSpacing: "0.05em",
+                          textTransform: "uppercase"
+                        }, children: props.title }),
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            size: "xs",
+                            c: "grey",
+                            style: { whiteSpace: "normal", wordWrap: "break-word" },
+                            children: props.description
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Flex,
+              {
+                ml: "auto",
+                align: "center",
+                gap: "xs",
+                children: props.rightSection
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function LevelBanner(props) {
+  return /* @__PURE__ */ jsxs(
+    MotionFlex,
+    {
+      w: "35vh",
+      pos: "absolute",
+      left: "50%",
+      align: "center",
+      gap: "xs",
+      style: {
+        borderRadius: useMantineTheme().radius.xxs
+      },
+      initial: { opacity: 0, y: -10, transform: "translateX(-50%)" },
+      animate: { opacity: 1, y: 0, transform: "translateX(-50%)" },
+      exit: { opacity: 0, y: -10, transform: "translateX(-50%)" },
+      transition: { duration: 0.3 },
+      direction: "column",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            w: "100%",
+            justify: "space-between",
+            children: [
+              /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  size: "xxs",
+                  c: "rgba(255, 255, 255, 0.9)",
+                  style: {
+                    fontFamily: "Akrobat Bold",
+                    letterSpacing: "0.1em"
+                  },
+                  children: [
+                    "LVL ",
+                    props.level
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  size: "xxs",
+                  c: "rgba(255, 255, 255, 0.7)",
+                  style: {
+                    fontFamily: "Akrobat Bold",
+                    letterSpacing: "0.1em"
+                  },
+                  children: [
+                    props.exp,
+                    "/",
+                    props.nextLevelXP,
+                    " XP"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Text,
+                {
+                  size: "xxs",
+                  c: "rgba(255, 255, 255, 0.7)",
+                  style: {
+                    fontFamily: "Akrobat Bold",
+                    letterSpacing: "0.1em"
+                  },
+                  children: [
+                    "LVL ",
+                    props.level + 1
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Progress,
+          {
+            color: props.color,
+            w: "100%",
+            size: "sm",
+            value: props.progressToLevel
+          }
+        )
+      ]
+    }
+  );
+}
+function LevelPanel(props) {
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      w: "fit-content",
+      pr: "8vh",
+      pl: "8vh",
+      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%)",
+      style: {
+        borderRadius: theme.radius.xs,
+        boxShadow: theme.shadows.sm,
+        outline: "0.2vh solid rgba(255,255,255,0.1)"
+      },
+      justify: "center",
+      align: "center",
+      direction: "column",
+      p: "sm",
+      children: [
+        /* @__PURE__ */ jsx(
+          RingProgress,
+          {
+            size: 190,
+            roundCaps: true,
+            thickness: 10,
+            sections: [{ value: props.progressToLevel, color: alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.9) }],
+            label: /* @__PURE__ */ jsx(
+              Flex,
+              {
+                justify: "center",
+                align: "center",
+                direction: "column",
+                children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    size: "6vh",
+                    c: alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.9),
+                    style: {
+                      fontFamily: "Akrobat Black",
+                      textShadow: `0 0 10px ${alpha(props.color || theme.colors[theme.primaryColor][theme.primaryShade], 0.7)}`
+                    },
+                    children: props.level
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "sm",
+            style: {
+              fontFamily: "Akrobat Black",
+              letterSpacing: "0.05em",
+              textTransform: "uppercase"
+            },
+            children: props.text || locale("Level")
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            size: "xs",
+            c: "rgba(255,255,255,0.6)",
+            children: [
+              props.exp,
+              "/",
+              props.nextLevelXP,
+              " ",
+              locale("EXP")
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ModalContext = createContext(null);
+function useModal(selector) {
+  const modal = useContext(ModalContext);
+  if (!modal) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return useStore(modal, selector);
+}
+function ModalProvider({ children, defaultPage }) {
+  const storeRef = useRef(
+    create(() => ({
+      active: null
+    }))
+  );
+  return /* @__PURE__ */ jsxs(ModalContext.Provider, { value: storeRef.current, children: [
+    /* @__PURE__ */ jsx(Modal, {}),
+    children
+  ] });
+}
+function useModalActions() {
+  const modal = useContext(ModalContext);
+  if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
+  const showModal = (openModal) => {
+    modal.setState({ active: openModal });
+  };
+  const hideModal = () => {
+    modal.setState({ active: null });
+  };
+  return { showModal, hideModal };
+}
+function Modal() {
+  const active = useModal((state) => state.active);
+  const { hideModal } = useModalActions();
+  const ref = useClickOutside(() => {
+    if (!active) return;
+    if (active.clickOutside == false) return;
+    if (active) {
+      hideModal();
+    }
+  });
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: active && /* @__PURE__ */ jsx(
+    MotionFlex,
+    {
+      h: "100%",
+      w: "100%",
+      bg: "rgba(0, 0, 0, 0.3)",
+      pos: "absolute",
+      style: {
+        zIndex: 2e3,
+        filter: "drop-shadow(0 0 2vh black)"
+      },
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      align: "center",
+      justify: "center",
+      children: /* @__PURE__ */ jsxs(
+        MotionFlex,
+        {
+          pos: "absolute",
+          top: "50%",
+          left: "50%",
+          ref,
+          w: active.width || "40%",
+          style: {
+            transform: "translate(-50%, -50%)",
+            borderRadius: theme.radius.xs,
+            boxShadow: theme.shadows.xl,
+            zIndex: 2100
+          },
+          bg: "rgba(48, 48, 48, 0.84)",
+          initial: { scale: 0.8, opacity: 0, transform: "translate(-50%, -50%)" },
+          animate: { scale: 1, opacity: 1, transform: "translate(-50%, -50%)" },
+          exit: { scale: 0.8, opacity: 0, transform: "translate(-50%, -50%)" },
+          p: "sm",
+          direction: "column",
+          maw: "70%",
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                direction: "column",
+                w: "100%",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      w: "100%",
+                      align: "center",
+                      gap: "xs",
+                      children: [
+                        active.icon && /* @__PURE__ */ jsx(
+                          FontAwesomeIcon,
+                          {
+                            icon: active.icon,
+                            style: {
+                              fontSize: theme.fontSizes.xs
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            size: "sm",
+                            children: active.title
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          MotionIcon,
+                          {
+                            icon: "times",
+                            color: "rgba(255, 255, 255, 0.7)",
+                            whileHover: {
+                              scale: 1.1,
+                              filter: "brightness(1.2)"
+                            },
+                            style: {
+                              marginLeft: "auto",
+                              cursor: "pointer",
+                              fontSize: theme.fontSizes.sm
+                            },
+                            onClick: () => {
+                              hideModal();
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  active.description && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "xs",
+                      c: "rgba(255, 255, 255, 0.7)",
+                      children: active.description
+                    }
+                  )
+                ]
+              }
+            ),
+            active.children
+          ]
+        }
+      )
+    }
+  ) });
+}
+function PromptModal(props) {
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
+    MotionFlex,
+    {
+      gap: "sm",
+      direction: "column",
+      flex: 1,
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "xs",
+            c: "rgba(255, 255, 255, 0.8)",
+            children: props.message
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            gap: "sm",
+            children: props.buttons.map((button, index) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: button.variant,
+                color: button.color,
+                flex: 0.5,
+                onClick: button.onClick,
+                leftSection: button.icon ? /* @__PURE__ */ jsx(
+                  FontAwesomeIcon,
+                  {
+                    icon: button.icon,
+                    style: {
+                      fontSize: theme.fontSizes.xs
+                    }
+                  }
+                ) : void 0,
+                children: button.text
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { BorderedIcon, Counter, FloatingParticles, InfoBox, InputContainer, LevelBanner, LevelPanel, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PromptModal, SegmentedControl, SegmentedProgress, Title, useModal, useModalActions, useNavigation, useNavigationStore };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map