dirk-cfx-react 1.0.34 → 1.0.35

package/dist/providers/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/misc.ts","../../src/theme.ts","../../src/providers/DirkProvider.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["export const isEnvBrowser = (): boolean => !(window as any).invokeNative;\r\n\r\n// Basic no operation function\r\nexport const noop = () => {};\r\n\r\nexport const splitFAString = (faString:string) => {\r\n  const [prefix, newIcon] = faString.split('-');\r\n  if (!prefix || !newIcon) return {prefix: 'fas', newIcon: 'question'};\r\n  return {prefix, newIcon};\r\n}\r\n\r\nexport const numberToRoman = (num:number) => {\r\n  const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX']  \r\n  return romanNumerals[num]\r\n}\r\n\r\nexport const copyToClipboard = (text:string) => {\r\n  const el = document.createElement('textarea');\r\n  el.value = text;\r\n  document.body.appendChild(el);\r\n  el.select();\r\n  document.execCommand('copy');\r\n  document.body.removeChild(el);\r\n}\r\n\r\nexport const openLink = (url:string) => {\r\n  if (isEnvBrowser()) {\r\n    window.open(url, '_blank');\r\n  } else {\r\n    // @ts-expect-error -- invokeNative exists in NUI\r\n    window.invokeNative('openLink', url);\r\n  } \r\n}","import { createTheme } from \"@mantine/core\";\r\n\r\nconst theme = createTheme({\r\n  primaryColor: \"dirk\",\r\n  primaryShade: 9,\r\n  defaultRadius: \"xxs\",\r\n  fontFamily: \"Akrobat Regular, sans-serif\",\r\n\r\n  radius:{\r\n    xxs: '0.2vh',\r\n    xs: '0.4vh',\r\n    sm: '0.75vh',\r\n    md: '1vh',\r\n    lg: '1.5vh',\r\n    xl: '2vh',\r\n    xxl: '3vh',\r\n  },\r\n\r\n  fontSizes: {\r\n    xxs: '1.2vh',\r\n    xs: '1.5vh',\r\n    sm: '1.8vh',\r\n    md: '2.2vh',\r\n    lg: '2.8vh',\r\n    xl: '3.3vh',\r\n    xxl: '3.8vh',\r\n  },\r\n\r\n  spacing:{\r\n    xxs: '0.5vh',\r\n    xs: '0.75vh',\r\n    sm: '1.5vh',\r\n    md: '2vh',\r\n    lg: '3vh',\r\n    xl: '4vh',\r\n    xxl: '5vh',\r\n  },\r\n\r\n  components:{\r\n    Progress:{\r\n      styles:{\r\n        root:{\r\n          backgroundColor: 'rgba(77, 77, 77, 0.4)',\r\n        },\r\n        \r\n      }\r\n    },\r\n\r\n    Select:{\r\n      styles:{\r\n        dropdown:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        input:{\r\n          padding: 'var(--mantine-spacing-sm)',\r\n        },\r\n        item:{\r\n          \r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        wrapper:{\r\n          \r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        option:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n\r\n      }\r\n    },\r\n    MultiSelect:{\r\n      styles:{\r\n        dropdown:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        pill:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        item:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        wrapper:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        option:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n\r\n      }\r\n    },\r\n    TextInput:{\r\n      styles:{\r\n        section:{\r\n          marginRight: '0.2vh',\r\n        },\r\n\r\n        input:{\r\n          padding: 'var(--mantine-spacing-sm)',\r\n        },\r\n\r\n       \r\n        \r\n      }\r\n    },\r\n  },\r\n\r\n  colors: {\r\n    dark:[\r\n      \"#ffffff\",\r\n      \"#e2e2e2\",\r\n      \"#c6c6c6\",\r\n      \"#aaaaaa\",\r\n      \"#8d8d8d\",\r\n      \"#717171\",\r\n      \"#555555\",\r\n      \"#393939\",\r\n      \"#1c1c1c\",\r\n      \"#000000\",\r\n    ],\r\n    dirk:[\r\n      \"#ffffff\",\r\n      \"#f3fce9\",\r\n      \"#dbf5bd\",\r\n      \"#c3ee91\",\r\n      \"#ace765\",\r\n      \"#94e039\",\r\n      \"#7ac61f\",\r\n      \"#5f9a18\",\r\n      \"#29420a\",\r\n      \"#446e11\",\r\n    ],\r\n  },\r\n});\r\n\r\n\r\nexport default theme;","import '@mantine/core/styles.css';\r\nimport '@mantine/notifications/styles.css';\r\nimport './styles/fonts.css';\r\nimport './styles/scrollBar.css';\r\n\r\n\r\n\r\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { fab } from \"@fortawesome/free-brands-svg-icons\";\r\nimport { far } from \"@fortawesome/free-regular-svg-icons\";\r\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { BackgroundImage, MantineColorShade, MantineProvider, MantineThemeOverride } from '@mantine/core';\r\nimport { isEnvBrowser } from '@/utils';\r\nimport { create } from 'zustand';\r\nimport theme from '@/theme';\r\nimport { useEffect, useMemo } from 'react';\r\nlibrary.add(fas, far, fab);\r\n\r\nexport type DirkProviderProps = {\r\n  fakeBackground?: boolean;\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const useSettings = create<{\r\n  game: 'rdr3' | 'fivem';\r\n  primaryColor: string;\r\n  primaryShade: number;\r\n  customTheme: Record<string, string[]>;\r\n}>((set) => ({\r\n  game: 'rdr3',\r\n  primaryColor: 'teal',\r\n  primaryShade: 6,\r\n  customTheme: {},\r\n}));\r\n\r\n\r\n\r\nexport function DirkProvider(props: DirkProviderProps) {\r\n  const primaryColor = useSettings((data) => data.primaryColor);\r\n  const primaryShade = useSettings((data) => data.primaryShade);\r\n  const customTheme = useSettings((data) => data.customTheme);\r\n  const game = useSettings((data) => data.game);\r\n  // Memoize the merged theme to avoid unnecessary recalculations\r\n  const mergedTheme = useMemo<MantineThemeOverride>(() => ({\r\n    ...theme,\r\n    primaryColor: primaryColor,\r\n    primaryShade: primaryShade as MantineColorShade,\r\n    colors: {\r\n      ...theme.colors,\r\n      ...customTheme, // Custom theme colors will override/extend base colors\r\n    },\r\n  }), [primaryColor, primaryShade, customTheme]);\r\n\r\n  useEffect(() => {\r\n    document.fonts.ready.then(() => {\r\n document.body.style.fontFamily = \r\n      game === 'rdr3' ? '\"Red Dead\", sans-serif' :\r\n      game === 'fivem' ? '\"Akrobat Regular\", sans-serif' :\r\n      'sans-serif';\r\n    console.log(`Game set to ${game}, applied corresponding font family.: ${document.body.style.fontFamily}`);\r\n    });\r\n  }, [game]);\r\n\r\n  return (\r\n    <MantineProvider theme={mergedTheme} defaultColorScheme='dark'>\r\n      <Wrapper>\r\n        {props.children}\r\n      </Wrapper>\r\n    </MantineProvider>\r\n  );\r\n}\r\n\r\nfunction Wrapper({ children }: { children: React.ReactNode }) {\r\n  const game = useSettings((data) => data.game);\r\n  return isEnvBrowser() ? ( \r\n    <BackgroundImage w='100vw' h='100vh' style={{overflow:'hidden'}}\r\n      src={game === 'fivem' ?\r\n        \"https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg\"\r\n        : \"https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg\"}\r\n    >  \r\n      {children}\r\n    </BackgroundImage>\r\n  ) : (\r\n    <>{children}</>\r\n  )\r\n}\r\n\r\n"]}
+{"version":3,"sources":["../../src/utils/misc.ts","../../src/theme.ts","../../src/providers/DirkProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAO,IAAM,YAAA,GAAe,MAAe,CAAE,MAAA,CAAe,YAAA;ACE5D,IAAM,QAAQ,WAAA,CAAY;AAAA,EACxB,YAAA,EAAc,MAAA;AAAA,EACd,YAAA,EAAc,CAAA;AAAA,EACd,aAAA,EAAe,KAAA;AAAA,EACf,UAAA,EAAY,6BAAA;AAAA,EAEZ,MAAA,EAAO;AAAA,IACL,GAAA,EAAK,OAAA;AAAA,IACL,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,QAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,GAAA,EAAK;AAAA,GACP;AAAA,EAEA,SAAA,EAAW;AAAA,IACT,GAAA,EAAK,OAAA;AAAA,IACL,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,GAAA,EAAK;AAAA,GACP;AAAA,EAEA,OAAA,EAAQ;AAAA,IACN,GAAA,EAAK,OAAA;AAAA,IACL,EAAA,EAAI,QAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,GAAA,EAAK;AAAA,GACP;AAAA,EAEA,UAAA,EAAW;AAAA,IACT,QAAA,EAAS;AAAA,MACP,MAAA,EAAO;AAAA,QACL,IAAA,EAAK;AAAA,UACH,eAAA,EAAiB;AAAA;AACnB;AAEF,KACF;AAAA,IAEA,MAAA,EAAO;AAAA,MACL,MAAA,EAAO;AAAA,QACL,QAAA,EAAS;AAAA,UACP,YAAA,EAAc;AAAA,SAChB;AAAA,QACA,KAAA,EAAM;AAAA,UACJ,OAAA,EAAS;AAAA,SACX;AAAA,QACA,IAAA,EAAK;AAAA,UAEH,YAAA,EAAc;AAAA,SAChB;AAAA,QACA,OAAA,EAAQ;AAAA,UAEN,YAAA,EAAc;AAAA,SAChB;AAAA,QACA,MAAA,EAAO;AAAA,UACL,YAAA,EAAc;AAAA;AAChB;AAEF,KACF;AAAA,IACA,WAAA,EAAY;AAAA,MACV,MAAA,EAAO;AAAA,QACL,QAAA,EAAS;AAAA,UACP,YAAA,EAAc;AAAA,SAChB;AAAA,QACA,IAAA,EAAK;AAAA,UACH,YAAA,EAAc;AAAA,SAChB;AAAA,QACA,IAAA,EAAK;AAAA,UACH,YAAA,EAAc;AAAA,SAChB;AAAA,QACA,OAAA,EAAQ;AAAA,UACN,YAAA,EAAc;AAAA,SAChB;AAAA,QACA,MAAA,EAAO;AAAA,UACL,YAAA,EAAc;AAAA;AAChB;AAEF,KACF;AAAA,IACA,SAAA,EAAU;AAAA,MACR,MAAA,EAAO;AAAA,QACL,OAAA,EAAQ;AAAA,UACN,WAAA,EAAa;AAAA,SACf;AAAA,QAEA,KAAA,EAAM;AAAA,UACJ,OAAA,EAAS;AAAA;AACX;AAIF;AACF,GACF;AAAA,EAEA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAK;AAAA,MACH,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF;AAAA,IACA,IAAA,EAAK;AAAA,MACH,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF;AAEJ,CAAC,CAAA;AAGD,IAAO,aAAA,GAAQ,KAAA;ACvHf,OAAA,CAAQ,GAAA,CAAI,GAAA,EAAK,GAAA,EAAK,GAAG,CAAA;AAOlB,IAAM,WAAA,GAAc,MAAA,CAKxB,CAAC,GAAA,MAAS;AAAA,EACX,IAAA,EAAM,MAAA;AAAA,EACN,YAAA,EAAc,MAAA;AAAA,EACd,YAAA,EAAc,CAAA;AAAA,EACd,aAAa;AACf,CAAA,CAAE;AAIK,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,CAAC,IAAA,KAAS,KAAK,YAAY,CAAA;AAC5D,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,CAAC,IAAA,KAAS,KAAK,YAAY,CAAA;AAC5D,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,IAAA,KAAS,KAAK,WAAW,CAAA;AAC1D,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,CAAC,IAAA,KAAS,KAAK,IAAI,CAAA;AAE5C,EAAA,MAAM,WAAA,GAAc,QAA8B,OAAO;AAAA,IACvD,GAAG,aAAA;AAAA,IACH,YAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,GAAG,aAAA,CAAM,MAAA;AAAA,MACT,GAAG;AAAA;AAAA;AACL,GACF,CAAA,EAAI,CAAC,YAAA,EAAc,YAAA,EAAc,WAAW,CAAC,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,KAAA,CAAM,KAAA,CAAM,IAAA,CAAK,MAAM;AACnC,MAAA,QAAA,CAAS,IAAA,CAAK,MAAM,UAAA,GACf,IAAA,KAAS,SAAS,wBAAA,GAClB,IAAA,KAAS,UAAU,+BAAA,GACnB,YAAA;AACF,MAAA,OAAA,CAAQ,GAAA,CAAI,eAAe,IAAI,CAAA,sCAAA,EAAyC,SAAS,IAAA,CAAK,KAAA,CAAM,UAAU,CAAA,CAAE,CAAA;AAAA,IACxG,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EAAgB,KAAA,EAAO,WAAA,EAAa,kBAAA,EAAmB,QACtD,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,QAAA,EACT,CAAA,EACF,CAAA;AAEJ;AAEA,SAAS,OAAA,CAAQ,EAAE,QAAA,EAAS,EAAkC;AAC5D,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,CAAC,IAAA,KAAS,KAAK,IAAI,CAAA;AAC5C,EAAA,OAAO,cAAa,mBAClB,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MAAgB,CAAA,EAAE,OAAA;AAAA,MAAQ,CAAA,EAAE,OAAA;AAAA,MAAQ,KAAA,EAAO,EAAC,QAAA,EAAS,QAAA,EAAQ;AAAA,MAC5D,GAAA,EAAK,IAAA,KAAS,OAAA,GACZ,sDAAA,GACE,iJAAA;AAAA,MAEH;AAAA;AAAA,GACH,mCAEG,QAAA,EAAS,CAAA;AAEhB","file":"index.js","sourcesContent":["export const isEnvBrowser = (): boolean => !(window as any).invokeNative;\r\n\r\n// Basic no operation function\r\nexport const noop = () => {};\r\n\r\nexport const splitFAString = (faString:string) => {\r\n  const [prefix, newIcon] = faString.split('-');\r\n  if (!prefix || !newIcon) return {prefix: 'fas', newIcon: 'question'};\r\n  return {prefix, newIcon};\r\n}\r\n\r\nexport const numberToRoman = (num:number) => {\r\n  const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX']  \r\n  return romanNumerals[num]\r\n}\r\n\r\nexport const copyToClipboard = (text:string) => {\r\n  const el = document.createElement('textarea');\r\n  el.value = text;\r\n  document.body.appendChild(el);\r\n  el.select();\r\n  document.execCommand('copy');\r\n  document.body.removeChild(el);\r\n}\r\n\r\nexport const openLink = (url:string) => {\r\n  if (isEnvBrowser()) {\r\n    window.open(url, '_blank');\r\n  } else {\r\n    // @ts-expect-error -- invokeNative exists in NUI\r\n    window.invokeNative('openLink', url);\r\n  } \r\n}","import { createTheme } from \"@mantine/core\";\r\n\r\nconst theme = createTheme({\r\n  primaryColor: \"dirk\",\r\n  primaryShade: 9,\r\n  defaultRadius: \"xxs\",\r\n  fontFamily: \"Akrobat Regular, sans-serif\",\r\n\r\n  radius:{\r\n    xxs: '0.2vh',\r\n    xs: '0.4vh',\r\n    sm: '0.75vh',\r\n    md: '1vh',\r\n    lg: '1.5vh',\r\n    xl: '2vh',\r\n    xxl: '3vh',\r\n  },\r\n\r\n  fontSizes: {\r\n    xxs: '1.2vh',\r\n    xs: '1.5vh',\r\n    sm: '1.8vh',\r\n    md: '2.2vh',\r\n    lg: '2.8vh',\r\n    xl: '3.3vh',\r\n    xxl: '3.8vh',\r\n  },\r\n\r\n  spacing:{\r\n    xxs: '0.5vh',\r\n    xs: '0.75vh',\r\n    sm: '1.5vh',\r\n    md: '2vh',\r\n    lg: '3vh',\r\n    xl: '4vh',\r\n    xxl: '5vh',\r\n  },\r\n\r\n  components:{\r\n    Progress:{\r\n      styles:{\r\n        root:{\r\n          backgroundColor: 'rgba(77, 77, 77, 0.4)',\r\n        },\r\n        \r\n      }\r\n    },\r\n\r\n    Select:{\r\n      styles:{\r\n        dropdown:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        input:{\r\n          padding: 'var(--mantine-spacing-sm)',\r\n        },\r\n        item:{\r\n          \r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        wrapper:{\r\n          \r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        option:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n\r\n      }\r\n    },\r\n    MultiSelect:{\r\n      styles:{\r\n        dropdown:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        pill:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        item:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        wrapper:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n        option:{\r\n          borderRadius: 'var(--mantine-radius-xxs)',\r\n        },\r\n\r\n      }\r\n    },\r\n    TextInput:{\r\n      styles:{\r\n        section:{\r\n          marginRight: '0.2vh',\r\n        },\r\n\r\n        input:{\r\n          padding: 'var(--mantine-spacing-sm)',\r\n        },\r\n\r\n       \r\n        \r\n      }\r\n    },\r\n  },\r\n\r\n  colors: {\r\n    dark:[\r\n      \"#ffffff\",\r\n      \"#e2e2e2\",\r\n      \"#c6c6c6\",\r\n      \"#aaaaaa\",\r\n      \"#8d8d8d\",\r\n      \"#717171\",\r\n      \"#555555\",\r\n      \"#393939\",\r\n      \"#1c1c1c\",\r\n      \"#000000\",\r\n    ],\r\n    dirk:[\r\n      \"#ffffff\",\r\n      \"#f3fce9\",\r\n      \"#dbf5bd\",\r\n      \"#c3ee91\",\r\n      \"#ace765\",\r\n      \"#94e039\",\r\n      \"#7ac61f\",\r\n      \"#5f9a18\",\r\n      \"#29420a\",\r\n      \"#446e11\",\r\n    ],\r\n  },\r\n});\r\n\r\n\r\nexport default theme;","import '@mantine/core/styles.css';\r\nimport '@mantine/notifications/styles.css';\r\nimport './styles/fonts.css';\r\nimport './styles/scrollBar.css';\r\nimport './styles/tornEdge.css';\r\n\r\n\r\nimport { library } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { fab } from \"@fortawesome/free-brands-svg-icons\";\r\nimport { far } from \"@fortawesome/free-regular-svg-icons\";\r\nimport { fas } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { BackgroundImage, MantineColorShade, MantineProvider, MantineThemeOverride } from '@mantine/core';\r\nimport { isEnvBrowser } from '@/utils';\r\nimport { create } from 'zustand';\r\nimport theme from '@/theme';\r\nimport { useEffect, useMemo } from 'react';\r\nlibrary.add(fas, far, fab);\r\n\r\nexport type DirkProviderProps = {\r\n  fakeBackground?: boolean;\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const useSettings = create<{\r\n  game: 'rdr3' | 'fivem';\r\n  primaryColor: string;\r\n  primaryShade: number;\r\n  customTheme: Record<string, string[]>;\r\n}>((set) => ({\r\n  game: 'rdr3',\r\n  primaryColor: 'teal',\r\n  primaryShade: 6,\r\n  customTheme: {},\r\n}));\r\n\r\n\r\n\r\nexport function DirkProvider(props: DirkProviderProps) {\r\n  const primaryColor = useSettings((data) => data.primaryColor);\r\n  const primaryShade = useSettings((data) => data.primaryShade);\r\n  const customTheme = useSettings((data) => data.customTheme);\r\n  const game = useSettings((data) => data.game);\r\n  // Memoize the merged theme to avoid unnecessary recalculations\r\n  const mergedTheme = useMemo<MantineThemeOverride>(() => ({\r\n    ...theme,\r\n    primaryColor: primaryColor,\r\n    primaryShade: primaryShade as MantineColorShade,\r\n    colors: {\r\n      ...theme.colors,\r\n      ...customTheme, // Custom theme colors will override/extend base colors\r\n    },\r\n  }), [primaryColor, primaryShade, customTheme]);\r\n\r\n  useEffect(() => {\r\n    document.fonts.ready.then(() => {\r\n document.body.style.fontFamily = \r\n      game === 'rdr3' ? '\"Red Dead\", sans-serif' :\r\n      game === 'fivem' ? '\"Akrobat Regular\", sans-serif' :\r\n      'sans-serif';\r\n    console.log(`Game set to ${game}, applied corresponding font family.: ${document.body.style.fontFamily}`);\r\n    });\r\n  }, [game]);\r\n\r\n  return (\r\n    <MantineProvider theme={mergedTheme} defaultColorScheme='dark'>\r\n      <Wrapper>\r\n        {props.children}\r\n      </Wrapper>\r\n    </MantineProvider>\r\n  );\r\n}\r\n\r\nfunction Wrapper({ children }: { children: React.ReactNode }) {\r\n  const game = useSettings((data) => data.game);\r\n  return isEnvBrowser() ? ( \r\n    <BackgroundImage w='100vw' h='100vh' style={{overflow:'hidden'}}\r\n      src={game === 'fivem' ?\r\n        \"https://i.ytimg.com/vi/TOxuNbXrO28/maxresdefault.jpg\"\r\n        : \"https://raw.githubusercontent.com/Jump-On-Studios/RedM-jo_libs/refs/heads/main/source-repositories/Menu/public/assets/images/background_dev.jpg\"}\r\n    >  \r\n      {children}\r\n    </BackgroundImage>\r\n  ) : (\r\n    <>{children}</>\r\n  )\r\n}\r\n\r\n"]}

package/dist/styles/tornEdge.css

@@ -0,0 +1,30 @@
+.torn-edge-wrapper {
+  position: relative;
+  isolation: isolate;
+  border-radius: inherit;
+  overflow: visible;
+}
+
+.torn-edge-wrapper::before {
+  content: "";
+  position: absolute;
+  inset: -1.5px;
+  background: inherit;
+  border: inherit;
+  border-radius: inherit;
+  filter: url(#torn-edge-filter);
+  mix-blend-mode: screen; /* best for dark panels */
+  opacity: 0.95; /* slightly brighter */
+  z-index: -1;
+  pointer-events: none;
+
+  /* Add a faint inner glow + edge lift for contrast */
+  box-shadow:
+    0 0 10px rgba(255, 255, 255, 0.08) inset,
+    0 0 12px rgba(0, 0, 0, 0.65);
+}
+
+.torn-edge-wrapper > * {
+  position: relative;
+  z-index: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dirk-cfx-react",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/styles/tornEdge.css

@@ -0,0 +1,30 @@
+.torn-edge-wrapper {
+  position: relative;
+  isolation: isolate;
+  border-radius: inherit;
+  overflow: visible;
+}
+
+.torn-edge-wrapper::before {
+  content: "";
+  position: absolute;
+  inset: -1.5px;
+  background: inherit;
+  border: inherit;
+  border-radius: inherit;
+  filter: url(#torn-edge-filter);
+  mix-blend-mode: screen; /* best for dark panels */
+  opacity: 0.95; /* slightly brighter */
+  z-index: -1;
+  pointer-events: none;
+
+  /* Add a faint inner glow + edge lift for contrast */
+  box-shadow:
+    0 0 10px rgba(255, 255, 255, 0.08) inset,
+    0 0 12px rgba(0, 0, 0, 0.65);
+}
+
+.torn-edge-wrapper > * {
+  position: relative;
+  z-index: 0;
+}