dirk-cfx-react 1.1.0 → 1.1.2

package/dist/components/index.js

@@ -1,1386 +0,0 @@
-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 '@mantine/core/styles.css';
-import '@mantine/notifications/styles.css';
-import './styles/notify.css';
-import './styles/fonts.css';
-import './styles/scrollBar.css';
-import './styles/tornEdge.css';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { fab } from '@fortawesome/free-brands-svg-icons';
-import { far } from '@fortawesome/free-regular-svg-icons';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-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) return mockData;
-  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 });
-});
-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
-        );
-      })
-    }
-  );
-}
-library.add(fas, far, fab);
-var useSettings = create((set) => ({
-  game: "fivem",
-  primaryColor: "dirk",
-  primaryShade: 9,
-  itemImgPath: "https://assets.dirkcfx.com/items/",
-  customTheme: {}
-}));
-registerInitialFetch("GET_SETTINGS", void 0, {
-  game: "fivem",
-  primaryColor: "dirk",
-  primaryShade: 9,
-  itemImgPath: "https://assets.dirkcfx.com/items/",
-  customTheme: {}
-}).then((data) => {
-  useSettings.setState({
-    ...data
-  });
-});
-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