dirk-cfx-react 1.0.37 → 1.0.40

package/dist/index.cjs

@@ -17,6 +17,7 @@ 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 }; }
 
@@ -721,7 +722,7 @@ function getLevelFromXP(xp, levelMap, settings) {
   return settings.maxLevel;
 }
 function createSkill(defaultSettings) {
-  const useStore2 = zustand.create((set) => ({
+  const useStore3 = zustand.create((set) => ({
     settings: defaultSettings,
     levelMap: generateLevelMap(defaultSettings),
     setSettings: (updater) => set((state) => {
@@ -733,7 +734,7 @@ function createSkill(defaultSettings) {
     })
   }));
   const useSkill = (xp) => {
-    const { settings, levelMap } = useStore2();
+    const { settings, levelMap } = useStore3();
     return react.useMemo(() => {
       const currentLevel = getLevelFromXP(xp, levelMap, settings);
       const nextLevel = Math.min(currentLevel + 1, settings.maxLevel);
@@ -755,12 +756,12 @@ function createSkill(defaultSettings) {
   };
   const skill = {
     get settings() {
-      return useStore2.getState().settings;
+      return useStore3.getState().settings;
     },
     setSettings: (updater) => {
-      useStore2.getState().setSettings(updater);
+      useStore3.getState().setSettings(updater);
     },
-    useSettings: () => useStore2((state) => state.settings)
+    useSettings: () => useStore3((state) => state.settings)
   };
   return {
     skill,
@@ -1756,6 +1757,155 @@ function Title(props) {
     }
   );
 }
+var ModalContext = react.createContext(null);
+function useModal(selector) {
+  const modal = react.useContext(ModalContext);
+  if (!modal) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return zustand.useStore(modal, selector);
+}
+function ModalProvider({ children, defaultPage }) {
+  const storeRef = react.useRef(
+    zustand.create(() => ({
+      active: null
+    }))
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalContext.Provider, { value: storeRef.current, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Modal, {}),
+    children
+  ] });
+}
+function useModalActions() {
+  const modal = react.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 });
+  };
+  return { showModal, hideModal };
+}
+function Modal() {
+  const active = useModal((state) => state.active);
+  const { hideModal } = useModalActions();
+  const ref = hooks.useClickOutside(() => {
+    if (!active) return;
+    if (active.clickOutside == false) return;
+    if (active) {
+      hideModal();
+    }
+  });
+  const theme2 = core.useMantineTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && /* @__PURE__ */ jsxRuntime.jsx(
+    MotionFlex,
+    {
+      h: "100%",
+      w: "100%",
+      bg: "rgba(0, 0, 0, 0.3)",
+      pos: "absolute",
+      style: {
+        zIndex: 2e3,
+        filter: "drop-shadow(0 0 2vh black)"
+      },
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      align: "center",
+      justify: "center",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        MotionFlex,
+        {
+          pos: "absolute",
+          top: "50%",
+          left: "50%",
+          ref,
+          w: active.width || "40%",
+          style: {
+            transform: "translate(-50%, -50%)",
+            borderRadius: theme2.radius.xs,
+            boxShadow: theme2.shadows.xl,
+            zIndex: 2100
+          },
+          bg: "rgba(48, 48, 48, 0.84)",
+          initial: { scale: 0.8, opacity: 0, transform: "translate(-50%, -50%)" },
+          animate: { scale: 1, opacity: 1, transform: "translate(-50%, -50%)" },
+          exit: { scale: 0.8, opacity: 0, transform: "translate(-50%, -50%)" },
+          p: "sm",
+          direction: "column",
+          maw: "70%",
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              core.Flex,
+              {
+                direction: "column",
+                w: "100%",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    core.Flex,
+                    {
+                      w: "100%",
+                      align: "center",
+                      gap: "xs",
+                      children: [
+                        active.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                          reactFontawesome.FontAwesomeIcon,
+                          {
+                            icon: active.icon,
+                            style: {
+                              fontSize: theme2.fontSizes.xs
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          core.Text,
+                          {
+                            size: "sm",
+                            children: active.title
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          MotionIcon,
+                          {
+                            icon: "times",
+                            color: "rgba(255, 255, 255, 0.7)",
+                            whileHover: {
+                              scale: 1.1,
+                              filter: "brightness(1.2)"
+                            },
+                            style: {
+                              marginLeft: "auto",
+                              cursor: "pointer",
+                              fontSize: theme2.fontSizes.sm
+                            },
+                            onClick: () => {
+                              hideModal();
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  active.description && /* @__PURE__ */ jsxRuntime.jsx(
+                    core.Text,
+                    {
+                      size: "xs",
+                      c: "rgba(255, 255, 255, 0.7)",
+                      children: active.description
+                    }
+                  )
+                ]
+              }
+            ),
+            active.children
+          ]
+        }
+      )
+    }
+  ) });
+}
 
 exports.BorderedIcon = BorderedIcon;
 exports.Counter = Counter;
@@ -1763,6 +1913,8 @@ exports.DirkProvider = DirkProvider;
 exports.FloatingParticles = FloatingParticles;
 exports.InfoBox = InfoBox;
 exports.InputContainer = InputContainer;
+exports.ModalContext = ModalContext;
+exports.ModalProvider = ModalProvider;
 exports.MotionFlex = MotionFlex;
 exports.MotionIcon = MotionIcon;
 exports.MotionImage = MotionImage;
@@ -1791,6 +1943,8 @@ exports.registerInitialFetch = registerInitialFetch;
 exports.runFetches = runFetches;
 exports.splitFAString = splitFAString;
 exports.useAutoFetcher = useAutoFetcher;
+exports.useModal = useModal;
+exports.useModalActions = useModalActions;
 exports.useNavigation = useNavigation;
 exports.useNavigationStore = useNavigationStore;
 exports.useNuiEvent = useNuiEvent;