dirk-cfx-react 1.0.0 → 1.0.1

package/dist/components/index.js

@@ -1,11 +1,9 @@
-'use strict';
-
-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');
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Flex, Text, Image, useMantineTheme } from '@mantine/core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
+import { createContext, useRef, useState, useEffect, useContext } from 'react';
+import { create, useStore } from 'zustand';
 
 // src/components/BorderedIcon.tsx
 
@@ -177,9 +175,9 @@ function colorWithAlpha(color, alpha) {
   return color;
 }
 function BorderedIcon(props) {
-  const theme = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactFontawesome.FontAwesomeIcon,
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsx(
+    FontAwesomeIcon,
     {
       icon: props.icon,
       color: colorWithAlpha(props.color ? props.color : theme.colors[theme.primaryColor][theme.primaryShade], props.hovered ? 0.9 : 0.9),
@@ -198,12 +196,12 @@ function BorderedIcon(props) {
     }
   );
 }
-var MotionFlex = framerMotion.motion(core.Flex);
-var MotionText = framerMotion.motion(core.Text);
-var MotionIcon = framerMotion.motion(reactFontawesome.FontAwesomeIcon);
-var MotionImage = framerMotion.motion(core.Image);
+var MotionFlex = motion(Flex);
+var MotionText = motion(Text);
+var MotionIcon = motion(FontAwesomeIcon);
+var MotionImage = motion(Image);
 function Counter(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: props.count > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: props.count > 0 && /* @__PURE__ */ jsx(
     MotionFlex,
     {
       initial: { opacity: 0 },
@@ -238,10 +236,10 @@ var FloatingParticles = ({
   mouseRepelStrength = 50,
   backgroundColor = "transparent"
 }) => {
-  const containerRef = react.useRef(null);
-  const [particles, setParticles] = react.useState([]);
-  const mouseX = framerMotion.useMotionValue(0);
-  const mouseY = framerMotion.useMotionValue(0);
+  const containerRef = useRef(null);
+  const [particles, setParticles] = useState([]);
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
   const durationMap = {
     slow: { base: 10, variance: 10 },
     medium: { base: 2, variance: 2 },
@@ -252,7 +250,7 @@ var FloatingParticles = ({
     const x = Math.sin(seed) * 1e4;
     return x - Math.floor(x);
   };
-  react.useEffect(() => {
+  useEffect(() => {
     if (!containerRef.current) return;
     const bounds = containerRef.current.getBoundingClientRect();
     const newParticles = [...Array(particleCount)].map((_, i) => {
@@ -273,7 +271,7 @@ var FloatingParticles = ({
     });
     setParticles(newParticles);
   }, [particleCount, icons.length, duration.base, duration.variance]);
-  react.useEffect(() => {
+  useEffect(() => {
     if (!containerRef.current) return;
     const handleMouseMove = (e) => {
       const bounds = containerRef.current.getBoundingClientRect();
@@ -322,7 +320,7 @@ var FloatingParticles = ({
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
-  react.useEffect(() => {
+  useEffect(() => {
     const handleResize = () => {
       if (!containerRef.current) return;
       const bounds = containerRef.current.getBoundingClientRect();
@@ -345,7 +343,7 @@ var FloatingParticles = ({
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
@@ -358,8 +356,8 @@ var FloatingParticles = ({
         backgroundColor,
         ...style
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: particles.map((particle) => /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.div,
+      children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: particles.map((particle) => /* @__PURE__ */ jsx(
+        motion.div,
         {
           style: {
             position: "absolute",
@@ -399,7 +397,7 @@ var FloatingParticles = ({
               ease: "easeInOut"
             }
           },
-          children: particle.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: particle.icon, style: { width: "70%", height: "70%" } }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+          children: particle.icon ? /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: particle.icon, style: { width: "70%", height: "70%" } }) }) : /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -417,12 +415,12 @@ var FloatingParticles = ({
   );
 };
 function Icon(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  return /* @__PURE__ */ jsx(Fragment, {});
 }
 function InfoBox(props) {
-  const theme = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    core.Flex,
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
+    Flex,
     {
       w: "fit-content",
       h: "fit-content",
@@ -433,8 +431,8 @@ function InfoBox(props) {
       },
       align: "center",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Flex,
+        /* @__PURE__ */ jsx(
+          Flex,
           {
             miw: "4vh",
             p: "xxs",
@@ -442,8 +440,8 @@ function InfoBox(props) {
             direction: "column",
             justify: "center",
             align: "center",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              core.Text,
+            children: /* @__PURE__ */ jsx(
+              Text,
               {
                 c: "lightgrey",
                 size: "xxs",
@@ -457,8 +455,8 @@ function InfoBox(props) {
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.Flex,
+        /* @__PURE__ */ jsx(
+          Flex,
           {
             p: "xxs",
             flex: 1,
@@ -467,8 +465,8 @@ function InfoBox(props) {
             direction: "column",
             align: "center",
             justify: "center",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              core.Text,
+            children: /* @__PURE__ */ jsx(
+              Text,
               {
                 c: "lightgrey",
                 size: "xxs",
@@ -487,8 +485,8 @@ function InfoBox(props) {
   );
 }
 function InputContainer(props) {
-  const theme = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
     MotionFlex,
     {
       w: props.w || "100%",
@@ -506,20 +504,20 @@ function InputContainer(props) {
       },
       variants: props.variants,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          core.Flex,
+        /* @__PURE__ */ jsxs(
+          Flex,
           {
             align: "center",
             gap: "xs",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                core.Flex,
+              /* @__PURE__ */ jsxs(
+                Flex,
                 {
                   direction: "column",
                   gap: "xxs",
                   children: [
-                    props.title && /* @__PURE__ */ jsxRuntime.jsx(
-                      core.Text,
+                    props.title && /* @__PURE__ */ jsx(
+                      Text,
                       {
                         size: "sm",
                         style: {
@@ -531,8 +529,8 @@ function InputContainer(props) {
                         children: props.title
                       }
                     ),
-                    props.description && /* @__PURE__ */ jsxRuntime.jsx(
-                      core.Text,
+                    props.description && /* @__PURE__ */ jsx(
+                      Text,
                       {
                         size: "xs",
                         c: "rgba(255, 255, 255, 0.8)",
@@ -543,8 +541,8 @@ function InputContainer(props) {
                   ]
                 }
               ),
-              props.error && /* @__PURE__ */ jsxRuntime.jsx(
-                core.Text,
+              props.error && /* @__PURE__ */ jsx(
+                Text,
                 {
                   size: "xs",
                   c: theme.colors.red[9],
@@ -554,8 +552,8 @@ function InputContainer(props) {
                   children: props.error
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                core.Flex,
+              /* @__PURE__ */ jsx(
+                Flex,
                 {
                   ml: "auto",
                   children: props.rightSection
@@ -577,7 +575,7 @@ var click_sound_default = "../click_sound-PNCRRTM4.mp3";
 var hover_sound_default = "../hover_sound-NBUA222C.mp3";
 
 // src/hooks/useAudio/store.ts
-var useAudio = zustand.create(() => {
+var useAudio = create(() => {
   const audioRefs = {};
   const sounds = {
     click: click_sound_default,
@@ -628,7 +626,7 @@ function fetchOnLoad(eventName, data, mockData) {
     throw err;
   });
 }
-var localeStore = zustand.create((set, get) => {
+var localeStore = create((set, get) => {
   return {
     locales: {
       "OccupantsDesc": "Here you can view and manage the occupants of your traphouse. These occupants can be used mainly for selling drugs to the NPCs surrounding your traphouse. However they have other uses to so be careful who you add as an occupant."
@@ -648,7 +646,7 @@ fetchOnLoad("GET_LOCALES").then((data) => {
   localeStore.setState({ locales: data });
 });
 function SegmentedControl(props) {
-  const theme = core.useMantineTheme();
+  const theme = useMantineTheme();
   const play = useAudio((state) => state.play);
   const handleChange = (newValue) => {
     if (props.sounds) play("click");
@@ -656,8 +654,8 @@ function SegmentedControl(props) {
       props.onChange(newValue);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Flex,
+  return /* @__PURE__ */ jsx(
+    Flex,
     {
       bg: "rgba(33, 33, 33, 0.6)",
       w: props.w || "fit-content",
@@ -666,8 +664,8 @@ function SegmentedControl(props) {
         overflow: "hidden"
       },
       ...props,
-      children: props.items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.div,
+      children: props.items.map((item, index) => /* @__PURE__ */ jsx(
+        motion.div,
         {
           initial: { x: -100, opacity: 0 },
           animate: { x: 0, opacity: 1 },
@@ -678,7 +676,7 @@ function SegmentedControl(props) {
             alignItems: "center",
             flex: 1
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsx(
             Segment,
             {
               label: item.label,
@@ -705,8 +703,8 @@ function SegmentedControl(props) {
   );
 }
 function Segment(props) {
-  const theme = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsxs(
     MotionFlex,
     {
       onClick: props.onClick,
@@ -724,14 +722,14 @@ function Segment(props) {
       whileHover: { scale: 1.05 },
       whileTap: { scale: 0.95 },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          core.Flex,
+        /* @__PURE__ */ jsxs(
+          Flex,
           {
             align: "center",
             gap: "xs",
             p: "xs",
             children: [
-              props.icon && /* @__PURE__ */ jsxRuntime.jsx(
+              props.icon && /* @__PURE__ */ jsx(
                 MotionIcon,
                 {
                   icon: props.icon,
@@ -750,7 +748,7 @@ function Segment(props) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsx(
                 MotionText,
                 {
                   size: props.fz || "xs",
@@ -775,8 +773,8 @@ function Segment(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
+        /* @__PURE__ */ jsx(
+          motion.div,
           {
             initial: false,
             animate: {
@@ -803,33 +801,33 @@ function Segment(props) {
     }
   );
 }
-var NavigationContext = react.createContext(null);
+var NavigationContext = createContext(null);
 function useNavigation(selector) {
-  const navigation = react.useContext(NavigationContext);
+  const navigation = useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigation must be used within a NavigationProvider");
   }
-  return zustand.useStore(navigation, selector);
+  return useStore(navigation, selector);
 }
 function useNavigationStore() {
-  const navigation = react.useContext(NavigationContext);
+  const navigation = useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigationStore must be used within a NavigationProvider");
   }
   return navigation;
 }
 function NavigationProvider({ children, defaultPage }) {
-  const storeRef = react.useRef(
-    zustand.create(() => ({
+  const storeRef = useRef(
+    create(() => ({
       pageId: defaultPage || "home"
     }))
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.Provider, { value: storeRef.current, children });
+  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value: storeRef.current, children });
 }
 function NavBar(props) {
   const pageId = useNavigation((state) => state.pageId);
   const store = useNavigationStore();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     SegmentedControl,
     {
       sounds: true,
@@ -888,7 +886,7 @@ function SegmentedProgress(props) {
   const progressPerSegment = 100 / props.segments;
   const filledSegments = Math.floor(props.progress / progressPerSegment);
   const partialFill = props.progress % progressPerSegment / progressPerSegment;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsx(
     MotionFlex,
     {
       w: "100%",
@@ -900,8 +898,8 @@ function SegmentedProgress(props) {
       children: [...Array(props.segments)].map((_, index) => {
         const isFilled = index < filledSegments;
         const isPartial = index === filledSegments;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
+        return /* @__PURE__ */ jsx(
+          motion.div,
           {
             variants: itemVariants,
             style: {
@@ -919,9 +917,9 @@ function SegmentedProgress(props) {
   );
 }
 function Title(props) {
-  const theme = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.Flex,
+  const theme = useMantineTheme();
+  return /* @__PURE__ */ jsx(
+    Flex,
     {
       mt: props.mt,
       direction: "column",
@@ -933,20 +931,20 @@ function Title(props) {
         userSelect: "none",
         borderBottom: props.removeBorder ? "none" : `0.2vh solid ${props.borderColor || colorWithAlpha(theme.colors[theme.primaryColor][9], 0.5)}`
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        core.Flex,
+      children: /* @__PURE__ */ jsxs(
+        Flex,
         {
           align: "center",
           justify: "center",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              core.Flex,
+            /* @__PURE__ */ jsxs(
+              Flex,
               {
                 align: "center",
                 gap: "sm",
                 pr: "xs",
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsx(
                     BorderedIcon,
                     {
                       icon: props.icon,
@@ -954,20 +952,20 @@ function Title(props) {
                       color: props.iconColor
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    core.Flex,
+                  /* @__PURE__ */ jsxs(
+                    Flex,
                     {
                       direction: "column",
                       gap: "0.25vh",
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { p: "0", size: "sm", style: {
+                        /* @__PURE__ */ jsx(Text, { p: "0", size: "sm", style: {
                           lineHeight: theme.fontSizes.md,
                           fontFamily: "Akrobat Bold",
                           letterSpacing: "0.05em",
                           textTransform: "uppercase"
                         }, children: props.title }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          core.Text,
+                        /* @__PURE__ */ jsx(
+                          Text,
                           {
                             size: "xs",
                             c: "grey",
@@ -981,8 +979,8 @@ function Title(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              core.Flex,
+            /* @__PURE__ */ jsx(
+              Flex,
               {
                 ml: "auto",
                 align: "center",
@@ -997,24 +995,6 @@ function Title(props) {
   );
 }
 
-exports.BorderedIcon = BorderedIcon;
-exports.Counter = Counter;
-exports.FloatingParticles = FloatingParticles;
-exports.Icon = Icon;
-exports.InfoBox = InfoBox;
-exports.InputContainer = InputContainer;
-exports.MotionFlex = MotionFlex;
-exports.MotionIcon = MotionIcon;
-exports.MotionImage = MotionImage;
-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.useNavigation = useNavigation;
-exports.useNavigationStore = useNavigationStore;
+export { BorderedIcon, Counter, FloatingParticles, Icon, InfoBox, InputContainer, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, Segment, SegmentedControl, SegmentedProgress, Title, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map