dirk-cfx-react 1.1.85 → 1.1.86

package/dist/components/index.d.cts

@@ -1067,7 +1067,7 @@ type DiscordRole = {
     color: number;
     position?: number;
 };
-type SharedProps = {
+type SharedProps$1 = {
     /** NUI callback name registered by the consumer that returns ListResponse. */
     endpoint: string;
     /** Optional label / size / placeholder forwarded to the underlying Mantine Select. */
@@ -1079,17 +1079,47 @@ type SharedProps = {
     style?: React.CSSProperties;
     styles?: SelectProps["styles"];
 };
-type SingleProps = SharedProps & {
+type SingleProps$1 = SharedProps$1 & {
     multi?: false;
     value: string | null;
     onChange: (id: string | null) => void;
 };
-type MultiProps = SharedProps & {
+type MultiProps$1 = SharedProps$1 & {
     multi: true;
     value: string[];
     onChange: (ids: string[]) => void;
 };
-type DiscordRoleSelectProps = SingleProps | MultiProps;
+type DiscordRoleSelectProps = SingleProps$1 | MultiProps$1;
 declare function DiscordRoleSelect(props: DiscordRoleSelectProps): react_jsx_runtime.JSX.Element;
 
-export { AdminPageTitle, type AdminPageTitleProps, AnimPostFxSelect, type AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type DiscordRole, DiscordRoleSelect, type DiscordRoleSelectProps, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, ScenarioSelect, type ScenarioSelectProps, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, SwitchPanel, type SwitchPanelProps, TestBed, type TestBedItem, type TestBedPlacement, type TestBedProps, ThemeOverrideSection, type ThemeOverrideSectionProps, type ThemeOverrideValue, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
+type FrameworkAccount = {
+    name: string;
+    label?: string;
+    default?: number;
+    round?: boolean;
+};
+type SharedProps = {
+    endpoint: string;
+    label?: React.ReactNode;
+    size?: SelectProps["size"];
+    placeholder?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    styles?: SelectProps["styles"];
+    /** Hide the framework-hint chip below the field. */
+    hideFrameworkHint?: boolean;
+};
+type SingleProps = SharedProps & {
+    multi?: false;
+    value: string | null;
+    onChange: (name: string | null) => void;
+};
+type MultiProps = SharedProps & {
+    multi: true;
+    value: string[];
+    onChange: (names: string[]) => void;
+};
+type AccountSelectProps = SingleProps | MultiProps;
+declare function AccountSelect(props: AccountSelectProps): react_jsx_runtime.JSX.Element;
+
+export { AccountSelect, type AccountSelectProps, AdminPageTitle, type AdminPageTitleProps, AnimPostFxSelect, type AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type DiscordRole, DiscordRoleSelect, type DiscordRoleSelectProps, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, type FrameworkAccount, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, ScenarioSelect, type ScenarioSelectProps, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, SwitchPanel, type SwitchPanelProps, TestBed, type TestBedItem, type TestBedPlacement, type TestBedProps, ThemeOverrideSection, type ThemeOverrideSectionProps, type ThemeOverrideValue, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.d.ts

@@ -1067,7 +1067,7 @@ type DiscordRole = {
     color: number;
     position?: number;
 };
-type SharedProps = {
+type SharedProps$1 = {
     /** NUI callback name registered by the consumer that returns ListResponse. */
     endpoint: string;
     /** Optional label / size / placeholder forwarded to the underlying Mantine Select. */
@@ -1079,17 +1079,47 @@ type SharedProps = {
     style?: React.CSSProperties;
     styles?: SelectProps["styles"];
 };
-type SingleProps = SharedProps & {
+type SingleProps$1 = SharedProps$1 & {
     multi?: false;
     value: string | null;
     onChange: (id: string | null) => void;
 };
-type MultiProps = SharedProps & {
+type MultiProps$1 = SharedProps$1 & {
     multi: true;
     value: string[];
     onChange: (ids: string[]) => void;
 };
-type DiscordRoleSelectProps = SingleProps | MultiProps;
+type DiscordRoleSelectProps = SingleProps$1 | MultiProps$1;
 declare function DiscordRoleSelect(props: DiscordRoleSelectProps): react_jsx_runtime.JSX.Element;
 
-export { AdminPageTitle, type AdminPageTitleProps, AnimPostFxSelect, type AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type DiscordRole, DiscordRoleSelect, type DiscordRoleSelectProps, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, ScenarioSelect, type ScenarioSelectProps, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, SwitchPanel, type SwitchPanelProps, TestBed, type TestBedItem, type TestBedPlacement, type TestBedProps, ThemeOverrideSection, type ThemeOverrideSectionProps, type ThemeOverrideValue, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
+type FrameworkAccount = {
+    name: string;
+    label?: string;
+    default?: number;
+    round?: boolean;
+};
+type SharedProps = {
+    endpoint: string;
+    label?: React.ReactNode;
+    size?: SelectProps["size"];
+    placeholder?: string;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+    styles?: SelectProps["styles"];
+    /** Hide the framework-hint chip below the field. */
+    hideFrameworkHint?: boolean;
+};
+type SingleProps = SharedProps & {
+    multi?: false;
+    value: string | null;
+    onChange: (name: string | null) => void;
+};
+type MultiProps = SharedProps & {
+    multi: true;
+    value: string[];
+    onChange: (names: string[]) => void;
+};
+type AccountSelectProps = SingleProps | MultiProps;
+declare function AccountSelect(props: AccountSelectProps): react_jsx_runtime.JSX.Element;
+
+export { AccountSelect, type AccountSelectProps, AdminPageTitle, type AdminPageTitleProps, AnimPostFxSelect, type AnimPostFxSelectProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type DiscordRole, DiscordRoleSelect, type DiscordRoleSelectProps, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, type FrameworkAccount, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, ScenarioSelect, type ScenarioSelectProps, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, SwitchPanel, type SwitchPanelProps, TestBed, type TestBedItem, type TestBedPlacement, type TestBedProps, ThemeOverrideSection, type ThemeOverrideSectionProps, type ThemeOverrideValue, Title, type TitleProps, type TitleSize, Vector4DeleteButton, Vector4Display, type Vector4Value, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.js

@@ -1230,11 +1230,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);
@@ -1242,12 +1242,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;
@@ -3084,11 +3084,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)",
@@ -6382,7 +6382,157 @@ 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 theme = 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(theme.colors.dark[5], 0.4),
+        border: "0.1vh solid rgba(255,255,255,0.04)",
+        borderRadius: theme.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, 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,
+    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 })
+  ] });
+}
 
-export { AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DiscordRoleSelect, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, 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, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AccountSelect, AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, DiscordRoleSelect, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, 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, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map