dirk-cfx-react 1.1.82 → 1.1.84

package/dist/components/index.d.cts

@@ -1061,4 +1061,35 @@ type ScenarioSelectProps = Omit<SelectProps, "data" | "value" | "onChange"> & {
 };
 declare function ScenarioSelect({ value, onChange, label, size, searchable, clearable, ...rest }: ScenarioSelectProps): 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 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 DiscordRole = {
+    id: string;
+    name: string;
+    color: number;
+    position?: number;
+};
+type SharedProps = {
+    /** NUI callback name registered by the consumer that returns ListResponse. */
+    endpoint: string;
+    /** Optional label / size / placeholder forwarded to the underlying Mantine Select. */
+    label?: React.ReactNode;
+    size?: SelectProps["size"];
+    placeholder?: string;
+    disabled?: boolean;
+    /** Style props applied to the wrapping Select/MultiSelect. */
+    style?: React.CSSProperties;
+    styles?: SelectProps["styles"];
+};
+type SingleProps = SharedProps & {
+    multi?: false;
+    value: string | null;
+    onChange: (id: string | null) => void;
+};
+type MultiProps = SharedProps & {
+    multi: true;
+    value: string[];
+    onChange: (ids: string[]) => void;
+};
+type DiscordRoleSelectProps = SingleProps | MultiProps;
+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 };

package/dist/components/index.d.ts

@@ -1061,4 +1061,35 @@ type ScenarioSelectProps = Omit<SelectProps, "data" | "value" | "onChange"> & {
 };
 declare function ScenarioSelect({ value, onChange, label, size, searchable, clearable, ...rest }: ScenarioSelectProps): 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 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 DiscordRole = {
+    id: string;
+    name: string;
+    color: number;
+    position?: number;
+};
+type SharedProps = {
+    /** NUI callback name registered by the consumer that returns ListResponse. */
+    endpoint: string;
+    /** Optional label / size / placeholder forwarded to the underlying Mantine Select. */
+    label?: React.ReactNode;
+    size?: SelectProps["size"];
+    placeholder?: string;
+    disabled?: boolean;
+    /** Style props applied to the wrapping Select/MultiSelect. */
+    style?: React.CSSProperties;
+    styles?: SelectProps["styles"];
+};
+type SingleProps = SharedProps & {
+    multi?: false;
+    value: string | null;
+    onChange: (id: string | null) => void;
+};
+type MultiProps = SharedProps & {
+    multi: true;
+    value: string[];
+    onChange: (ids: string[]) => void;
+};
+type DiscordRoleSelectProps = SingleProps | MultiProps;
+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 };

package/dist/components/index.js

@@ -3084,11 +3084,11 @@ function ConfirmModal({
                     placeholder: confirmText,
                     value: typed,
                     onChange: (e) => setTyped(e.currentTarget.value),
-                    styles: (t) => ({
+                    styles: (t2) => ({
                       input: {
-                        backgroundColor: alpha(t.colors.dark[7], 0.5),
+                        backgroundColor: alpha(t2.colors.dark[7], 0.5),
                         border: `0.1vh solid ${alpha(
-                          typed === confirmText ? "#ef4444" : t.colors.dark[5],
+                          typed === confirmText ? "#ef4444" : t2.colors.dark[5],
                           0.5
                         )}`,
                         color: "rgba(255,255,255,0.85)",
@@ -6197,7 +6197,183 @@ function ScenarioSelect({
     }
   );
 }
+var t = (key, fallback) => {
+  const v = locale(key);
+  return v === key ? fallback : v;
+};
+function decimalToHex(color) {
+  if (!color || color === 0) return null;
+  return "#" + color.toString(16).padStart(6, "0");
+}
+function RoleOption({ role }) {
+  const swatch = decimalToHex(role.color) || "rgba(255,255,255,0.25)";
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "0.6vh", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: "1vh",
+          height: "1vh",
+          borderRadius: "50%",
+          background: swatch,
+          flexShrink: 0,
+          boxShadow: role.color ? `0 0 0.4vh ${swatch}` : void 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "rgba(255,255,255,0.9)", children: role.name })
+  ] });
+}
+var NOT_CONFIGURED_TINT = "rgba(255,184,0,0.35)";
+var NOT_CONFIGURED_FILL = "rgba(255,184,0,0.05)";
+function DiscordRoleSelect(props) {
+  const { endpoint, label, size = "xs", placeholder, disabled, style, styles } = props;
+  const [roles, setRoles] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [errorCode, setErrorCode] = useState(null);
+  const refresh = async () => {
+    setLoading(true);
+    try {
+      const res = await fetchNui(endpoint, {}, {
+        // Browser dev fallback so the component renders something useful
+        // outside FiveM.
+        ok: true,
+        roles: [
+          { id: "1", name: "Admin", color: 15548997, position: 5 },
+          { id: "2", name: "VIP Gold", color: 16426522, position: 4 },
+          { id: "3", name: "Member", color: 5763719, position: 3 },
+          { id: "4", name: "Guest", color: 0, position: 2 }
+        ]
+      });
+      if (res?.ok) {
+        setRoles(res.roles ?? []);
+        setErrorCode(null);
+      } else {
+        setRoles(null);
+        setErrorCode(res?._error || "FetchFailed");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    refresh();
+  }, [endpoint]);
+  const rolesById = useMemo(() => {
+    const map = {};
+    for (const r of roles ?? []) map[r.id] = r;
+    return map;
+  }, [roles]);
+  if (errorCode === "NotConfigured") {
+    const notConfiguredPlaceholder = t(
+      "DiscordNotConfigured",
+      "Not configured \u2014 set in /dirk_lib"
+    );
+    const notConfiguredStyles = {
+      ...styles,
+      input: {
+        ...styles?.input ?? {},
+        borderColor: NOT_CONFIGURED_TINT,
+        backgroundColor: NOT_CONFIGURED_FILL
+      }
+    };
+    const warnIcon = /* @__PURE__ */ jsx(AlertTriangle, { size: "1.2vh", color: NOT_CONFIGURED_TINT.replace(/0\.35\)$/, "0.85)") });
+    if (props.multi) {
+      return /* @__PURE__ */ jsx(
+        MultiSelect,
+        {
+          label,
+          size,
+          placeholder: notConfiguredPlaceholder,
+          data: [],
+          value: [],
+          onChange: () => {
+          },
+          disabled: true,
+          rightSection: warnIcon,
+          style,
+          styles: notConfiguredStyles
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        label,
+        size,
+        placeholder: notConfiguredPlaceholder,
+        data: [],
+        value: null,
+        onChange: () => {
+        },
+        disabled: true,
+        rightSection: warnIcon,
+        style,
+        styles: notConfiguredStyles
+      }
+    );
+  }
+  const data = (roles ?? []).map((r) => ({
+    value: r.id,
+    label: r.name
+  }));
+  const renderOption = ({ option }) => {
+    const role = rolesById[option.value];
+    return role ? /* @__PURE__ */ jsx(RoleOption, { role }) : /* @__PURE__ */ jsx(Text, { size: "xs", children: option.label });
+  };
+  const refreshButton = /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      size: "xs",
+      variant: "subtle",
+      onClick: refresh,
+      title: t("Refresh", "Refresh"),
+      loading,
+      children: /* @__PURE__ */ jsx(RefreshCw, { size: "1.2vh" })
+    }
+  );
+  if (props.multi) {
+    return /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        label,
+        size,
+        placeholder: placeholder || t("PickRoles", "Pick roles..."),
+        data,
+        value: props.value || [],
+        onChange: (ids) => props.onChange(ids),
+        renderOption,
+        searchable: true,
+        clearable: true,
+        disabled: disabled || loading && !roles,
+        rightSection: refreshButton,
+        style,
+        styles,
+        nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label,
+      size,
+      placeholder: placeholder || t("PickRole", "Pick a role..."),
+      data,
+      value: props.value || null,
+      onChange: (id) => props.onChange(id),
+      renderOption,
+      searchable: true,
+      clearable: true,
+      disabled: disabled || loading && !roles,
+      rightSection: refreshButton,
+      style,
+      styles,
+      nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
+    }
+  );
+}
 
-export { AdminPageTitle, AnimPostFxSelect, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, 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 { 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