dirk-cfx-react 1.0.36 → 1.0.38

package/dist/components/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 }; }
 
@@ -170,11 +171,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);
@@ -182,12 +183,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;
@@ -645,7 +646,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,
@@ -669,6 +670,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) {
@@ -697,7 +699,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 ? core.alpha(props.color, 0.2) : colorWithAlpha(theme.colors[theme.primaryColor][theme.primaryShade], 0.2) : "transparent",
       pos: "relative",
       style: {
         // position: "relative",
@@ -719,10 +721,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"
@@ -738,10 +740,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"
@@ -777,7 +779,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"
             }
           }
@@ -979,12 +981,163 @@ function Title(props) {
     }
   );
 }
+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 theme = 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: 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__ */ 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: theme.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: theme.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
+          ]
+        }
+      )
+    }
+  ) });
+}
+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 };
+}
 
 exports.BorderedIcon = BorderedIcon;
 exports.Counter = Counter;
 exports.FloatingParticles = FloatingParticles;
 exports.InfoBox = InfoBox;
 exports.InputContainer = InputContainer;
+exports.ModalContext = ModalContext;
+exports.ModalProvider = ModalProvider;
 exports.MotionFlex = MotionFlex;
 exports.MotionIcon = MotionIcon;
 exports.MotionImage = MotionImage;
@@ -992,10 +1145,11 @@ exports.MotionText = MotionText;
 exports.NavBar = NavBar;
 exports.NavigationContext = NavigationContext;
 exports.NavigationProvider = NavigationProvider;
-exports.Segment = Segment;
 exports.SegmentedControl = SegmentedControl;
 exports.SegmentedProgress = SegmentedProgress;
 exports.Title = Title;
+exports.useModal = useModal;
+exports.useModalActions = useModalActions;
 exports.useNavigation = useNavigation;
 exports.useNavigationStore = useNavigationStore;
 //# sourceMappingURL=index.cjs.map