dirk-cfx-react 1.1.84 → 1.1.86

package/dist/index.cjs

@@ -1253,11 +1253,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha11) {
+function colorWithAlpha(color, alpha12) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha11})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha12})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1265,12 +1265,12 @@ function colorWithAlpha(color, alpha11) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha11})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha12})`;
   }
   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]}, ${alpha11})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha12})`;
     }
   }
   return color;
@@ -3703,11 +3703,11 @@ function ConfirmModal({
                     placeholder: confirmText,
                     value: typed,
                     onChange: (e) => setTyped(e.currentTarget.value),
-                    styles: (t2) => ({
+                    styles: (t3) => ({
                       input: {
-                        backgroundColor: core.alpha(t2.colors.dark[7], 0.5),
+                        backgroundColor: core.alpha(t3.colors.dark[7], 0.5),
                         border: `0.1vh solid ${core.alpha(
-                          typed === confirmText ? "#ef4444" : t2.colors.dark[5],
+                          typed === confirmText ? "#ef4444" : t3.colors.dark[5],
                           0.5
                         )}`,
                         color: "rgba(255,255,255,0.85)",
@@ -7062,9 +7062,16 @@ function DiscordRoleSelect(props) {
     {
       size: "xs",
       variant: "subtle",
-      onClick: refresh,
+      onMouseDown: (e) => {
+        e.stopPropagation();
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        refresh();
+      },
       title: t("Refresh", "Refresh"),
       loading,
+      "aria-label": t("Refresh", "Refresh"),
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.2vh" })
     }
   );
@@ -7083,6 +7090,7 @@ function DiscordRoleSelect(props) {
         clearable: true,
         disabled: disabled || loading && !roles,
         rightSection: refreshButton,
+        rightSectionPointerEvents: "all",
         style,
         styles,
         nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
@@ -7103,12 +7111,163 @@ function DiscordRoleSelect(props) {
       clearable: true,
       disabled: disabled || loading && !roles,
       rightSection: refreshButton,
+      rightSectionPointerEvents: "all",
       style,
       styles,
       nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
     }
   );
 }
+var t2 = (key, fallback) => {
+  const v = locale(key);
+  return v === key ? fallback : v;
+};
+var FRAMEWORK_HINTS = {
+  "es_extended": "from ESX Config.Accounts",
+  "qb-core": "from QBCore Money.MoneyTypes",
+  "qbx_core": "default QBox trio (cash/bank/crypto) \u2014 server may have custom names, add them manually",
+  "nd-framework": "ND_Core only supports cash + bank",
+  "unknown": "no framework detected \u2014 type account names manually"
+};
+function AccountOption({ account }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", c: "rgba(255,255,255,0.9)", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", children: account.name }),
+    account.label && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xxs", c: "rgba(255,255,255,0.4)", children: account.label })
+  ] });
+}
+function FrameworkHint({ framework }) {
+  const theme2 = core.useMantineTheme();
+  if (!framework) return null;
+  const hintKey = `AccountFrameworkHint_${framework}`;
+  const text = t2(hintKey, FRAMEWORK_HINTS[framework] || FRAMEWORK_HINTS.unknown);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Flex,
+    {
+      align: "center",
+      gap: "xs",
+      px: "xs",
+      py: "0.3vh",
+      style: {
+        background: core.alpha(theme2.colors.dark[5], 0.4),
+        border: "0.1vh solid rgba(255,255,255,0.04)",
+        borderRadius: theme2.radius.xs
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xxs", ff: "Akrobat Bold", c: "rgba(255,255,255,0.45)", tt: "uppercase", lts: "0.04em", children: framework }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xxs", ff: "Akrobat", c: "rgba(255,255,255,0.35)", style: { flex: 1 }, lineClamp: 2, children: text })
+      ]
+    }
+  );
+}
+function AccountSelect(props) {
+  const { endpoint, label: label2, size = "xs", placeholder, disabled, style, styles, hideFrameworkHint } = props;
+  const [accounts, setAccounts] = React6.useState(null);
+  const [framework, setFramework] = React6.useState(void 0);
+  const [loading, setLoading] = React6.useState(false);
+  const refresh = async () => {
+    setLoading(true);
+    try {
+      const res = await fetchNui(endpoint, {}, {
+        // Browser dev fallback. Shows a recognisable ESX-style list.
+        ok: true,
+        framework: "es_extended",
+        accounts: [
+          { name: "money", label: "Cash" },
+          { name: "bank", label: "Bank" },
+          { name: "black_money", label: "Dirty Money" }
+        ]
+      });
+      if (res?.ok) {
+        setAccounts(res.accounts ?? []);
+        setFramework(res.framework);
+      } else {
+        setAccounts([]);
+        setFramework(res?.framework);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  React6.useEffect(() => {
+    refresh();
+  }, [endpoint]);
+  const accountsByName = React6.useMemo(() => {
+    const map = {};
+    for (const a of accounts ?? []) map[a.name] = a;
+    if (props.multi) {
+      for (const n of props.value ?? []) {
+        if (n && !map[n]) map[n] = { name: n };
+      }
+    } else if (props.value && !map[props.value]) {
+      map[props.value] = { name: props.value };
+    }
+    return map;
+  }, [accounts, props.multi, props.multi ? props.value?.join(",") : props.value]);
+  const data = Object.values(accountsByName).map((a) => ({
+    value: a.name,
+    label: a.label ? `${a.name} \u2014 ${a.label}` : a.name
+  }));
+  const renderOption = ({ option }) => {
+    const acc = accountsByName[option.value];
+    return acc ? /* @__PURE__ */ jsxRuntime.jsx(AccountOption, { account: acc }) : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", children: option.label });
+  };
+  const refreshButton = /* @__PURE__ */ jsxRuntime.jsx(
+    core.ActionIcon,
+    {
+      size: "xs",
+      variant: "subtle",
+      onMouseDown: (e) => {
+        e.stopPropagation();
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        refresh();
+      },
+      title: t2("Refresh", "Refresh"),
+      loading,
+      "aria-label": t2("Refresh", "Refresh"),
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.2vh" })
+    }
+  );
+  const sharedSelectProps = {
+    label: label2,
+    size,
+    data,
+    searchable: true,
+    clearable: true,
+    disabled: disabled || loading && !accounts,
+    rightSection: refreshButton,
+    rightSectionPointerEvents: "all",
+    style,
+    nothingFoundMessage: t2("NoAccounts", "No accounts available")
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "0.3vh", style, children: [
+    props.multi ? /* @__PURE__ */ jsxRuntime.jsx(
+      core.MultiSelect,
+      {
+        ...sharedSelectProps,
+        placeholder: placeholder || t2("PickAccounts", "Pick accounts (or type custom)..."),
+        value: props.value || [],
+        onChange: (names) => props.onChange(names),
+        renderOption,
+        searchable: true,
+        hidePickedOptions: true,
+        styles
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      core.Select,
+      {
+        ...sharedSelectProps,
+        placeholder: placeholder || t2("PickAccount", "Pick an account..."),
+        value: props.value || null,
+        onChange: (name) => props.onChange(name),
+        renderOption,
+        styles
+      }
+    ),
+    !hideFrameworkHint && /* @__PURE__ */ jsxRuntime.jsx(FrameworkHint, { framework })
+  ] });
+}
 function useTornEdges() {
   const game = useSettings((state) => state.game);
   return game === "rdr3" ? "torn-edge-wrapper" : "";
@@ -7469,6 +7628,7 @@ var Vector4Schema = zod.z.object({
   w: zod.z.number()
 });
 
+exports.AccountSelect = AccountSelect;
 exports.AdminPageTitle = AdminPageTitle;
 exports.AnimPostFxSelect = AnimPostFxSelect;
 exports.AsyncSaveButton = AsyncSaveButton;