dirk-cfx-react 1.0.46 → 1.0.49

package/dist/components/index.cjs

@@ -2,6 +2,12 @@
 
 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');
+var clickSoundUrl = require('../click_sound-PNCRRTM4.mp3');
+var hoverSoundUrl = require('../hover_sound-NBUA222C.mp3');
 require('@mantine/core/styles.css');
 require('@mantine/notifications/styles.css');
 require('./styles/notify.css');
@@ -12,12 +18,6 @@ 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');
-var zustand = require('zustand');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var framerMotion = require('framer-motion');
-var clickSoundUrl = require('../click_sound-PNCRRTM4.mp3');
-var hoverSoundUrl = require('../hover_sound-NBUA222C.mp3');
 var hooks = require('@mantine/hooks');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -25,8 +25,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var clickSoundUrl__default = /*#__PURE__*/_interopDefault(clickSoundUrl);
 var hoverSoundUrl__default = /*#__PURE__*/_interopDefault(hoverSoundUrl);
 
-// src/components/BorderedIcon.tsx
-
 // src/utils/colorWithAlpha.ts
 var colorNames = {
   AliceBlue: { r: 240, g: 248, b: 255 },
@@ -194,28 +192,15 @@ function colorWithAlpha(color, alpha2) {
   }
   return color;
 }
-fontawesomeSvgCore.library.add(freeSolidSvgIcons.fas, freeRegularSvgIcons.far, freeBrandsSvgIcons.fab);
-var useSettings = zustand.create((set) => ({
-  game: "fivem",
-  primaryColor: "dirk",
-  primaryShade: 9,
-  itemImgPath: "https://assets.dirkcfx.com/items/",
-  customTheme: {}
-}));
-function useTornEdges() {
-  const game = useSettings((state) => state.game);
-  return game === "rdr3" ? "torn-edge-wrapper" : "";
-}
 function BorderedIcon(props) {
   const theme = core.useMantineTheme();
-  const tornEdgeCSS = useTornEdges();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Flex,
+    reactFontawesome.FontAwesomeIcon,
     {
-      className: tornEdgeCSS,
-      justify: "center",
-      align: "center",
+      icon: props.icon,
+      color: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][theme.primaryShade], props.hovered ? 0.9 : 0.9),
       style: {
+        // backgroundColor: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7 as number], (props.hoverable ? (props.hovered ? 0.3 : 0.2) : 0.2)),
         backgroundColor: "rgba(0, 0, 0, 0.5)",
         padding: props.p || theme.spacing.xs,
         transition: "all 0.2s ease-in-out",
@@ -223,19 +208,9 @@ function BorderedIcon(props) {
         fontSize: props.fontSize ? props.fontSize : "2.5vh",
         borderRadius: theme.radius.xs,
         // border: `2px solid var(--mantine-primary-color-9)`,
-        // outline: `0.2vh solid ${colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][9], 0.8)}`,
+        outline: `0.2vh solid ${colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][9], 0.8)}`,
         boxShadow: `inset 0 0 2vh ${colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7], 0.5)}`
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactFontawesome.FontAwesomeIcon,
-        {
-          icon: props.icon,
-          color: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][theme.primaryShade], props.hovered ? 0.9 : 0.9),
-          style: {
-            // backgroundColor: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][7 as number], (props.hoverable ? (props.hovered ? 0.3 : 0.2) : 0.2)),
-          }
-        }
-      )
+      }
     }
   );
 }
@@ -906,6 +881,14 @@ function SegmentedProgress(props) {
     }
   );
 }
+fontawesomeSvgCore.library.add(freeSolidSvgIcons.fas, freeRegularSvgIcons.far, freeBrandsSvgIcons.fab);
+var useSettings = zustand.create((set) => ({
+  game: "fivem",
+  primaryColor: "dirk",
+  primaryShade: 9,
+  itemImgPath: "https://assets.dirkcfx.com/items/",
+  customTheme: {}
+}));
 function Title(props) {
   const game = useSettings((state) => state.game);
   const theme = core.useMantineTheme();
@@ -984,6 +967,93 @@ function Title(props) {
     }
   );
 }
+function LevelBanner(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MotionFlex,
+    {
+      w: "35vh",
+      pos: "absolute",
+      left: "50%",
+      align: "center",
+      gap: "xs",
+      style: {
+        borderRadius: core.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__ */ jsxRuntime.jsxs(
+          core.Flex,
+          {
+            w: "100%",
+            justify: "space-between",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                core.Text,
+                {
+                  size: "xxs",
+                  c: "rgba(255, 255, 255, 0.9)",
+                  style: {
+                    fontFamily: "Akrobat Bold",
+                    letterSpacing: "0.1em"
+                  },
+                  children: [
+                    "LVL ",
+                    props.level
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                core.Text,
+                {
+                  size: "xxs",
+                  c: "rgba(255, 255, 255, 0.7)",
+                  style: {
+                    fontFamily: "Akrobat Bold",
+                    letterSpacing: "0.1em"
+                  },
+                  children: [
+                    props.exp,
+                    "/",
+                    props.nextLevelXP,
+                    " XP"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                core.Text,
+                {
+                  size: "xxs",
+                  c: "rgba(255, 255, 255, 0.7)",
+                  style: {
+                    fontFamily: "Akrobat Bold",
+                    letterSpacing: "0.1em"
+                  },
+                  children: [
+                    "LVL ",
+                    props.level + 1
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Progress,
+          {
+            color: props.color,
+            w: "100%",
+            size: "sm",
+            value: props.progressToLevel
+          }
+        )
+      ]
+    }
+  );
+}
 var ModalContext = react.createContext(null);
 function useModal(selector) {
   const modal = react.useContext(ModalContext);
@@ -1139,6 +1209,7 @@ exports.Counter = Counter;
 exports.FloatingParticles = FloatingParticles;
 exports.InfoBox = InfoBox;
 exports.InputContainer = InputContainer;
+exports.LevelBanner = LevelBanner;
 exports.ModalContext = ModalContext;
 exports.ModalProvider = ModalProvider;
 exports.MotionFlex = MotionFlex;