dirk-cfx-react 1.0.5 → 1.0.6

package/dist/index.js

@@ -1,1214 +1,3 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Flex, Text, Image, createTheme, useMantineTheme, MantineProvider, BackgroundImage } from '@mantine/core';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-import { createContext, useRef, useState, useEffect, useContext } from 'react';
-import { create, useStore } from 'zustand';
-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/niceFont.css';
-import './styles/scrollBar.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';
 
-// src/components/BorderedIcon.tsx
-
-// 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, alpha) {
-  const lowerCasedColor = color.toLowerCase();
-  if (colorNames[lowerCasedColor]) {
-    const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
-  }
-  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}, ${alpha})`;
-  }
-  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]}, ${alpha})`;
-    }
-  }
-  return color;
-}
-function BorderedIcon(props) {
-  const theme2 = useMantineTheme();
-  return /* @__PURE__ */ jsx(
-    FontAwesomeIcon,
-    {
-      icon: props.icon,
-      color: colorWithAlpha(props.color ? props.color : theme2.colors[theme2.primaryColor][theme2.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 || theme2.spacing.xs,
-        transition: "all 0.2s ease-in-out",
-        aspectRatio: "1/1",
-        fontSize: props.fontSize ? props.fontSize : "2.5vh",
-        borderRadius: theme2.radius.xs,
-        // border: `2px solid var(--mantine-primary-color-9)`,
-        outline: `0.2vh solid ${colorWithAlpha(props.color ? props.color : theme2.colors[theme2.primaryColor][9], 0.8)}`,
-        boxShadow: `inset 0 0 2vh ${colorWithAlpha(props.color ? props.color : theme2.colors[theme2.primaryColor][7], 0.5)}`
-      }
-    }
-  );
-}
-var MotionFlex = motion(Flex);
-var MotionText = motion(Text);
-var MotionIcon = motion(FontAwesomeIcon);
-var MotionImage = motion(Image);
-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)"
-      },
-      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 Icon(props) {
-  return /* @__PURE__ */ jsx(Fragment, {});
-}
-function InfoBox(props) {
-  const theme2 = useMantineTheme();
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      w: "fit-content",
-      h: "fit-content",
-      style: {
-        borderRadius: theme2.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 theme2 = 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 || "rgba(69, 69, 69, 0.42)",
-      p: "sm",
-      style: {
-        borderRadius: theme2.radius.xs,
-        boxShadow: theme2.shadows.sm,
-        overflow: "hidden",
-        outline: props.error ? `1px solid rgba(255, 100, 100, 0.8)` : "none"
-      },
-      variants: props.variants,
-      children: [
-        /* @__PURE__ */ jsxs(
-          Flex,
-          {
-            align: "center",
-            gap: "xs",
-            children: [
-              /* @__PURE__ */ jsxs(
-                Flex,
-                {
-                  direction: "column",
-                  gap: "xxs",
-                  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: theme2.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;
-    }
-  };
-});
-
-// src/utils/misc.ts
-var isEnvBrowser = () => !window.invokeNative;
-var noop = () => {
-};
-var splitFAString = (faString) => {
-  const [prefix, newIcon] = faString.split("-");
-  if (!prefix || !newIcon) return { prefix: "fas", newIcon: "question" };
-  return { prefix, newIcon };
-};
-var numberToRoman = (num) => {
-  const romanNumerals = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI", "XVII", "XVIII", "XIX", "XX"];
-  return romanNumerals[num];
-};
-var copyToClipboard = (text) => {
-  const el = document.createElement("textarea");
-  el.value = text;
-  document.body.appendChild(el);
-  el.select();
-  document.execCommand("copy");
-  document.body.removeChild(el);
-};
-var openLink = (url) => {
-  if (isEnvBrowser()) {
-    window.open(url, "_blank");
-  } else {
-    window.invokeNative("openLink", url);
-  }
-};
-
-// 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)
-  };
-  console.log("Mock Data:", mockData);
-  console.log("Is Env Browser:", isEnvBrowser());
-  if (isEnvBrowser() && mockData !== void 0) return mockData;
-  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app";
-  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
-  const respFormatted = await resp.json();
-  return respFormatted;
-}
-function fetchOnLoad(eventName, data, mockData) {
-  return fetchNui(eventName, data, mockData).catch((err) => {
-    console.error(`[fetchOnLoad] Failed for ${eventName}:`, err);
-    throw err;
-  });
-}
-var fetchLuaTable = (tableName) => () => {
-  if (isEnvBrowser()) {
-    return Promise.resolve({});
-  }
-  return fetchNui("GET_LUA_TABLE", { tableName });
-};
-
-// src/utils/internalEvent.ts
-var internalEvent = (events, timer = 1e3) => {
-  if (isEnvBrowser()) {
-    for (const event of events) {
-      setTimeout(() => {
-        window.dispatchEvent(
-          new MessageEvent("message", {
-            data: {
-              action: event.action,
-              data: event.data
-            }
-          })
-        );
-      }, timer);
-    }
-  }
-};
-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;
-fetchOnLoad("GET_LOCALES").then((data) => {
-  localeStore.setState({ locales: data });
-});
-function SegmentedControl(props) {
-  const theme2 = 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: theme2.radius.xs,
-        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,
-              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 theme2 = useMantineTheme();
-  return /* @__PURE__ */ jsxs(
-    MotionFlex,
-    {
-      onClick: props.onClick,
-      w: "100%",
-      direction: "column",
-      align: "center",
-      h: "100%",
-      bg: props.selected ? colorWithAlpha(theme2.colors[theme2.primaryColor][theme2.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 ? theme2.colors[theme2.primaryColor][5] : "inherit"
-                  },
-                  animate: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
-                  },
-                  exit: {
-                    color: "inherit"
-                  },
-                  style: {
-                    fontSize: theme2.fontSizes.xs,
-                    marginBottom: "0.2vh"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                MotionText,
-                {
-                  size: props.fz || "xs",
-                  initial: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
-                  },
-                  animate: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
-                  },
-                  exit: {
-                    color: "inherit"
-                  },
-                  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: theme2.colors[theme2.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 theme2 = useMantineTheme();
-  return /* @__PURE__ */ jsx(
-    Flex,
-    {
-      mt: props.mt,
-      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(theme2.colors[theme2.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: theme2.fontSizes.md,
-                      color: props.iconColor
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    Flex,
-                    {
-                      direction: "column",
-                      gap: "0.25vh",
-                      children: [
-                        /* @__PURE__ */ jsx(Text, { p: "0", size: "sm", style: {
-                          lineHeight: theme2.fontSizes.md,
-                          fontFamily: "Akrobat Bold",
-                          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
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-var useNuiEvent = (action, handler) => {
-  const savedHandler = useRef(noop);
-  useEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-  useEffect(() => {
-    const eventListener = (event) => {
-      const { action: eventAction, data } = event.data;
-      if (savedHandler.current) {
-        if (eventAction === action) {
-          savedHandler.current(data);
-        }
-      }
-    };
-    window.addEventListener("message", eventListener);
-    return () => window.removeEventListener("message", eventListener);
-  }, [action]);
-};
-var theme = createTheme({
-  primaryColor: "dirk",
-  primaryShade: 9,
-  defaultRadius: "xxs",
-  fontFamily: "Akrobat Regular, sans-serif",
-  radius: {
-    xxs: "0.2vh",
-    xs: "0.4vh",
-    sm: "0.75vh",
-    md: "1vh",
-    lg: "1.5vh",
-    xl: "2vh",
-    xxl: "3vh"
-  },
-  fontSizes: {
-    xxs: "1.2vh",
-    xs: "1.5vh",
-    sm: "1.8vh",
-    md: "2.2vh",
-    lg: "2.8vh",
-    xl: "3.3vh",
-    xxl: "3.8vh"
-  },
-  spacing: {
-    xxs: "0.5vh",
-    xs: "0.75vh",
-    sm: "1.5vh",
-    md: "2vh",
-    lg: "3vh",
-    xl: "4vh",
-    xxl: "5vh"
-  },
-  components: {
-    Progress: {
-      styles: {
-        root: {
-          backgroundColor: "rgba(77, 77, 77, 0.4)"
-        }
-      }
-    },
-    Select: {
-      styles: {
-        dropdown: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        },
-        item: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        wrapper: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        option: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        }
-      }
-    },
-    MultiSelect: {
-      styles: {
-        dropdown: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        pill: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        item: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        wrapper: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        option: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        }
-      }
-    },
-    TextInput: {
-      styles: {
-        section: {
-          marginRight: "0.2vh"
-        },
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        }
-      }
-    }
-  },
-  colors: {
-    dark: [
-      "#ffffff",
-      "#e2e2e2",
-      "#c6c6c6",
-      "#aaaaaa",
-      "#8d8d8d",
-      "#717171",
-      "#555555",
-      "#393939",
-      "#1c1c1c",
-      "#000000"
-    ],
-    dirk: [
-      "#ffffff",
-      "#f3fce9",
-      "#dbf5bd",
-      "#c3ee91",
-      "#ace765",
-      "#94e039",
-      "#7ac61f",
-      "#5f9a18",
-      "#29420a",
-      "#446e11"
-    ]
-  }
-});
-var theme_default = theme;
-library.add(fas, far, fab);
-var useSettings = create((set) => ({
-  game: "rdr3",
-  primaryColor: "teal",
-  primaryShade: 6,
-  customTheme: {}
-}));
-function DirkProvider(props) {
-  useSettings((data) => data.primaryColor);
-  useSettings((data) => data.primaryShade);
-  useSettings((data) => data.customTheme);
-  return /* @__PURE__ */ jsx(MantineProvider, { theme: theme_default, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(Wrapper, { children: props.children }) });
-}
-function Wrapper({ children }) {
-  const game = useSettings((data) => data.game);
-  return isEnvBrowser() ? /* @__PURE__ */ jsx(
-    BackgroundImage,
-    {
-      w: "100vw",
-      h: "100vh",
-      style: { overflow: "hidden" },
-      src: game === "fivem" ? "https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg" : "https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg",
-      children
-    }
-  ) : /* @__PURE__ */ jsx(Fragment, { children });
-}
-
-export { BorderedIcon, Counter, DirkProvider, FloatingParticles, Icon, InfoBox, InputContainer, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, Segment, SegmentedControl, SegmentedProgress, Title, colorWithAlpha, copyToClipboard, fetchLuaTable, fetchNui, fetchOnLoad, internalEvent, isEnvBrowser, locale, localeStore, noop, numberToRoman, openLink, splitFAString, useNavigation, useNavigationStore, useNuiEvent, useSettings };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map