dirk-cfx-react 1.1.85 → 1.1.86

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { AdminPageTitle, AdminPageTitleProps, AnimPostFxSelect, AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, DiscordRole, DiscordRoleSelect, DiscordRoleSelectProps, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, ScenarioSelect, ScenarioSelectProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, SwitchPanel, SwitchPanelProps, TestBed, TestBedItem, TestBedPlacement, TestBedProps, ThemeOverrideSection, ThemeOverrideSectionProps, ThemeOverrideValue, Title, TitleProps, TitleSize, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
+export { AccountSelect, AccountSelectProps, AdminPageTitle, AdminPageTitleProps, AnimPostFxSelect, AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, DiscordRole, DiscordRoleSelect, DiscordRoleSelectProps, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, FrameworkAccount, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, ScenarioSelect, ScenarioSelectProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, SwitchPanel, SwitchPanelProps, TestBed, TestBedItem, TestBedPlacement, TestBedProps, ThemeOverrideSection, ThemeOverrideSectionProps, ThemeOverrideValue, Title, TitleProps, TitleSize, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.cjs';
 export { FrameworkGrade, FrameworkGroup, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GtaControl, GtaControlGroup, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InitialFetch, InternalEvent, InventoryItem, InventoryItems, SettingsState, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useFrameworkGroups, useItems, useItemsList, useProfanityStore, useSettings } from './utils/index.cjs';
 export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptConfigHistoryChange, ScriptConfigHistoryEntry, ScriptConfigHistoryRequest, ScriptConfigHistoryResponse, ScriptConfigInstance, TornEdgeSVGFilter, ValidationRules, ValidatorFn, createFormStore, createScriptConfig, getScriptConfigInstance, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges } from './hooks/index.cjs';
 export { DirkProvider, DirkProviderProps } from './providers/index.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { AdminPageTitle, AdminPageTitleProps, AnimPostFxSelect, AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, DiscordRole, DiscordRoleSelect, DiscordRoleSelectProps, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, ScenarioSelect, ScenarioSelectProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, SwitchPanel, SwitchPanelProps, TestBed, TestBedItem, TestBedPlacement, TestBedProps, ThemeOverrideSection, ThemeOverrideSectionProps, ThemeOverrideValue, Title, TitleProps, TitleSize, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
+export { AccountSelect, AccountSelectProps, AdminPageTitle, AdminPageTitleProps, AnimPostFxSelect, AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, BlipColorSelectProps, BlipDisplaySelect, BlipDisplaySelectProps, BlipIconSelect, BlipIconSelectProps, BorderedIcon, BorderedIconProps, ButtonProps, ConfigPanel, ConfigPanelProps, ConfirmModal, ConfirmModalProps, ControlMultiSelect, ControlMultiSelectProps, ControlSelect, ControlSelectProps, Counter, DiscordRole, DiscordRoleSelect, DiscordRoleSelectProps, FiveMControls, FiveMKeyBindInput, FloatingParticles, FloatingParticlesProps, FrameworkAccount, GroupName, GroupNameProps, GroupRank, GroupRankProps, GroupSelect, GroupSelectProps, GroupType, GroupValue, InfoBox, InfoBoxProps, InputContainer, InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavItem, NavigationContext, NavigationProvider, NavigationStore, ParticleState, PositionPicker, PositionPickerProps, ProgressProps, Prompt, PromptButton, PromptModal, ScenarioSelect, ScenarioSelectProps, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedProgress, SelectItem, SelectItemProps, StoreModalProps, SwitchPanel, SwitchPanelProps, TestBed, TestBedItem, TestBedPlacement, TestBedProps, ThemeOverrideSection, ThemeOverrideSectionProps, ThemeOverrideValue, Title, TitleProps, TitleSize, Vector4DeleteButton, Vector4Display, Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore } from './components/index.js';
 export { FrameworkGrade, FrameworkGroup, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GtaControl, GtaControlGroup, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InitialFetch, InternalEvent, InventoryItem, InventoryItems, SettingsState, SkillSettings, UploadImageProps, colorWithAlpha, copyToClipboard, createSkill, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAutoFetcher, useFrameworkGroups, useItems, useItemsList, useProfanityStore, useSettings } from './utils/index.js';
 export { FormProvider, FormState, NuiHandlerSignature, NuiMessageData, ScriptConfigHistoryChange, ScriptConfigHistoryEntry, ScriptConfigHistoryRequest, ScriptConfigHistoryResponse, ScriptConfigInstance, TornEdgeSVGFilter, ValidationRules, ValidatorFn, createFormStore, createScriptConfig, getScriptConfigInstance, useAudio, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useNuiEvent, useTornEdges } from './hooks/index.js';
 export { DirkProvider, DirkProviderProps } from './providers/index.js';

package/dist/index.js

@@ -1244,11 +1244,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);
@@ -1256,12 +1256,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;
@@ -3694,11 +3694,11 @@ function ConfirmModal({
                     placeholder: confirmText,
                     value: typed,
                     onChange: (e) => setTyped(e.currentTarget.value),
-                    styles: (t2) => ({
+                    styles: (t3) => ({
                       input: {
-                        backgroundColor: alpha(t2.colors.dark[7], 0.5),
+                        backgroundColor: alpha(t3.colors.dark[7], 0.5),
                         border: `0.1vh solid ${alpha(
-                          typed === confirmText ? "#ef4444" : t2.colors.dark[5],
+                          typed === confirmText ? "#ef4444" : t3.colors.dark[5],
                           0.5
                         )}`,
                         color: "rgba(255,255,255,0.85)",
@@ -7109,6 +7109,156 @@ function DiscordRoleSelect(props) {
     }
   );
 }
+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__ */ jsxs(Flex, { direction: "column", gap: "0", children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "rgba(255,255,255,0.9)", ff: "Akrobat Bold", tt: "uppercase", lts: "0.04em", children: account.name }),
+    account.label && /* @__PURE__ */ jsx(Text, { size: "xxs", c: "rgba(255,255,255,0.4)", children: account.label })
+  ] });
+}
+function FrameworkHint({ framework }) {
+  const theme2 = useMantineTheme();
+  if (!framework) return null;
+  const hintKey = `AccountFrameworkHint_${framework}`;
+  const text = t2(hintKey, FRAMEWORK_HINTS[framework] || FRAMEWORK_HINTS.unknown);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      gap: "xs",
+      px: "xs",
+      py: "0.3vh",
+      style: {
+        background: alpha(theme2.colors.dark[5], 0.4),
+        border: "0.1vh solid rgba(255,255,255,0.04)",
+        borderRadius: theme2.radius.xs
+      },
+      children: [
+        /* @__PURE__ */ jsx(Text, { size: "xxs", ff: "Akrobat Bold", c: "rgba(255,255,255,0.45)", tt: "uppercase", lts: "0.04em", children: framework }),
+        /* @__PURE__ */ jsx(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] = useState(null);
+  const [framework, setFramework] = useState(void 0);
+  const [loading, setLoading] = 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);
+    }
+  };
+  useEffect(() => {
+    refresh();
+  }, [endpoint]);
+  const accountsByName = 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__ */ jsx(AccountOption, { account: acc }) : /* @__PURE__ */ jsx(Text, { size: "xs", children: option.label });
+  };
+  const refreshButton = /* @__PURE__ */ jsx(
+    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__ */ jsx(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__ */ jsxs(Flex, { direction: "column", gap: "0.3vh", style, children: [
+    props.multi ? /* @__PURE__ */ jsx(
+      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__ */ jsx(
+      Select,
+      {
+        ...sharedSelectProps,
+        placeholder: placeholder || t2("PickAccount", "Pick an account..."),
+        value: props.value || null,
+        onChange: (name) => props.onChange(name),
+        renderOption,
+        styles
+      }
+    ),
+    !hideFrameworkHint && /* @__PURE__ */ jsx(FrameworkHint, { framework })
+  ] });
+}
 function useTornEdges() {
   const game = useSettings((state) => state.game);
   return game === "rdr3" ? "torn-edge-wrapper" : "";
@@ -7469,6 +7619,6 @@ var Vector4Schema = z.object({
   w: z.number()
 });
 
-export { AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DirkProvider, DiscordRoleSelect, FiveMKeyBindInput, FloatingParticles, FormProvider, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GroupName, GroupRank, GroupSelect, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, ScenarioSelect, SegmentedControl, SegmentedProgress, SelectItem, SwitchPanel, TestBed, ThemeOverrideSection, Title, TornEdgeSVGFilter, Vector2Schema, Vector3Schema, Vector4DeleteButton, Vector4Display, Vector4Schema, WorldPositionGotoButton, WorldPositionSetButton, colorWithAlpha, copyToClipboard, createFormStore, createScriptConfig, createSkill, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, getScriptConfigInstance, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAudio, useAutoFetcher, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useFrameworkGroups, useItems, useItemsList, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
+export { AccountSelect, AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DirkProvider, DiscordRoleSelect, FiveMKeyBindInput, FloatingParticles, FormProvider, GTA_CONTROLS, GTA_CONTROL_GROUP_ORDER, GroupName, GroupRank, GroupSelect, INPUT_MAPPER_KEYS_BY_PRIMARY, INPUT_MAPPER_PRIMARY_OPTIONS, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, ScenarioSelect, SegmentedControl, SegmentedProgress, SelectItem, SwitchPanel, TestBed, ThemeOverrideSection, Title, TornEdgeSVGFilter, Vector2Schema, Vector3Schema, Vector4DeleteButton, Vector4Display, Vector4Schema, WorldPositionGotoButton, WorldPositionSetButton, colorWithAlpha, copyToClipboard, createFormStore, createScriptConfig, createSkill, extractDefaults, fetchLuaTable, fetchNui, formatGtaControl, gameToMap, getGtaControl, getImageShape, getItemImageUrl, getScriptConfigInstance, initialFetches, internalEvent, isEnvBrowser, isProfanity, latPr100, locale, localeStore, mapCenter, mapToGame, noop, numberToRoman, openLink, registerInitialFetch, registerInitialLuaTableFetch, runFetches, selectAllGroups, splitFAString, updatePresignedURL, uploadImage, useAudio, useAutoFetcher, useForm, useFormActions, useFormError, useFormErrors, useFormField, useFormFields, useFrameworkGroups, useItems, useItemsList, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore, useNuiEvent, useProfanityStore, useSettings, useTornEdges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map