dirk-cfx-react 1.0.36 → 1.0.38

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Flex, Text, Image, useMantineTheme } from '@mantine/core';
+import { Flex, Text, Image, useMantineTheme, alpha } from '@mantine/core';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
 import './styles/fonts.css';
@@ -15,6 +15,7 @@ import { jsx, 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;
@@ -638,7 +639,7 @@ function SegmentedControl(props) {
       bg: "rgba(33, 33, 33, 0.6)",
       w: props.w || "fit-content",
       style: {
-        borderRadius: theme.radius.xs,
+        borderRadius: props.enableRadius !== false ? theme.radius.xs : 0,
         overflow: "hidden"
       },
       ...props,
@@ -662,6 +663,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) {
@@ -690,7 +692,7 @@ function Segment(props) {
       direction: "column",
       align: "center",
       h: "100%",
-      bg: props.selected ? colorWithAlpha(theme.colors[theme.primaryColor][theme.primaryShade], 0.2) : "transparent",
+      bg: props.selected ? props.color ? alpha(props.color, 0.2) : colorWithAlpha(theme.colors[theme.primaryColor][theme.primaryShade], 0.2) : "transparent",
       pos: "relative",
       style: {
         // position: "relative",
@@ -712,10 +714,10 @@ function Segment(props) {
                 {
                   icon: props.icon,
                   initial: {
-                    color: props.selected ? theme.colors[theme.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "inherit"
                   },
                   animate: {
-                    color: props.selected ? theme.colors[theme.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "inherit"
                   },
                   exit: {
                     color: "inherit"
@@ -731,10 +733,10 @@ function Segment(props) {
                 {
                   size: props.fz || "xs",
                   initial: {
-                    color: props.selected ? theme.colors[theme.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "inherit"
                   },
                   animate: {
-                    color: props.selected ? theme.colors[theme.primaryColor][5] : "inherit"
+                    color: props.selected ? props.color || theme.colors[theme.primaryColor][5] : "inherit"
                   },
                   exit: {
                     color: "inherit"
@@ -770,7 +772,7 @@ function Segment(props) {
               left: 0,
               right: 0,
               height: "0.2vh",
-              backgroundColor: theme.colors[theme.primaryColor][5],
+              backgroundColor: props.color || theme.colors[theme.primaryColor][5],
               transformOrigin: "center"
             }
           }
@@ -972,7 +974,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 theme = 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: theme.radius.xs,
+            boxShadow: theme.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: theme.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: theme.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, FloatingParticles, InfoBox, InputContainer, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, Segment, SegmentedControl, SegmentedProgress, Title, useNavigation, useNavigationStore };
+export { BorderedIcon, Counter, FloatingParticles, InfoBox, InputContainer, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, SegmentedControl, SegmentedProgress, Title, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map