dirk-cfx-react 1.1.72 → 1.1.73

package/dist/components/index.cjs

@@ -1299,7 +1299,11 @@ async function fetchNui(eventName, data, mockData) {
     return {};
   }
   const overrideResourceName = useSettings.getState().overideResourceName;
-  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : overrideResourceName ? overrideResourceName : "dirk-cfx-react";
+  const hasResourceContext = typeof window.GetParentResourceName === "function" || !!overrideResourceName;
+  if (!hasResourceContext) {
+    return mockData ?? {};
+  }
+  const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : overrideResourceName;
   try {
     const resp = await fetch(`https://${resourceName}/${eventName}`, options);
     return await resp.json();
@@ -2472,9 +2476,25 @@ function SegmentedProgress(props) {
     }
   );
 }
+function getSizePreset(size, themeMdFontSize) {
+  switch (size) {
+    case "xs":
+      return { iconFontSize: "1.2vh", iconPadding: "xxs", titleSize: "xxs", titleLineHeight: "1.2vh", descriptionSize: "xxs", innerGap: "xs", bottomPad: "xs" };
+    case "sm":
+      return { iconFontSize: "1.6vh", iconPadding: "xxs", titleSize: "xs", titleLineHeight: "1.6vh", descriptionSize: "xxs", innerGap: "xs", bottomPad: "xs" };
+    case "lg":
+      return { iconFontSize: "2.6vh", iconPadding: "sm", titleSize: "md", titleLineHeight: "2.6vh", descriptionSize: "sm", innerGap: "sm", bottomPad: "sm" };
+    case "xl":
+      return { iconFontSize: "3.2vh", iconPadding: "sm", titleSize: "lg", titleLineHeight: "3.2vh", descriptionSize: "md", innerGap: "md", bottomPad: "md" };
+    case "md":
+    default:
+      return { iconFontSize: themeMdFontSize, iconPadding: "xs", titleSize: "sm", titleLineHeight: themeMdFontSize, descriptionSize: "xs", innerGap: "sm", bottomPad: "sm" };
+  }
+}
 function Title(props) {
   const game = useSettings((state) => state.game);
   const theme = core.useMantineTheme();
+  const preset = getSizePreset(props.size ?? "md", theme.fontSizes.md);
   return /* @__PURE__ */ jsxRuntime.jsx(
     core.Flex,
     {
@@ -2483,71 +2503,50 @@ function Title(props) {
       gap: "xs",
       w: props.w || "100%",
       p: props.p || "unset",
-      pb: !props.p ? "sm" : props.p,
+      pb: !props.p ? preset.bottomPad : props.p,
       style: {
         userSelect: "none",
         borderBottom: props.removeBorder ? "none" : `0.3vh solid ${props.borderColor || colorWithAlpha(theme.colors[theme.primaryColor][9], 0.5)}`
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        core.Flex,
-        {
-          align: "center",
-          justify: "center",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              core.Flex,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", justify: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: preset.innerGap, pr: "xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BorderedIcon,
+            {
+              icon: props.icon,
+              fontSize: preset.iconFontSize,
+              color: props.iconColor,
+              p: preset.iconPadding
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "0.25vh", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              core.Text,
               {
-                align: "center",
-                gap: "sm",
-                pr: "xs",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    BorderedIcon,
-                    {
-                      icon: props.icon,
-                      fontSize: theme.fontSizes.md,
-                      color: props.iconColor
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    core.Flex,
-                    {
-                      direction: "column",
-                      gap: "0.25vh",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { p: "0", size: "sm", style: {
-                          lineHeight: theme.fontSizes.md,
-                          fontFamily: game == "fivem" ? "Akrobat Bold" : "Red Dead",
-                          letterSpacing: "0.05em",
-                          textTransform: "uppercase"
-                        }, children: props.title }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          core.Text,
-                          {
-                            size: "xs",
-                            c: "grey",
-                            style: { whiteSpace: "normal", wordWrap: "break-word" },
-                            children: props.description
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
+                p: "0",
+                size: preset.titleSize,
+                style: {
+                  lineHeight: preset.titleLineHeight,
+                  fontFamily: game == "fivem" ? "Akrobat Bold" : "Red Dead",
+                  letterSpacing: "0.05em",
+                  textTransform: "uppercase"
+                },
+                children: props.title
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              core.Flex,
+              core.Text,
               {
-                ml: "auto",
-                align: "center",
-                gap: "xs",
-                children: props.rightSection
+                size: preset.descriptionSize,
+                c: "grey",
+                style: { whiteSpace: "normal", wordWrap: "break-word" },
+                children: props.description
               }
             )
-          ]
-        }
-      )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { ml: "auto", align: "center", gap: "xs", children: props.rightSection })
+      ] })
     }
   );
 }
@@ -4168,8 +4167,8 @@ function ConfigPanelInner({
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { size: "1.4vh", color })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", style: { minWidth: 0, lineHeight: 1 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "lg", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", truncate: true, children: title }),
+              /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", style: { minWidth: 0, flex: 1, lineHeight: 1, overflow: "hidden" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "md", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", truncate: true, children: title }),
                 subtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.08em", c: color, truncate: true, children: subtitle })
               ] })
             ] }),
@@ -5110,6 +5109,17 @@ function AdminPageTitle(props) {
     /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", tt: "uppercase", lts: "0.1em", size: "sm", c: "rgba(255,255,255,0.6)", children: locale(props.title) })
   ] });
 }
+var placementStyle = (placement) => {
+  switch (placement) {
+    case "top-center":
+      return { top: "1vh", left: "50%", transform: "translateX(-50%)" };
+    case "top-right":
+      return { top: "1vh", right: "1vh" };
+    case "top-left":
+    default:
+      return { top: "1vh", left: "1vh" };
+  }
+};
 var loadPersistedState = (storageKey) => {
   try {
     const raw = localStorage.getItem(storageKey);
@@ -5128,7 +5138,8 @@ function TestBed({
   items,
   storageKey = "testbed:open-state",
   disablePersistence = false,
-  title = "TestBed"
+  title = "TestBed",
+  placement = "top-left"
 }) {
   const [open, setOpen] = react.useState(false);
   const itemsRef = react.useRef(items);
@@ -5158,8 +5169,7 @@ function TestBed({
     {
       style: {
         position: "fixed",
-        top: "1vh",
-        left: "1vh",
+        ...placementStyle(placement),
         zIndex: 2147483647,
         pointerEvents: "auto",
         fontSize: "1.4vh"