dirk-cfx-react 1.1.80 → 1.1.81

package/dist/components/index.d.cts

@@ -977,8 +977,12 @@ type SwitchPanelProps = {
     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 }: SwitchPanelProps): react_jsx_runtime.JSX.Element;
+declare function SwitchPanel({ label, description, checked, onChange, disabled, thumbIcon, compact, }: SwitchPanelProps): react_jsx_runtime.JSX.Element;
 
 type MissingItem = {
     name: string;

package/dist/components/index.d.ts

@@ -977,8 +977,12 @@ type SwitchPanelProps = {
     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 }: SwitchPanelProps): react_jsx_runtime.JSX.Element;
+declare function SwitchPanel({ label, description, checked, onChange, disabled, thumbIcon, compact, }: SwitchPanelProps): react_jsx_runtime.JSX.Element;
 
 type MissingItem = {
     name: string;

package/dist/components/index.js

@@ -5125,25 +5125,46 @@ 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 }) {
+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",
-      p: "xs",
+      px: compact ? "xs" : "xs",
+      py: compact ? "xxs" : "xs",
       style: {
-        background: alpha(theme.colors.dark[5], 0.35),
-        border: "0.1vh solid rgba(255,255,255,0.05)",
+        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" ? /* @__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: "rgba(255,255,255,0.45)", children: description }) : description)
+          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,
@@ -5151,7 +5172,8 @@ function SwitchPanel({ label, description, checked, onChange, disabled }) {
             checked,
             disabled,
             onChange: (e) => onChange(e.currentTarget.checked),
-            size: "md",
+            size: compact ? "sm" : "md",
+            thumbIcon,
             styles: {
               track: {
                 background: checked ? alpha(pc[6], 0.4) : "rgba(255,255,255,0.08)",