dirk-cfx-react 1.1.79 → 1.1.80

package/dist/components/index.cjs

@@ -1237,11 +1237,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);
@@ -1249,12 +1249,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;
@@ -5132,6 +5132,45 @@ function AdminPageTitle(props) {
     /* @__PURE__ */ jsxRuntime.jsx(core.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 }) {
+  const theme = core.useMantineTheme();
+  const pc = theme.colors[theme.primaryColor];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Flex,
+    {
+      justify: "space-between",
+      align: "center",
+      p: "xs",
+      style: {
+        background: core.alpha(theme.colors.dark[5], 0.35),
+        border: "0.1vh solid rgba(255,255,255,0.05)",
+        borderRadius: theme.radius.xs,
+        opacity: disabled ? 0.5 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "xxs", style: { flex: 1, minWidth: 0 }, children: [
+          typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", c: "rgba(255,255,255,0.85)", children: label }) : label,
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.45)", children: description }) : description)
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Switch,
+          {
+            checked,
+            disabled,
+            onChange: (e) => onChange(e.currentTarget.checked),
+            size: "md",
+            styles: {
+              track: {
+                background: checked ? core.alpha(pc[6], 0.4) : "rgba(255,255,255,0.08)",
+                borderColor: checked ? core.alpha(pc[6], 0.6) : "rgba(255,255,255,0.1)"
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 var placementStyle = (placement) => {
   switch (placement) {
     case "top-center":
@@ -5382,32 +5421,13 @@ function ThemeOverrideSection({
             color
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          core.Flex,
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "xxs", style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xs", c: "rgba(255,255,255,0.9)", children: locale("OverrideGlobalTheme") || "Override global theme" }),
-                /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(
-                core.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__ */ jsxRuntime.jsxs(
@@ -5851,6 +5871,7 @@ exports.PromptModal = PromptModal;
 exports.SegmentedControl = SegmentedControl;
 exports.SegmentedProgress = SegmentedProgress;
 exports.SelectItem = SelectItem;
+exports.SwitchPanel = SwitchPanel;
 exports.TestBed = TestBed;
 exports.ThemeOverrideSection = ThemeOverrideSection;
 exports.Title = Title;