dirk-cfx-react 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,19 +1,17 @@
-'use strict';
-
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var core = require('@mantine/core');
-var jsxRuntime = require('react/jsx-runtime');
-var framerMotion = require('framer-motion');
-var react = require('react');
-var zustand = require('zustand');
-require('@mantine/notifications/styles.css');
-require('@mantine/core/styles.css');
-require('@/styles/niceFont.css');
-require('@/styles/scrollBar.css');
-var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
-var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
-var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+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 '@mantine/notifications/styles.css';
+import '@mantine/core/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
 
@@ -185,9 +183,9 @@ function colorWithAlpha(color, alpha) {
   return color;
 }
 function BorderedIcon(props) {
-  const theme2 = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactFontawesome.FontAwesomeIcon,
+  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),
@@ -206,12 +204,12 @@ function BorderedIcon(props) {
     }
   );
 }
-var MotionFlex = framerMotion.motion(core.Flex);
-var MotionText = framerMotion.motion(core.Text);
-var MotionIcon = framerMotion.motion(reactFontawesome.FontAwesomeIcon);
-var MotionImage = framerMotion.motion(core.Image);
+var MotionFlex = motion(Flex);
+var MotionText = motion(Text);
+var MotionIcon = motion(FontAwesomeIcon);
+var MotionImage = motion(Image);
 function Counter(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: props.count > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: props.count > 0 && /* @__PURE__ */ jsx(
     MotionFlex,
     {
       initial: { opacity: 0 },
@@ -246,10 +244,10 @@ var FloatingParticles = ({
   mouseRepelStrength = 50,
   backgroundColor = "transparent"
 }) => {
-  const containerRef = react.useRef(null);
-  const [particles, setParticles] = react.useState([]);
-  const mouseX = framerMotion.useMotionValue(0);
-  const mouseY = framerMotion.useMotionValue(0);
+  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 },
@@ -260,7 +258,7 @@ var FloatingParticles = ({
     const x = Math.sin(seed) * 1e4;
     return x - Math.floor(x);
   };
-  react.useEffect(() => {
+  useEffect(() => {
     if (!containerRef.current) return;
     const bounds = containerRef.current.getBoundingClientRect();
     const newParticles = [...Array(particleCount)].map((_, i) => {
@@ -281,7 +279,7 @@ var FloatingParticles = ({
     });
     setParticles(newParticles);
   }, [particleCount, icons.length, duration.base, duration.variance]);
-  react.useEffect(() => {
+  useEffect(() => {
     if (!containerRef.current) return;
     const handleMouseMove = (e) => {
       const bounds = containerRef.current.getBoundingClientRect();
@@ -330,7 +328,7 @@ var FloatingParticles = ({
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
-  react.useEffect(() => {
+  useEffect(() => {
     const handleResize = () => {
       if (!containerRef.current) return;
       const bounds = containerRef.current.getBoundingClientRect();
@@ -353,7 +351,7 @@ var FloatingParticles = ({
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
@@ -366,8 +364,8 @@ var FloatingParticles = ({
         backgroundColor,
         ...style
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: particles.map((particle) => /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.div,
+      children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: particles.map((particle) => /* @__PURE__ */ jsx(
+        motion.div,
         {
           style: {
             position: "absolute",
@@ -407,7 +405,7 @@ var FloatingParticles = ({
               ease: "easeInOut"
             }
           },
-          children: particle.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: particle.icon, style: { width: "70%", height: "70%" } }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+          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: {
@@ -425,12 +423,12 @@ var FloatingParticles = ({
   );
 };
 function Icon(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  return /* @__PURE__ */ jsx(Fragment, {});
 }
 function InfoBox(props) {
-  const theme2 = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    core.Flex,
+  const theme2 = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
+    Flex,
     {
       w: "fit-content",
       h: "fit-content",
@@ -441,8 +439,8 @@ function InfoBox(props) {
       },
       align: "center",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Flex,
+        /* @__PURE__ */ jsx(
+          Flex,
           {
             miw: "4vh",
             p: "xxs",
@@ -450,8 +448,8 @@ function InfoBox(props) {
             direction: "column",
             justify: "center",
             align: "center",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              core.Text,
+            children: /* @__PURE__ */ jsx(
+              Text,
               {
                 c: "lightgrey",
                 size: "xxs",
@@ -465,8 +463,8 @@ function InfoBox(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Flex,
+        /* @__PURE__ */ jsx(
+          Flex,
           {
             p: "xxs",
             flex: 1,
@@ -475,8 +473,8 @@ function InfoBox(props) {
             direction: "column",
             align: "center",
             justify: "center",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              core.Text,
+            children: /* @__PURE__ */ jsx(
+              Text,
               {
                 c: "lightgrey",
                 size: "xxs",
@@ -495,8 +493,8 @@ function InfoBox(props) {
   );
 }
 function InputContainer(props) {
-  const theme2 = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const theme2 = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
     MotionFlex,
     {
       w: props.w || "100%",
@@ -514,20 +512,20 @@ function InputContainer(props) {
       },
       variants: props.variants,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          core.Flex,
+        /* @__PURE__ */ jsxs(
+          Flex,
           {
             align: "center",
             gap: "xs",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                core.Flex,
+              /* @__PURE__ */ jsxs(
+                Flex,
                 {
                   direction: "column",
                   gap: "xxs",
                   children: [
-                    props.title && /* @__PURE__ */ jsxRuntime.jsx(
-                      core.Text,
+                    props.title && /* @__PURE__ */ jsx(
+                      Text,
                       {
                         size: "sm",
                         style: {
@@ -539,8 +537,8 @@ function InputContainer(props) {
                         children: props.title
                       }
                     ),
-                    props.description && /* @__PURE__ */ jsxRuntime.jsx(
-                      core.Text,
+                    props.description && /* @__PURE__ */ jsx(
+                      Text,
                       {
                         size: "xs",
                         c: "rgba(255, 255, 255, 0.8)",
@@ -551,8 +549,8 @@ function InputContainer(props) {
                   ]
                 }
               ),
-              props.error && /* @__PURE__ */ jsxRuntime.jsx(
-                core.Text,
+              props.error && /* @__PURE__ */ jsx(
+                Text,
                 {
                   size: "xs",
                   c: theme2.colors.red[9],
@@ -562,8 +560,8 @@ function InputContainer(props) {
                   children: props.error
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                core.Flex,
+              /* @__PURE__ */ jsx(
+                Flex,
                 {
                   ml: "auto",
                   children: props.rightSection
@@ -585,7 +583,7 @@ var click_sound_default = "./click_sound-PNCRRTM4.mp3";
 var hover_sound_default = "./hover_sound-NBUA222C.mp3";
 
 // src/hooks/useAudio/store.ts
-var useAudio = zustand.create(() => {
+var useAudio = create(() => {
   const audioRefs = {};
   const sounds = {
     click: click_sound_default,
@@ -687,7 +685,7 @@ var internalEvent = (events, timer = 1e3) => {
     }
   }
 };
-var localeStore = zustand.create((set, get) => {
+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."
@@ -707,7 +705,7 @@ fetchOnLoad("GET_LOCALES").then((data) => {
   localeStore.setState({ locales: data });
 });
 function SegmentedControl(props) {
-  const theme2 = core.useMantineTheme();
+  const theme2 = useMantineTheme();
   const play = useAudio((state) => state.play);
   const handleChange = (newValue) => {
     if (props.sounds) play("click");
@@ -715,8 +713,8 @@ function SegmentedControl(props) {
       props.onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Flex,
+  return /* @__PURE__ */ jsx(
+    Flex,
     {
       bg: "rgba(33, 33, 33, 0.6)",
       w: props.w || "fit-content",
@@ -725,8 +723,8 @@ function SegmentedControl(props) {
         overflow: "hidden"
       },
       ...props,
-      children: props.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.div,
+      children: props.items.map((item, index) => /* @__PURE__ */ jsx(
+        motion.div,
         {
           initial: { x: -100, opacity: 0 },
           animate: { x: 0, opacity: 1 },
@@ -737,7 +735,7 @@ function SegmentedControl(props) {
             alignItems: "center",
             flex: 1
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsx(
             Segment,
             {
               label: item.label,
@@ -764,8 +762,8 @@ function SegmentedControl(props) {
   );
 }
 function Segment(props) {
-  const theme2 = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const theme2 = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
     MotionFlex,
     {
       onClick: props.onClick,
@@ -783,14 +781,14 @@ function Segment(props) {
       whileHover: { scale: 1.05 },
       whileTap: { scale: 0.95 },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          core.Flex,
+        /* @__PURE__ */ jsxs(
+          Flex,
           {
             align: "center",
             gap: "xs",
             p: "xs",
             children: [
-              props.icon && /* @__PURE__ */ jsxRuntime.jsx(
+              props.icon && /* @__PURE__ */ jsx(
                 MotionIcon,
                 {
                   icon: props.icon,
@@ -809,7 +807,7 @@ function Segment(props) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsx(
                 MotionText,
                 {
                   size: props.fz || "xs",
@@ -834,8 +832,8 @@ function Segment(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
+        /* @__PURE__ */ jsx(
+          motion.div,
           {
             initial: false,
             animate: {
@@ -862,33 +860,33 @@ function Segment(props) {
     }
   );
 }
-var NavigationContext = react.createContext(null);
+var NavigationContext = createContext(null);
 function useNavigation(selector) {
-  const navigation = react.useContext(NavigationContext);
+  const navigation = useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigation must be used within a NavigationProvider");
   }
-  return zustand.useStore(navigation, selector);
+  return useStore(navigation, selector);
 }
 function useNavigationStore() {
-  const navigation = react.useContext(NavigationContext);
+  const navigation = useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigationStore must be used within a NavigationProvider");
   }
   return navigation;
 }
 function NavigationProvider({ children, defaultPage }) {
-  const storeRef = react.useRef(
-    zustand.create(() => ({
+  const storeRef = useRef(
+    create(() => ({
       pageId: defaultPage || "home"
     }))
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.Provider, { value: storeRef.current, children });
+  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: storeRef.current, children });
 }
 function NavBar(props) {
   const pageId = useNavigation((state) => state.pageId);
   const store = useNavigationStore();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     SegmentedControl,
     {
       sounds: true,
@@ -947,7 +945,7 @@ function SegmentedProgress(props) {
   const progressPerSegment = 100 / props.segments;
   const filledSegments = Math.floor(props.progress / progressPerSegment);
   const partialFill = props.progress % progressPerSegment / progressPerSegment;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     MotionFlex,
     {
       w: "100%",
@@ -959,8 +957,8 @@ function SegmentedProgress(props) {
       children: [...Array(props.segments)].map((_, index) => {
         const isFilled = index < filledSegments;
         const isPartial = index === filledSegments;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
+        return /* @__PURE__ */ jsx(
+          motion.div,
           {
             variants: itemVariants,
             style: {
@@ -978,9 +976,9 @@ function SegmentedProgress(props) {
   );
 }
 function Title(props) {
-  const theme2 = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Flex,
+  const theme2 = useMantineTheme();
+  return /* @__PURE__ */ jsx(
+    Flex,
     {
       mt: props.mt,
       direction: "column",
@@ -992,20 +990,20 @@ function Title(props) {
         userSelect: "none",
         borderBottom: props.removeBorder ? "none" : `0.2vh solid ${props.borderColor || colorWithAlpha(theme2.colors[theme2.primaryColor][9], 0.5)}`
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        core.Flex,
+      children: /* @__PURE__ */ jsxs(
+        Flex,
         {
           align: "center",
           justify: "center",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              core.Flex,
+            /* @__PURE__ */ jsxs(
+              Flex,
               {
                 align: "center",
                 gap: "sm",
                 pr: "xs",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsx(
                     BorderedIcon,
                     {
                       icon: props.icon,
@@ -1013,20 +1011,20 @@ function Title(props) {
                       color: props.iconColor
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    core.Flex,
+                  /* @__PURE__ */ jsxs(
+                    Flex,
                     {
                       direction: "column",
                       gap: "0.25vh",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { p: "0", size: "sm", style: {
+                        /* @__PURE__ */ jsx(Text, { p: "0", size: "sm", style: {
                           lineHeight: theme2.fontSizes.md,
                           fontFamily: "Akrobat Bold",
                           letterSpacing: "0.05em",
                           textTransform: "uppercase"
                         }, children: props.title }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          core.Text,
+                        /* @__PURE__ */ jsx(
+                          Text,
                           {
                             size: "xs",
                             c: "grey",
@@ -1040,8 +1038,8 @@ function Title(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              core.Flex,
+            /* @__PURE__ */ jsx(
+              Flex,
               {
                 ml: "auto",
                 align: "center",
@@ -1056,11 +1054,11 @@ function Title(props) {
   );
 }
 var useNuiEvent = (action, handler) => {
-  const savedHandler = react.useRef(noop);
-  react.useEffect(() => {
+  const savedHandler = useRef(noop);
+  useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  react.useEffect(() => {
+  useEffect(() => {
     const eventListener = (event) => {
       const { action: eventAction, data } = event.data;
       if (savedHandler.current) {
@@ -1073,7 +1071,7 @@ var useNuiEvent = (action, handler) => {
     return () => window.removeEventListener("message", eventListener);
   }, [action]);
 };
-var theme = core.createTheme({
+var theme = createTheme({
   primaryColor: "dirk",
   primaryShade: 9,
   defaultRadius: "xxs",
@@ -1190,8 +1188,8 @@ var theme = core.createTheme({
   }
 });
 var theme_default = theme;
-fontawesomeSvgCore.library.add(freeSolidSvgIcons.fas, freeRegularSvgIcons.far, freeBrandsSvgIcons.fab);
-var useSettings = zustand.create((set) => ({
+library.add(fas, far, fab);
+var useSettings = create((set) => ({
   game: "rdr3",
   primaryColor: "teal",
   primaryShade: 6,
@@ -1201,12 +1199,12 @@ function DirkProvider(props) {
   useSettings((data) => data.primaryColor);
   useSettings((data) => data.primaryShade);
   useSettings((data) => data.customTheme);
-  return /* @__PURE__ */ jsxRuntime.jsx(core.MantineProvider, { theme: theme_default, defaultColorScheme: "dark", children: /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { children: props.children }) });
+  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__ */ jsxRuntime.jsx(
-    core.BackgroundImage,
+  return isEnvBrowser() ? /* @__PURE__ */ jsx(
+    BackgroundImage,
     {
       w: "100vw",
       h: "100vh",
@@ -1214,43 +1212,9 @@ function Wrapper({ children }) {
       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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  ) : /* @__PURE__ */ jsx(Fragment, { children });
 }
 
-exports.BorderedIcon = BorderedIcon;
-exports.Counter = Counter;
-exports.DirkProvider = DirkProvider;
-exports.FloatingParticles = FloatingParticles;
-exports.Icon = Icon;
-exports.InfoBox = InfoBox;
-exports.InputContainer = InputContainer;
-exports.MotionFlex = MotionFlex;
-exports.MotionIcon = MotionIcon;
-exports.MotionImage = MotionImage;
-exports.MotionText = MotionText;
-exports.NavBar = NavBar;
-exports.NavigationContext = NavigationContext;
-exports.NavigationProvider = NavigationProvider;
-exports.Segment = Segment;
-exports.SegmentedControl = SegmentedControl;
-exports.SegmentedProgress = SegmentedProgress;
-exports.Title = Title;
-exports.colorWithAlpha = colorWithAlpha;
-exports.copyToClipboard = copyToClipboard;
-exports.fetchLuaTable = fetchLuaTable;
-exports.fetchNui = fetchNui;
-exports.fetchOnLoad = fetchOnLoad;
-exports.internalEvent = internalEvent;
-exports.isEnvBrowser = isEnvBrowser;
-exports.locale = locale;
-exports.localeStore = localeStore;
-exports.noop = noop;
-exports.numberToRoman = numberToRoman;
-exports.openLink = openLink;
-exports.splitFAString = splitFAString;
-exports.useNavigation = useNavigation;
-exports.useNavigationStore = useNavigationStore;
-exports.useNuiEvent = useNuiEvent;
-exports.useSettings = useSettings;
+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