dirk-cfx-react 1.1.79 → 1.1.81

package/dist/components/index.d.cts

@@ -971,6 +971,19 @@ type AdminPageTitleProps = {
 };
 declare function AdminPageTitle(props: AdminPageTitleProps): react_jsx_runtime.JSX.Element;
 
+type SwitchPanelProps = {
+    label: ReactNode;
+    description?: ReactNode;
+    checked: boolean;
+    onChange: (v: boolean) => void;
+    disabled?: boolean;
+    /** Icon rendered on the Switch's thumb (e.g. a Lock when locked). */
+    thumbIcon?: ReactNode;
+    /** Compact variant — used for nested rows inside an editor card. */
+    compact?: boolean;
+};
+declare function SwitchPanel({ label, description, checked, onChange, disabled, thumbIcon, compact, }: SwitchPanelProps): react_jsx_runtime.JSX.Element;
+
 type MissingItem = {
     name: string;
     label?: string;
@@ -1041,4 +1054,4 @@ type AnimPostFxSelectProps = Omit<SelectProps, "data" | "value" | "onChange"> &
 };
 declare function AnimPostFxSelect({ value, onChange, label, size, searchable, clearable, ...rest }: AnimPostFxSelectProps): 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, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, 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 };
+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, 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

@@ -971,6 +971,19 @@ type AdminPageTitleProps = {
 };
 declare function AdminPageTitle(props: AdminPageTitleProps): react_jsx_runtime.JSX.Element;
 
+type SwitchPanelProps = {
+    label: ReactNode;
+    description?: ReactNode;
+    checked: boolean;
+    onChange: (v: boolean) => void;
+    disabled?: boolean;
+    /** Icon rendered on the Switch's thumb (e.g. a Lock when locked). */
+    thumbIcon?: ReactNode;
+    /** Compact variant — used for nested rows inside an editor card. */
+    compact?: boolean;
+};
+declare function SwitchPanel({ label, description, checked, onChange, disabled, thumbIcon, compact, }: SwitchPanelProps): react_jsx_runtime.JSX.Element;
+
 type MissingItem = {
     name: string;
     label?: string;
@@ -1041,4 +1054,4 @@ type AnimPostFxSelectProps = Omit<SelectProps, "data" | "value" | "onChange"> &
 };
 declare function AnimPostFxSelect({ value, onChange, label, size, searchable, clearable, ...rest }: AnimPostFxSelectProps): 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, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, 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 };
+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, 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

@@ -1,4 +1,4 @@
-import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, ActionIcon, Stack, Switch, ColorInput, Popover, Group, JsonInput } from '@mantine/core';
+import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, Switch, ActionIcon, Stack, ColorInput, Popover, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { create, useStore, createStore } from 'zustand';
@@ -1230,11 +1230,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha10) {
+function colorWithAlpha(color, alpha11) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha10})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha11})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1242,12 +1242,12 @@ function colorWithAlpha(color, alpha10) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha10})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha11})`;
   }
   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]}, ${alpha10})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha11})`;
     }
   }
   return color;
@@ -5125,6 +5125,67 @@ function AdminPageTitle(props) {
     /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", tt: "uppercase", lts: "0.1em", size: "sm", c: "rgba(255,255,255,0.6)", children: locale(props.title) })
   ] });
 }
+function SwitchPanel({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled,
+  thumbIcon,
+  compact
+}) {
+  const theme = useMantineTheme();
+  const pc = theme.colors[theme.primaryColor];
+  const bg = compact ? alpha(theme.colors.dark[6], 0.5) : alpha(theme.colors.dark[5], 0.35);
+  const border = compact ? "0.1vh solid rgba(255,255,255,0.04)" : "0.1vh solid rgba(255,255,255,0.05)";
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      justify: "space-between",
+      align: "center",
+      px: compact ? "xs" : "xs",
+      py: compact ? "xxs" : "xs",
+      style: {
+        background: bg,
+        border,
+        borderRadius: theme.radius.xs,
+        opacity: disabled ? 0.5 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "xxs", style: { flex: 1, minWidth: 0 }, children: [
+          typeof label === "string" ? compact ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              ff: "Akrobat Bold",
+              size: "xxs",
+              c: "rgba(255,255,255,0.85)",
+              tt: "uppercase",
+              lts: "0.05em",
+              children: label
+            }
+          ) : /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", c: "rgba(255,255,255,0.85)", children: label }) : label,
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: compact ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.45)", children: description }) : description)
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked,
+            disabled,
+            onChange: (e) => onChange(e.currentTarget.checked),
+            size: compact ? "sm" : "md",
+            thumbIcon,
+            styles: {
+              track: {
+                background: checked ? alpha(pc[6], 0.4) : "rgba(255,255,255,0.08)",
+                borderColor: checked ? alpha(pc[6], 0.6) : "rgba(255,255,255,0.1)"
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 var placementStyle = (placement) => {
   switch (placement) {
     case "top-center":
@@ -5375,32 +5436,13 @@ function ThemeOverrideSection({
             color
           }
         ),
-        /* @__PURE__ */ jsxs(
-          Flex,
+        /* @__PURE__ */ jsx(
+          SwitchPanel,
           {
-            align: "center",
-            justify: "space-between",
-            p: "xs",
-            style: {
-              background: `rgba(255,255,255,${editable ? 0.04 : 0.02})`,
-              border: `0.1vh solid ${editable ? color : "rgba(255,255,255,0.08)"}`,
-              borderRadius: mantineTheme.radius.xs,
-              transition: "background 0.15s, border-color 0.15s"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "xxs", style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xs", c: "rgba(255,255,255,0.9)", children: locale("OverrideGlobalTheme") || "Override global theme" }),
-                /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.4)", children: locale("OverrideGlobalThemeDesc") || "When on, this resource uses its own primary colour and palette instead of dirk_lib's. Turn off to fall back to the global theme \u2014 your custom palette is kept." })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Switch,
-                {
-                  size: "md",
-                  checked: value.useOverride,
-                  onChange: (e) => set("useOverride", e.currentTarget.checked)
-                }
-              )
-            ]
+            label: locale("OverrideGlobalTheme") || "Override global theme",
+            description: locale("OverrideGlobalThemeDesc") || "When on, this resource uses its own primary colour and palette instead of dirk_lib's. Turn off to fall back to the global theme \u2014 your custom palette is kept.",
+            checked: value.useOverride,
+            onChange: (v) => set("useOverride", v)
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -5807,6 +5849,6 @@ function AnimPostFxSelect({
   );
 }
 
-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, SegmentedControl, SegmentedProgress, SelectItem, 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, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, MissingItemsBanner, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, SwitchPanel, TestBed, ThemeOverrideSection, Title, Vector4DeleteButton, Vector4Display, WorldPositionGotoButton, WorldPositionSetButton, useMissingItemsAudit, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map