dirk-cfx-react 1.0.46 → 1.0.49

package/dist/index.js

@@ -1,8 +1,13 @@
+import { createContext, useEffect, useRef, useState, useContext, useMemo } from 'react';
+import { create, useStore, createStore } from 'zustand';
+import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { createTheme, Flex, Text, Image, MantineProvider, BackgroundImage, useMantineTheme, alpha } from '@mantine/core';
-import { createContext, useRef, useEffect, useContext, useMemo, useState } from 'react';
-import { create, createStore, useStore } from 'zustand';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Flex, Text, Image as Image$1, createTheme, useMantineTheme, alpha, Progress, MantineProvider, BackgroundImage } from '@mantine/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
+import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
+import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
+import { useClickOutside } from '@mantine/hooks';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import './styles/notify.css';
@@ -13,12 +18,6 @@ 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 { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-import clickSoundUrl from './click_sound-PNCRRTM4.mp3';
-import hoverSoundUrl from './hover_sound-NBUA222C.mp3';
-import { useClickOutside } from '@mantine/hooks';
-
-// src/components/BorderedIcon.tsx
 
 // src/utils/colorWithAlpha.ts
 var colorNames = {
@@ -217,216 +216,7 @@ var openLink = (url) => {
   }
 };
 
-// src/hooks/useNuiEvent.ts
-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]);
-};
-function getNested(obj, path) {
-  return path.split(".").reduce((acc, key) => acc ? acc[key] : void 0, obj);
-}
-function setNested(obj, path, value) {
-  const keys = path.split(".");
-  const newObj = { ...obj };
-  let current = newObj;
-  for (let i = 0; i < keys.length - 1; i++) {
-    const key = keys[i];
-    current[key] = { ...current[key] || {} };
-    current = current[key];
-  }
-  current[keys[keys.length - 1]] = value;
-  return newObj;
-}
-function deleteNested(obj, path) {
-  const keys = path.split(".");
-  const newObj = { ...obj };
-  let current = newObj;
-  for (let i = 0; i < keys.length - 1; i++) {
-    const key = keys[i];
-    if (!current[key]) return obj;
-    current[key] = { ...current[key] };
-    current = current[key];
-  }
-  delete current[keys[keys.length - 1]];
-  return newObj;
-}
-function flattenRules(rules, prefix = "") {
-  const result = {};
-  for (const key in rules) {
-    const fullPath = prefix ? `${prefix}.${key}` : key;
-    const val = rules[key];
-    if (typeof val === "function") result[fullPath] = val;
-    else if (typeof val === "object")
-      Object.assign(result, flattenRules(val, fullPath));
-  }
-  return result;
-}
-function createFormStore(initialValues, validationRules, onSubmit) {
-  const flatRules = validationRules ? flattenRules(validationRules) : {};
-  const history = [];
-  const future = [];
-  const changed = /* @__PURE__ */ new Set();
-  return createStore((set, get) => ({
-    initialValues,
-    values: initialValues,
-    errors: {},
-    canBack: false,
-    canForward: false,
-    changedFields: [],
-    changedCount: 0,
-    onSubmit,
-    submit: () => {
-      const state = get();
-      const isValid = state.validate();
-      if (isValid && state.onSubmit) state.onSubmit(get());
-    },
-    resetChangeCount: () => {
-      changed.clear();
-      set(() => ({
-        changedFields: [],
-        changedCount: 0
-      }));
-    },
-    setInitialValues: (newInitialValues) => set({ initialValues: newInitialValues }),
-    setValue: (path, value) => {
-      const currentValues = get().values;
-      const newValues = setNested(currentValues, path, value);
-      const oldValue = getNested(get().initialValues, path);
-      history.push(currentValues);
-      future.length = 0;
-      if (value !== oldValue) changed.add(path);
-      else changed.delete(path);
-      set({
-        values: newValues,
-        canBack: history.length > 0,
-        canForward: false,
-        changedFields: Array.from(changed),
-        changedCount: changed.size
-      });
-      const rule = flatRules[path];
-      if (rule) {
-        const error2 = rule(value, newValues);
-        if (error2)
-          set((state) => ({ errors: setNested(state.errors, path, error2) }));
-        else set((state) => ({ errors: deleteNested(state.errors, path) }));
-      }
-    },
-    setError: (path, message) => set((state) => ({ errors: setNested(state.errors, path, message) })),
-    clearError: (path) => set((state) => ({ errors: deleteNested(state.errors, path) })),
-    validateField: (path) => {
-      const state = get();
-      const rule = flatRules[path];
-      if (!rule) return true;
-      const value = getNested(state.values, path);
-      const error2 = rule(value, state.values);
-      if (error2) {
-        set((state2) => ({ errors: setNested(state2.errors, path, error2) }));
-        return false;
-      } else {
-        set((state2) => ({ errors: deleteNested(state2.errors, path) }));
-        return true;
-      }
-    },
-    validate: () => {
-      const state = get();
-      let isValid = true;
-      let newErrors = {};
-      for (const path in flatRules) {
-        const rule = flatRules[path];
-        const value = getNested(state.values, path);
-        const error2 = rule(value, state.values);
-        if (error2) {
-          isValid = false;
-          newErrors = setNested(newErrors, path, error2);
-        }
-      }
-      set({ errors: newErrors });
-      return isValid;
-    },
-    reset: () => {
-      history.length = 0;
-      future.length = 0;
-      changed.clear();
-      set({
-        values: initialValues,
-        errors: {},
-        canBack: false,
-        canForward: false,
-        changedFields: [],
-        changedCount: 0
-      });
-    },
-    back: () => {
-      const state = get();
-      if (history.length === 0) return;
-      const prev = history.pop();
-      future.push(state.values);
-      changed.clear();
-      const current = prev;
-      const initial = get().initialValues;
-      for (const key in current) {
-        if (JSON.stringify(current[key]) !== JSON.stringify(initial[key]))
-          changed.add(key);
-      }
-      set({
-        values: prev,
-        canBack: history.length > 0,
-        canForward: true,
-        changedFields: Array.from(changed),
-        changedCount: changed.size
-      });
-    },
-    forward: () => {
-      const state = get();
-      if (future.length === 0) return;
-      const next = future.pop();
-      history.push(state.values);
-      changed.clear();
-      const current = next;
-      const initial = get().initialValues;
-      for (const key in current) {
-        if (JSON.stringify(current[key]) !== JSON.stringify(initial[key]))
-          changed.add(key);
-      }
-      set({
-        values: next,
-        canBack: true,
-        canForward: future.length > 0,
-        changedFields: Array.from(changed),
-        changedCount: changed.size
-      });
-    }
-  }));
-}
-var FormContext = createContext(null);
-function FormProvider({
-  initialValues,
-  validate,
-  onSubmit,
-  children
-}) {
-  const storeRef = useRef(createFormStore(initialValues, validate, onSubmit));
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: storeRef.current, children });
-}
-function useForm() {
-  const store = useContext(FormContext);
-  if (!store) throw new Error("useForm must be used inside a <FormProvider>");
-  return useStore(store);
-}
+// src/utils/fetchNui.ts
 async function fetchNui(eventName, data, mockData) {
   const options = {
     method: "post",
@@ -953,273 +743,51 @@ function createSkill(defaultSettings) {
     useSkill
   };
 }
-var label = {
-  fontSize: "var(--mantine-font-size-xs)",
-  fontFamily: "Akrobat Bold",
-  letterSpacing: "0.05em",
-  textTransform: "uppercase"
-};
-var error = {
-  fontSize: "var(--mantine-font-size-xs)",
-  fontFamily: "Akrobat Regular"
-};
-var theme = createTheme({
-  primaryColor: "dirk",
-  primaryShade: 9,
-  defaultRadius: "xs",
-  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"
-  },
-  lineHeights: {
-    xxs: "1.4vh",
-    xs: "1.8vh",
-    sm: "2.2vh",
-    md: "2.8vh",
-    lg: "3.3vh",
-    xl: "3.8vh"
-  },
-  spacing: {
-    xxs: "0.5vh",
-    xs: "0.75vh",
-    sm: "1.5vh",
-    md: "2vh",
-    lg: "3vh",
-    xl: "4vh",
-    xxl: "5vh"
-  },
-  components: {
-    Progress: {
-      styles: {
-        label: {
-          fontFamily: "Akrobat Bold",
-          letterSpacing: "0.05em",
-          textTransform: "uppercase"
-        },
-        root: {
-          backgroundColor: "rgba(77, 77, 77, 0.4)"
-        }
-      }
-    },
-    Textarea: {
-      styles: {
-        label,
-        error
-      }
-    },
-    Button: {
-      styles: {
-        root: {
-          fontSize: "var(--mantine-font-size-xs)"
-        }
-      }
-    },
-    Select: {
-      styles: {
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        }
-      }
-    },
-    Pill: {
-      styles: (theme2) => ({
-        root: {
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          backgroundColor: "rgba(76, 76, 76, 0.3)",
-          height: "fit-content",
-          textTransform: "uppercase",
-          letterSpacing: "0.05em",
-          fontFamily: "Akrobat Bold",
-          fontSize: theme2.fontSizes.xs,
-          borderRadius: theme2.defaultRadius,
-          padding: `${theme2.spacing.xs} ${theme2.spacing.sm}`
-        }
-      })
-    },
-    Input: {
-      styles: {
-        label,
-        error,
-        input: {
-          padding: "var(--mantine-spacing-sm)",
-          backgroundColor: "rgba(76, 76, 76, 0.3)"
-        }
-      }
-    },
-    ColorInput: {
-      styles: {
-        label,
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        }
-      }
-    },
-    TextInput: {
-      styles: {
-        label,
-        wrapper: {},
-        section: {
-          marginRight: "0.2vh"
-        },
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        }
-      }
-    },
-    NumberInput: {
-      styles: {
-        label,
-        input: {
-          padding: "var(--mantine-spacing-sm)"
-        },
-        section: {
-          pointerEvents: "all"
-        }
-      }
-    }
-  },
-  colors: {
-    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: "fivem",
-  primaryColor: "dirk",
-  primaryShade: 9,
-  itemImgPath: "https://assets.dirkcfx.com/items/",
-  customTheme: {}
-}));
-function DirkProvider(props) {
-  const primaryColor = useSettings((data) => data.primaryColor);
-  const primaryShade = useSettings((data) => data.primaryShade);
-  const customTheme = useSettings((data) => data.customTheme);
-  const game = useSettings((data) => data.game);
-  const mergedTheme = useMemo(() => ({
-    ...theme_default,
-    primaryColor,
-    primaryShade,
-    colors: {
-      ...theme_default.colors,
-      ...customTheme
-      // Custom theme colors will override/extend base colors
-    }
-  }), [primaryColor, primaryShade, customTheme]);
-  useEffect(() => {
-    document.fonts.ready.then(() => {
-      document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : game === "fivem" ? '"Akrobat Regular", sans-serif' : "sans-serif";
-      console.log(`Game set to ${game}, applied corresponding font family.: ${document.body.style.fontFamily}`);
-    });
-  }, [game]);
-  useEffect(() => {
-    fetchNui("NUI_READY");
-  }, []);
-  useAutoFetcher();
-  return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, 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 });
-}
-function useTornEdges() {
-  const game = useSettings((state) => state.game);
-  return game === "rdr3" ? "torn-edge-wrapper" : "";
+var dummyURL = "https://fmapi.net/api/v2/presigned-url/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJON0UxM0tzejFRM0NuSzRHWFBPbmUiLCJ0ZWFtSWQiOiJlMDQ1YnpwZzg5TGpoaUFTaURIdVoiLCJmaWxlVHlwZSI6ImltYWdlIiwidG9rZW5JZCI6ImpwczJ4Z0M1eFZqcnRoeWZTZnFsYSIsInNldHRpbmdzIjp7IlRlYW1JRCI6ImUwNDVienBnODlMamhpQVNpREh1WiIsIkltYWdlTm90aWZpY2F0aW9uVHlwZSI6IiIsIkRpc2NvcmRXZWJob29rIjoiIiwiRGlzY29yZEltYWdlQ2hhbm5lbCI6IiIsIlZpZGVvTm90aWZpY2F0aW9uVHlwZSI6IiIsIkRpc2NvcmRWaWRlb1dlYmhvb2siOiIiLCJEaXNjb3JkVmlkZW9DaGFubmVsIjoiIiwiQXVkaW9Ob3RpZmljYXRpb25UeXBlIjoiIiwiRGlzY29yZEF1ZGlvV2ViaG9vayI6IiIsIkRpc2NvcmRBdWRpb0NoYW5uZWwiOiIiLCJEaXNjb3JkQm90VG9rZW4iOiIiLCJSZXRlbnRpb25FbmFibGVkIjpmYWxzZSwiUmV0ZW50aW9uRGF5cyI6NywiVmlkZW9SZXRlbnRpb25FbmFibGVkIjpmYWxzZSwiVmlkZW9SZXRlbnRpb25EYXlzIjo3LCJBdWRpb1JldGVudGlvbkVuYWJsZWQiOmZhbHNlLCJBdWRpb1JldGVudGlvbkRheXMiOjcsIkxvZ0FsZXJ0RW5hYmxlZCI6ZmFsc2UsIkxvZ0FsZXJ0TGV2ZWxzIjpbXSwiTG9nQWxlcnREaXNjb3JkV2ViaG9vayI6IiIsIk92ZXJyaWRlSW1hZ2VRdWFsaXR5IjpmYWxzZSwiSW1hZ2VRdWFsaXR5Ijo1MH0sImV4cCI6MTc2MTg1MTEzNH0.fpPeQ0GCm5GNTddjttUQ78VMqRUAufXoOvv5C7Vh3WA";
+async function updatePresignedURL() {
+  return await fetchNui("GET_PRESIGNED_URL", void 0, dummyURL);
 }
-function TornEdgeSVGFilter() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.018 0.022",
-            numOctaves: "5",
-            seed: "9",
-            result: "noise1"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "feTurbulence",
-          {
-            type: "fractalNoise",
-            baseFrequency: "0.08 0.12",
-            numOctaves: "2",
-            seed: "3",
-            result: "noise2"
-          }
-        ),
-        /* @__PURE__ */ jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
-        /* @__PURE__ */ jsx(
-          "feDisplacementMap",
-          {
-            in: "SourceGraphic",
-            in2: "combinedNoise",
-            scale: "52",
-            xChannelSelector: "R",
-            yChannelSelector: "G",
-            result: "displaced"
-          }
-        ),
-        /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
-        /* @__PURE__ */ jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
-        /* @__PURE__ */ jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
-        /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "eroded" }) })
-      ] }) })
-    }
+async function uploadImage(props) {
+  const uploadURL = await updatePresignedURL();
+  const response = await fetch(props.fileURL);
+  const blob = await response.blob();
+  const file = new File([blob], "upload.png", { type: blob.type });
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append(
+    "metadata",
+    JSON.stringify({
+      name: props.name || file.name,
+      description: props.description || "Uploaded via DirkScripts"
+    })
   );
+  const uploadRes = await axios.post(uploadURL, formData, {
+    headers: { "Content-Type": "multipart/form-data" }
+  });
+  const finalUrl = uploadRes.data?.data?.url ?? uploadRes.data?.url;
+  if (!finalUrl) throw new Error("Upload succeeded but no URL returned");
+  return finalUrl;
+}
+async function getImageShape(file) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      if (img.width > img.height) resolve("wide");
+      else resolve("square");
+    };
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = typeof file === "string" ? file : URL.createObjectURL(file);
+  });
 }
 function BorderedIcon(props) {
   const theme2 = useMantineTheme();
-  const tornEdgeCSS = useTornEdges();
   return /* @__PURE__ */ jsx(
-    Flex,
+    FontAwesomeIcon,
     {
-      className: tornEdgeCSS,
-      justify: "center",
-      align: "center",
+      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",
@@ -1227,25 +795,15 @@ function BorderedIcon(props) {
         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 : theme.colors[theme.primaryColor][9], 0.8)}`,
+        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)}`
-      },
-      children: /* @__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)),
-          }
-        }
-      )
+      }
     }
   );
 }
 var MotionFlex = motion.create(Flex);
 var MotionText = motion.create(Text);
-var MotionImage = motion.create(Image);
+var MotionImage = motion.create(Image$1);
 var MotionIcon = motion.create(FontAwesomeIcon);
 function Counter(props) {
   return /* @__PURE__ */ jsx(AnimatePresence, { children: props.count > 0 && /* @__PURE__ */ jsx(
@@ -1988,31 +1546,118 @@ function Title(props) {
     }
   );
 }
-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 });
-  };
+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
+          }
+        )
+      ]
+    }
+  );
+}
+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 });
   };
@@ -2137,7 +1782,473 @@ function Modal() {
     }
   ) });
 }
+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]);
+};
+function getNested(obj, path) {
+  return path.split(".").reduce((acc, key) => acc ? acc[key] : void 0, obj);
+}
+function setNested(obj, path, value) {
+  const keys = path.split(".");
+  const newObj = { ...obj };
+  let current = newObj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    current[key] = { ...current[key] || {} };
+    current = current[key];
+  }
+  current[keys[keys.length - 1]] = value;
+  return newObj;
+}
+function deleteNested(obj, path) {
+  const keys = path.split(".");
+  const newObj = { ...obj };
+  let current = newObj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    if (!current[key]) return obj;
+    current[key] = { ...current[key] };
+    current = current[key];
+  }
+  delete current[keys[keys.length - 1]];
+  return newObj;
+}
+function flattenRules(rules, prefix = "") {
+  const result = {};
+  for (const key in rules) {
+    const fullPath = prefix ? `${prefix}.${key}` : key;
+    const val = rules[key];
+    if (typeof val === "function") result[fullPath] = val;
+    else if (typeof val === "object")
+      Object.assign(result, flattenRules(val, fullPath));
+  }
+  return result;
+}
+function createFormStore(initialValues, validationRules, onSubmit) {
+  const flatRules = validationRules ? flattenRules(validationRules) : {};
+  const history = [];
+  const future = [];
+  const changed = /* @__PURE__ */ new Set();
+  return createStore((set, get) => ({
+    initialValues,
+    values: initialValues,
+    errors: {},
+    canBack: false,
+    canForward: false,
+    changedFields: [],
+    changedCount: 0,
+    onSubmit,
+    submit: () => {
+      const state = get();
+      const isValid = state.validate();
+      if (isValid && state.onSubmit) state.onSubmit(get());
+    },
+    resetChangeCount: () => {
+      changed.clear();
+      set(() => ({
+        changedFields: [],
+        changedCount: 0
+      }));
+    },
+    setInitialValues: (newInitialValues) => set({ initialValues: newInitialValues }),
+    setValue: (path, value) => {
+      const currentValues = get().values;
+      const newValues = setNested(currentValues, path, value);
+      const oldValue = getNested(get().initialValues, path);
+      history.push(currentValues);
+      future.length = 0;
+      if (value !== oldValue) changed.add(path);
+      else changed.delete(path);
+      set({
+        values: newValues,
+        canBack: history.length > 0,
+        canForward: false,
+        changedFields: Array.from(changed),
+        changedCount: changed.size
+      });
+      const rule = flatRules[path];
+      if (rule) {
+        const error2 = rule(value, newValues);
+        if (error2)
+          set((state) => ({ errors: setNested(state.errors, path, error2) }));
+        else set((state) => ({ errors: deleteNested(state.errors, path) }));
+      }
+    },
+    setError: (path, message) => set((state) => ({ errors: setNested(state.errors, path, message) })),
+    clearError: (path) => set((state) => ({ errors: deleteNested(state.errors, path) })),
+    validateField: (path) => {
+      const state = get();
+      const rule = flatRules[path];
+      if (!rule) return true;
+      const value = getNested(state.values, path);
+      const error2 = rule(value, state.values);
+      if (error2) {
+        set((state2) => ({ errors: setNested(state2.errors, path, error2) }));
+        return false;
+      } else {
+        set((state2) => ({ errors: deleteNested(state2.errors, path) }));
+        return true;
+      }
+    },
+    validate: () => {
+      const state = get();
+      let isValid = true;
+      let newErrors = {};
+      for (const path in flatRules) {
+        const rule = flatRules[path];
+        const value = getNested(state.values, path);
+        const error2 = rule(value, state.values);
+        if (error2) {
+          isValid = false;
+          newErrors = setNested(newErrors, path, error2);
+        }
+      }
+      set({ errors: newErrors });
+      return isValid;
+    },
+    reset: () => {
+      history.length = 0;
+      future.length = 0;
+      changed.clear();
+      set({
+        values: initialValues,
+        errors: {},
+        canBack: false,
+        canForward: false,
+        changedFields: [],
+        changedCount: 0
+      });
+    },
+    back: () => {
+      const state = get();
+      if (history.length === 0) return;
+      const prev = history.pop();
+      future.push(state.values);
+      changed.clear();
+      const current = prev;
+      const initial = get().initialValues;
+      for (const key in current) {
+        if (JSON.stringify(current[key]) !== JSON.stringify(initial[key]))
+          changed.add(key);
+      }
+      set({
+        values: prev,
+        canBack: history.length > 0,
+        canForward: true,
+        changedFields: Array.from(changed),
+        changedCount: changed.size
+      });
+    },
+    forward: () => {
+      const state = get();
+      if (future.length === 0) return;
+      const next = future.pop();
+      history.push(state.values);
+      changed.clear();
+      const current = next;
+      const initial = get().initialValues;
+      for (const key in current) {
+        if (JSON.stringify(current[key]) !== JSON.stringify(initial[key]))
+          changed.add(key);
+      }
+      set({
+        values: next,
+        canBack: true,
+        canForward: future.length > 0,
+        changedFields: Array.from(changed),
+        changedCount: changed.size
+      });
+    }
+  }));
+}
+var FormContext = createContext(null);
+function FormProvider({
+  initialValues,
+  validate,
+  onSubmit,
+  children
+}) {
+  const storeRef = useRef(createFormStore(initialValues, validate, onSubmit));
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: storeRef.current, children });
+}
+function useForm() {
+  const store = useContext(FormContext);
+  if (!store) throw new Error("useForm must be used inside a <FormProvider>");
+  return useStore(store);
+}
+var label = {
+  fontSize: "var(--mantine-font-size-xs)",
+  fontFamily: "Akrobat Bold",
+  letterSpacing: "0.05em",
+  textTransform: "uppercase"
+};
+var error = {
+  fontSize: "var(--mantine-font-size-xs)",
+  fontFamily: "Akrobat Regular"
+};
+var theme = createTheme({
+  primaryColor: "dirk",
+  primaryShade: 9,
+  defaultRadius: "xs",
+  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"
+  },
+  lineHeights: {
+    xxs: "1.4vh",
+    xs: "1.8vh",
+    sm: "2.2vh",
+    md: "2.8vh",
+    lg: "3.3vh",
+    xl: "3.8vh"
+  },
+  spacing: {
+    xxs: "0.5vh",
+    xs: "0.75vh",
+    sm: "1.5vh",
+    md: "2vh",
+    lg: "3vh",
+    xl: "4vh",
+    xxl: "5vh"
+  },
+  components: {
+    Progress: {
+      styles: {
+        label: {
+          fontFamily: "Akrobat Bold",
+          letterSpacing: "0.05em",
+          textTransform: "uppercase"
+        },
+        root: {
+          backgroundColor: "rgba(77, 77, 77, 0.4)"
+        }
+      }
+    },
+    Textarea: {
+      styles: {
+        label,
+        error
+      }
+    },
+    Button: {
+      styles: {
+        root: {
+          fontSize: "var(--mantine-font-size-xs)"
+        }
+      }
+    },
+    Select: {
+      styles: {
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        }
+      }
+    },
+    Pill: {
+      styles: (theme2) => ({
+        root: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          backgroundColor: "rgba(76, 76, 76, 0.3)",
+          height: "fit-content",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontFamily: "Akrobat Bold",
+          fontSize: theme2.fontSizes.xs,
+          borderRadius: theme2.defaultRadius,
+          padding: `${theme2.spacing.xs} ${theme2.spacing.sm}`
+        }
+      })
+    },
+    Input: {
+      styles: {
+        label,
+        error,
+        input: {
+          padding: "var(--mantine-spacing-sm)",
+          backgroundColor: "rgba(76, 76, 76, 0.3)"
+        }
+      }
+    },
+    ColorInput: {
+      styles: {
+        label,
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        }
+      }
+    },
+    TextInput: {
+      styles: {
+        label,
+        wrapper: {},
+        section: {
+          marginRight: "0.2vh"
+        },
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        }
+      }
+    },
+    NumberInput: {
+      styles: {
+        label,
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        },
+        section: {
+          pointerEvents: "all"
+        }
+      }
+    }
+  },
+  colors: {
+    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: "fivem",
+  primaryColor: "dirk",
+  primaryShade: 9,
+  itemImgPath: "https://assets.dirkcfx.com/items/",
+  customTheme: {}
+}));
+function DirkProvider(props) {
+  const primaryColor = useSettings((data) => data.primaryColor);
+  const primaryShade = useSettings((data) => data.primaryShade);
+  const customTheme = useSettings((data) => data.customTheme);
+  const game = useSettings((data) => data.game);
+  const mergedTheme = useMemo(() => ({
+    ...theme_default,
+    primaryColor,
+    primaryShade,
+    colors: {
+      ...theme_default.colors,
+      ...customTheme
+      // Custom theme colors will override/extend base colors
+    }
+  }), [primaryColor, primaryShade, customTheme]);
+  useEffect(() => {
+    document.fonts.ready.then(() => {
+      document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : game === "fivem" ? '"Akrobat Regular", sans-serif' : "sans-serif";
+      console.log(`Game set to ${game}, applied corresponding font family.: ${document.body.style.fontFamily}`);
+    });
+  }, [game]);
+  useEffect(() => {
+    fetchNui("NUI_READY");
+  }, []);
+  useAutoFetcher();
+  return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, 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 });
+}
+function useTornEdges() {
+  const game = useSettings((state) => state.game);
+  return game === "rdr3" ? "torn-edge-wrapper" : "";
+}
+function TornEdgeSVGFilter() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "torn-edge-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.018 0.022",
+            numOctaves: "5",
+            seed: "9",
+            result: "noise1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "feTurbulence",
+          {
+            type: "fractalNoise",
+            baseFrequency: "0.08 0.12",
+            numOctaves: "2",
+            seed: "3",
+            result: "noise2"
+          }
+        ),
+        /* @__PURE__ */ jsx("feBlend", { in: "noise1", in2: "noise2", mode: "multiply", result: "combinedNoise" }),
+        /* @__PURE__ */ jsx(
+          "feDisplacementMap",
+          {
+            in: "SourceGraphic",
+            in2: "combinedNoise",
+            scale: "52",
+            xChannelSelector: "R",
+            yChannelSelector: "G",
+            result: "displaced"
+          }
+        ),
+        /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "0.8", in: "displaced", result: "blurred" }),
+        /* @__PURE__ */ jsx("feComponentTransfer", { in: "blurred", result: "alphaFade", children: /* @__PURE__ */ jsx("feFuncA", { type: "gamma", amplitude: "1", exponent: "1.3", offset: "-0.05" }) }),
+        /* @__PURE__ */ jsx("feMorphology", { operator: "erode", radius: "0.4", in: "alphaFade", result: "eroded" }),
+        /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "eroded" }) })
+      ] }) })
+    }
+  );
+}
 
-export { BorderedIcon, Counter, DirkProvider, FloatingParticles, FormProvider, InfoBox, InputContainer, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createFormStore, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useForm, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { BorderedIcon, Counter, DirkProvider, FloatingParticles, FormProvider, InfoBox, InputContainer, LevelBanner, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createFormStore, createSkill, fetchNui, getImageShape, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useForm, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map