dirk-cfx-react 1.0.43 → 1.0.45

package/dist/index.js

@@ -5,6 +5,7 @@ import { create, createStore, useStore } from 'zustand';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import './styles/notify.css';
 import './styles/fonts.css';
 import './styles/scrollBar.css';
 import './styles/tornEdge.css';
@@ -318,9 +319,9 @@ function createFormStore(initialValues, validationRules, onSubmit) {
       });
       const rule = flatRules[path];
       if (rule) {
-        const error = rule(value, newValues);
-        if (error)
-          set((state) => ({ errors: setNested(state.errors, path, error) }));
+        const error2 = rule(value, newValues);
+        if (error2)
+          set((state) => ({ errors: setNested(state.errors, path, error2) }));
         else set((state) => ({ errors: deleteNested(state.errors, path) }));
       }
     },
@@ -331,9 +332,9 @@ function createFormStore(initialValues, validationRules, onSubmit) {
       const rule = flatRules[path];
       if (!rule) return true;
       const value = getNested(state.values, path);
-      const error = rule(value, state.values);
-      if (error) {
-        set((state2) => ({ errors: setNested(state2.errors, path, error) }));
+      const error2 = rule(value, state.values);
+      if (error2) {
+        set((state2) => ({ errors: setNested(state2.errors, path, error2) }));
         return false;
       } else {
         set((state2) => ({ errors: deleteNested(state2.errors, path) }));
@@ -347,10 +348,10 @@ function createFormStore(initialValues, validationRules, onSubmit) {
       for (const path in flatRules) {
         const rule = flatRules[path];
         const value = getNested(state.values, path);
-        const error = rule(value, state.values);
-        if (error) {
+        const error2 = rule(value, state.values);
+        if (error2) {
           isValid = false;
-          newErrors = setNested(newErrors, path, error);
+          newErrors = setNested(newErrors, path, error2);
         }
       }
       set({ errors: newErrors });
@@ -952,10 +953,20 @@ function createSkill(defaultSettings) {
     useSkill
   };
 }
+var label = {
+  fontSize: "var(--mantine-font-size-xs)",
+  fontFamily: "Akrobat Bold",
+  letterSpacing: "0.05em",
+  textTransform: "uppercase"
+};
+var error = {
+  fontSize: "var(--mantine-font-size-xs)",
+  fontFamily: "Akrobat Regular"
+};
 var theme = createTheme({
   primaryColor: "dirk",
   primaryShade: 9,
-  defaultRadius: "xxs",
+  defaultRadius: "xs",
   fontFamily: "Akrobat Regular, sans-serif",
   radius: {
     xxs: "0.2vh",
@@ -975,6 +986,14 @@ var theme = createTheme({
     xl: "3.3vh",
     xxl: "3.8vh"
   },
+  lineHeights: {
+    xxs: "1.4vh",
+    xs: "1.8vh",
+    sm: "2.2vh",
+    md: "2.8vh",
+    lg: "3.3vh",
+    xl: "3.8vh"
+  },
   spacing: {
     xxs: "0.5vh",
     xs: "0.75vh",
@@ -987,51 +1006,75 @@ var theme = createTheme({
   components: {
     Progress: {
       styles: {
+        label: {
+          fontFamily: "Akrobat Bold",
+          letterSpacing: "0.05em",
+          textTransform: "uppercase"
+        },
         root: {
           backgroundColor: "rgba(77, 77, 77, 0.4)"
         }
       }
     },
+    Textarea: {
+      styles: {
+        label,
+        error
+      }
+    },
+    Button: {
+      styles: {
+        root: {
+          fontSize: "var(--mantine-font-size-xs)"
+        }
+      }
+    },
     Select: {
       styles: {
-        dropdown: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
         input: {
           padding: "var(--mantine-spacing-sm)"
-        },
-        item: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        wrapper: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        option: {
-          borderRadius: "var(--mantine-radius-xxs)"
         }
       }
     },
-    MultiSelect: {
+    Pill: {
+      styles: (theme2) => ({
+        root: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          backgroundColor: "rgba(76, 76, 76, 0.3)",
+          height: "fit-content",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+          fontFamily: "Akrobat Bold",
+          fontSize: theme2.fontSizes.xs,
+          borderRadius: theme2.defaultRadius,
+          padding: `${theme2.spacing.xs} ${theme2.spacing.sm}`
+        }
+      })
+    },
+    Input: {
       styles: {
-        dropdown: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        pill: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        item: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        wrapper: {
-          borderRadius: "var(--mantine-radius-xxs)"
-        },
-        option: {
-          borderRadius: "var(--mantine-radius-xxs)"
+        label,
+        error,
+        input: {
+          padding: "var(--mantine-spacing-sm)",
+          backgroundColor: "rgba(76, 76, 76, 0.3)"
+        }
+      }
+    },
+    ColorInput: {
+      styles: {
+        label,
+        input: {
+          padding: "var(--mantine-spacing-sm)"
         }
       }
     },
     TextInput: {
       styles: {
+        label,
+        wrapper: {},
         section: {
           marginRight: "0.2vh"
         },
@@ -1039,21 +1082,20 @@ var theme = createTheme({
           padding: "var(--mantine-spacing-sm)"
         }
       }
+    },
+    NumberInput: {
+      styles: {
+        label,
+        input: {
+          padding: "var(--mantine-spacing-sm)"
+        },
+        section: {
+          pointerEvents: "all"
+        }
+      }
     }
   },
   colors: {
-    dark: [
-      "#ffffff",
-      "#e2e2e2",
-      "#c6c6c6",
-      "#aaaaaa",
-      "#8d8d8d",
-      "#717171",
-      "#555555",
-      "#393939",
-      "#1c1c1c",
-      "#000000"
-    ],
     dirk: [
       "#ffffff",
       "#f3fce9",
@@ -1098,6 +1140,9 @@ function DirkProvider(props) {
       console.log(`Game set to ${game}, applied corresponding font family.: ${document.body.style.fontFamily}`);
     });
   }, [game]);
+  useEffect(() => {
+    fetchNui("NUI_READY");
+  }, []);
   useAutoFetcher();
   return /* @__PURE__ */ jsx(MantineProvider, { theme: mergedTheme, defaultColorScheme: "dark", children: /* @__PURE__ */ jsx(Wrapper, { children: props.children }) });
 }
@@ -1493,13 +1538,14 @@ function InputContainer(props) {
       direction: "column",
       h: props.h,
       gap: props.title ? "xs" : 0,
-      bg: props.bg || "rgba(69, 69, 69, 0.42)",
-      p: "sm",
+      bg: props.bg || "linear-gradient(180deg, rgba(30, 30, 30, 0.82) 0%, rgba(30, 30, 30, 0.3) 50%, rgba(30, 30, 30, 0.6) 100%)",
+      p: props.p || "sm",
       style: {
         borderRadius: theme2.radius.xs,
         boxShadow: theme2.shadows.sm,
         overflow: "hidden",
-        outline: props.error ? `1px solid rgba(255, 100, 100, 0.8)` : "none"
+        outline: props.error ? `1px solid rgba(255, 100, 100, 0.8)` : "0.2vh solid rgba(255,255,255,0.1)",
+        ...props.style
       },
       variants: props.variants,
       children: [
@@ -1509,11 +1555,12 @@ function InputContainer(props) {
             align: "center",
             gap: "xs",
             children: [
-              /* @__PURE__ */ jsxs(
+              (props.title || props.description) && /* @__PURE__ */ jsxs(
                 Flex,
                 {
                   direction: "column",
                   gap: "xxs",
+                  p: props.p == "0" ? "sm" : 0,
                   children: [
                     props.title && /* @__PURE__ */ jsx(
                       Text,