dirk-cfx-react 1.0.36 → 1.0.38

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Segment, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useNavigation, useNavigationStore } from './components/index.cjs';
+export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
 export { InitialFetch, InternalEvent, SkillSettings, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useProfanityStore } from './utils/index.cjs';
 export { TornEdgeSVGFilter, useNuiEvent, useTornEdges } from './hooks/index.cjs';
 export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, Segment, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useNavigation, useNavigationStore } from './components/index.js';
+export { BorderedIcon, BorderedIconProps, ButtonProps, Counter, FloatingParticles, FloatingParticlesProps, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, NavigationStore, ParticleState, ProgressProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, Title, TitleProps, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
 export { InitialFetch, InternalEvent, SkillSettings, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useProfanityStore } from './utils/index.js';
 export { TornEdgeSVGFilter, useNuiEvent, useTornEdges } from './hooks/index.js';
 export { DirkProvider, DirkProviderProps, useSettings } from './providers/index.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { createTheme, Flex, Text, Image, MantineProvider, BackgroundImage, useMantineTheme } from '@mantine/core';
+import { createTheme, Flex, Text, Image, MantineProvider, BackgroundImage, useMantineTheme, alpha } from '@mantine/core';
 import { createContext, useRef, useEffect, useMemo, useState, useContext } from 'react';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
@@ -15,6 +15,7 @@ import { jsx, Fragment, jsxs } 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';
 
 // src/components/BorderedIcon.tsx
 
@@ -163,11 +164,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha) {
+function colorWithAlpha(color, alpha2) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha2})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -175,12 +176,12 @@ function colorWithAlpha(color, alpha) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha2})`;
   }
   if (/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(color)) {
     const result = color.match(/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/);
     if (result) {
-      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha2})`;
     }
   }
   return color;
@@ -714,7 +715,7 @@ function getLevelFromXP(xp, levelMap, settings) {
   return settings.maxLevel;
 }
 function createSkill(defaultSettings) {
-  const useStore2 = create((set) => ({
+  const useStore3 = create((set) => ({
     settings: defaultSettings,
     levelMap: generateLevelMap(defaultSettings),
     setSettings: (updater) => set((state) => {
@@ -726,7 +727,7 @@ function createSkill(defaultSettings) {
     })
   }));
   const useSkill = (xp) => {
-    const { settings, levelMap } = useStore2();
+    const { settings, levelMap } = useStore3();
     return useMemo(() => {
       const currentLevel = getLevelFromXP(xp, levelMap, settings);
       const nextLevel = Math.min(currentLevel + 1, settings.maxLevel);
@@ -748,12 +749,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,
@@ -1414,7 +1415,7 @@ function SegmentedControl(props) {
       bg: "rgba(33, 33, 33, 0.6)",
       w: props.w || "fit-content",
       style: {
-        borderRadius: theme2.radius.xs,
+        borderRadius: props.enableRadius !== false ? theme2.radius.xs : 0,
         overflow: "hidden"
       },
       ...props,
@@ -1438,6 +1439,7 @@ function SegmentedControl(props) {
               icon: item.icon,
               rightSection: item.rightSection,
               fz: props.fz,
+              color: props.color,
               selected: !props.multi ? props.value === item.value : Array.isArray(props.value) && props.value.includes(item.value),
               onClick: () => {
                 if (props.multi) {
@@ -1466,7 +1468,7 @@ function Segment(props) {
       direction: "column",
       align: "center",
       h: "100%",
-      bg: props.selected ? colorWithAlpha(theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.2) : "transparent",
+      bg: props.selected ? props.color ? alpha(props.color, 0.2) : colorWithAlpha(theme2.colors[theme2.primaryColor][theme2.primaryShade], 0.2) : "transparent",
       pos: "relative",
       style: {
         // position: "relative",
@@ -1488,10 +1490,10 @@ function Segment(props) {
                 {
                   icon: props.icon,
                   initial: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme2.colors[theme2.primaryColor][5] : "inherit"
                   },
                   animate: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme2.colors[theme2.primaryColor][5] : "inherit"
                   },
                   exit: {
                     color: "inherit"
@@ -1507,10 +1509,10 @@ function Segment(props) {
                 {
                   size: props.fz || "xs",
                   initial: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme2.colors[theme2.primaryColor][5] : "inherit"
                   },
                   animate: {
-                    color: props.selected ? theme2.colors[theme2.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme2.colors[theme2.primaryColor][5] : "inherit"
                   },
                   exit: {
                     color: "inherit"
@@ -1546,7 +1548,7 @@ function Segment(props) {
               left: 0,
               right: 0,
               height: "0.2vh",
-              backgroundColor: theme2.colors[theme2.primaryColor][5],
+              backgroundColor: props.color || theme2.colors[theme2.primaryColor][5],
               transformOrigin: "center"
             }
           }
@@ -1748,7 +1750,156 @@ function Title(props) {
     }
   );
 }
+function Modal() {
+  const active = useModal((state) => state.active);
+  const { hideModal } = useModalActions();
+  const ref = useClickOutside(() => {
+    if (!active) return;
+    if (active.clickOutside == false) return;
+    if (active) {
+      hideModal();
+    }
+  });
+  const theme2 = useMantineTheme();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: active && /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+              Flex,
+              {
+                direction: "column",
+                w: "100%",
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      w: "100%",
+                      align: "center",
+                      gap: "xs",
+                      children: [
+                        active.icon && /* @__PURE__ */ jsx(
+                          FontAwesomeIcon,
+                          {
+                            icon: active.icon,
+                            style: {
+                              fontSize: theme2.fontSizes.xs
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            size: "sm",
+                            children: active.title
+                          }
+                        ),
+                        /* @__PURE__ */ 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__ */ jsx(
+                    Text,
+                    {
+                      size: "xs",
+                      c: "rgba(255, 255, 255, 0.7)",
+                      children: active.description
+                    }
+                  )
+                ]
+              }
+            ),
+            active.children
+          ]
+        }
+      )
+    }
+  ) });
+}
+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 });
+  };
+  return { showModal, hideModal };
+}
 
-export { BorderedIcon, Counter, DirkProvider, FloatingParticles, InfoBox, InputContainer, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, Segment, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { BorderedIcon, Counter, DirkProvider, FloatingParticles, InfoBox, InputContainer, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, TornEdgeSVGFilter, colorWithAlpha, copyToClipboard, createSkill, fetchNui, initialFetches, internalEvent, isEnvBrowser, isProfanity, locale, localeStore, noop, numberToRoman, openLink, registerInitialFetch, runFetches, splitFAString, useAutoFetcher, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map