@vector-im/compound-web 8.0.0 → 8.1.0

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Label = require("../../Label.cjs");
+const Message = require("../../Message.cjs");
+const InlineField = require("../../InlineField.cjs");
+const reactForm = require("@radix-ui/react-form");
+const Toggle = require("../Toggle/Toggle.cjs");
+const SettingsToggleInput = React.forwardRef(function Toggle$1({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    InlineField.InlineField,
+    {
+      className,
+      name,
+      control: /* @__PURE__ */ jsxRuntime.jsx(Toggle.ToggleInput, { ref, ...props }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { children: label }),
+        helpMessage && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: helpMessage }),
+        disabledMessage && props.disabled && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: disabledMessage })
+      ]
+    }
+  );
+  return content;
+});
+const SettingsToggleControl = React.forwardRef(function ToggleControl(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(SettingsToggleInput, { ref, ...props }) });
+});
+exports.SettingsToggleControl = SettingsToggleControl;
+exports.SettingsToggleInput = SettingsToggleInput;
+//# sourceMappingURL=SettingsToggle.cjs.map

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsToggle.cjs","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput ref={ref} {...props} />}\n    >\n      <Label>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","Toggle","jsxs","InlineField","jsx","ToggleInput","Label","HelpMessage","Control"],"mappings":";;;;;;;;;AA2CO,MAAM,sBAAsBA,MAAA,WAGjC,SAASC,SACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,UACJC,2BAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAASC,2BAAA,IAACC,OAAY,aAAA,EAAA,KAAW,GAAG,MAAO,CAAA;AAAA,MAE3C,UAAA;AAAA,QAAAD,2BAAAA,IAACE,eAAO,UAAM,MAAA,CAAA;AAAA,QACb,eAAgBF,2BAAAA,IAAAG,QAAAA,aAAA,EAAa,UAAY,YAAA,CAAA;AAAA,QACzC,mBAAmB,MAAM,YACxBH,2BAAAA,IAACG,QAAAA,eAAa,UAAgB,gBAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAElC;AAEK,SAAA;AACT,CAAC;AAKM,MAAM,wBAAwBP,MAAAA,WAGnC,SAAS,cAAc,OAAO,KAAK;AAEjC,SAAAI,2BAAA,IAACI,qBAAQ,SAAO,MACd,yCAAC,qBAAoB,EAAA,KAAW,GAAG,MAAA,CAAO,EAC5C,CAAA;AAEJ,CAAC;;;"}

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.d.ts

@@ -0,0 +1,31 @@
+import { ComponentProps, PropsWithChildren, default as React } from 'react';
+import { ToggleInput } from '../Toggle';
+type SettingsToggleProps = {
+    /**
+     * The CSS class name for the containing field.
+     */
+    className?: string;
+    /**
+     * The field name.
+     */
+    name: string;
+    label: string;
+    /**
+     * Optional help text to display below the setting.
+     */
+    helpMessage?: string;
+    /**
+     * Optional help text to display below the setting.
+     */
+    disabledMessage?: string;
+} & Omit<ComponentProps<typeof ToggleInput>, "type">;
+/**
+ * A toggle component.
+ */
+export declare const SettingsToggleInput: React.ForwardRefExoticComponent<Omit<PropsWithChildren<SettingsToggleProps>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+/**
+ * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+ */
+export declare const SettingsToggleControl: React.ForwardRefExoticComponent<Omit<Omit<PropsWithChildren<SettingsToggleProps>, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=SettingsToggle.d.ts.map

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,cAAc,EAGd,iBAAiB,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,mBAAmB,8HAqB9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,mLAShC,CAAC"}

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Label } from "../../Label.js";
+import { HelpMessage } from "../../Message.js";
+import { InlineField } from "../../InlineField.js";
+import { Control } from "@radix-ui/react-form";
+import { ToggleInput } from "../Toggle/Toggle.js";
+const SettingsToggleInput = forwardRef(function Toggle({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
+  const content = /* @__PURE__ */ jsxs(
+    InlineField,
+    {
+      className,
+      name,
+      control: /* @__PURE__ */ jsx(ToggleInput, { ref, ...props }),
+      children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        helpMessage && /* @__PURE__ */ jsx(HelpMessage, { children: helpMessage }),
+        disabledMessage && props.disabled && /* @__PURE__ */ jsx(HelpMessage, { children: disabledMessage })
+      ]
+    }
+  );
+  return content;
+});
+const SettingsToggleControl = forwardRef(function ToggleControl(props, ref) {
+  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(SettingsToggleInput, { ref, ...props }) });
+});
+export {
+  SettingsToggleControl,
+  SettingsToggleInput
+};
+//# sourceMappingURL=SettingsToggle.js.map

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsToggle.js","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput ref={ref} {...props} />}\n    >\n      <Label>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AA2CO,MAAM,sBAAsB,WAGjC,SAAS,OACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS,oBAAC,aAAY,EAAA,KAAW,GAAG,MAAO,CAAA;AAAA,MAE3C,UAAA;AAAA,QAAA,oBAAC,SAAO,UAAM,MAAA,CAAA;AAAA,QACb,eAAgB,oBAAA,aAAA,EAAa,UAAY,YAAA,CAAA;AAAA,QACzC,mBAAmB,MAAM,YACxB,oBAAC,eAAa,UAAgB,gBAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAElC;AAEK,SAAA;AACT,CAAC;AAKM,MAAM,wBAAwB,WAGnC,SAAS,cAAc,OAAO,KAAK;AAEjC,SAAA,oBAAC,WAAQ,SAAO,MACd,8BAAC,qBAAoB,EAAA,KAAW,GAAG,MAAA,CAAO,EAC5C,CAAA;AAEJ,CAAC;"}

package/dist/components/Form/Controls/SettingsToggle/index.d.ts

@@ -0,0 +1,2 @@
+export { SettingsToggleControl, SettingsToggleInput } from './SettingsToggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Form/Controls/SettingsToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/SettingsToggle/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Form/Controls/index.d.ts

@@ -6,4 +6,5 @@ export { CheckboxControl, CheckboxInput } from './Checkbox';
 export { RadioControl, RadioInput } from './Radio';
 export { ToggleControl, ToggleInput } from './Toggle';
 export { EditInPlace } from './EditInPlace';
+export { SettingsToggleInput, SettingsToggleControl } from './SettingsToggle';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Form/Controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Controls/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Controls/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Form/index.cjs

@@ -15,6 +15,7 @@ const Checkbox = require("./Controls/Checkbox/Checkbox.cjs");
 const Radio = require("./Controls/Radio/Radio.cjs");
 const Toggle = require("./Controls/Toggle/Toggle.cjs");
 const EditInPlace = require("./Controls/EditInPlace/EditInPlace.cjs");
+const SettingsToggle = require("./Controls/SettingsToggle/SettingsToggle.cjs");
 exports.Root = Root.Root;
 exports.Field = Field.Field;
 exports.InlineField = InlineField.InlineField;
@@ -47,4 +48,6 @@ exports.RadioInput = Radio.RadioInput;
 exports.ToggleControl = Toggle.ToggleControl;
 exports.ToggleInput = Toggle.ToggleInput;
 exports.EditInPlace = EditInPlace.EditInPlace;
+exports.SettingsToggleControl = SettingsToggle.SettingsToggleControl;
+exports.SettingsToggleInput = SettingsToggle.SettingsToggleInput;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Form/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Form/index.d.ts

@@ -1,4 +1,4 @@
-export { ActionControl, ActionInput, PasswordControl, PasswordInput, TextControl, TextInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, RadioControl, RadioInput, ToggleControl, ToggleInput, EditInPlace, } from './Controls';
+export { ActionControl, ActionInput, PasswordControl, PasswordInput, TextControl, TextInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, RadioControl, RadioInput, ToggleControl, ToggleInput, EditInPlace, SettingsToggleInput, SettingsToggleControl, } from './Controls';
 export { Root } from './Root';
 export { Field } from './Field';
 export { InlineField } from './InlineField';

package/dist/components/Form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EACb,YAAY,EACZ,UAAU,EACV,aAAa,EACb,WAAW,EACX,WAAW,GACZ,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EACb,YAAY,EACZ,UAAU,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Form/index.js

@@ -13,6 +13,7 @@ import { CheckboxControl, CheckboxInput } from "./Controls/Checkbox/Checkbox.js"
 import { RadioControl, RadioInput } from "./Controls/Radio/Radio.js";
 import { ToggleControl, ToggleInput } from "./Controls/Toggle/Toggle.js";
 import { EditInPlace } from "./Controls/EditInPlace/EditInPlace.js";
+import { SettingsToggleControl, SettingsToggleInput } from "./Controls/SettingsToggle/SettingsToggle.js";
 export {
   ActionControl,
   ActionInput,
@@ -33,6 +34,8 @@ export {
   RadioControl,
   RadioInput,
   Root,
+  SettingsToggleControl,
+  SettingsToggleInput,
   Submit,
   SuccessMessage,
   TextControl,

package/dist/components/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/index.cjs

@@ -57,6 +57,7 @@ const Field = require("./components/Form/Field.cjs");
 const InlineField = require("./components/Form/InlineField.cjs");
 const Label = require("./components/Form/Label.cjs");
 const EditInPlace = require("./components/Form/Controls/EditInPlace/EditInPlace.cjs");
+const SettingsToggle = require("./components/Form/Controls/SettingsToggle/SettingsToggle.cjs");
 exports.Alert = Alert.Alert;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarStack = AvatarStack.AvatarStack;
@@ -138,4 +139,6 @@ exports.Field = Field.Field;
 exports.InlineField = InlineField.InlineField;
 exports.Label = Label.Label;
 exports.EditInPlace = EditInPlace.EditInPlace;
+exports.SettingsToggleControl = SettingsToggle.SettingsToggleControl;
+exports.SettingsToggleInput = SettingsToggle.SettingsToggleInput;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -34,7 +34,7 @@ export { Breadcrumb } from './components/Breadcrumb';
 export { VisualList, VisualListItem } from './components/VisualList';
 export { ChatFilter } from './components/ChatFilter';
 export { UnreadCounter, Pill, Unread } from './components/ActivityMarker';
-export { TextControl, TextControl as Control, TextInput, ActionControl, ActionInput, PasswordControl, PasswordInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, CheckboxInput as Checkbox, RadioControl, RadioInput, RadioInput as Radio, ToggleControl, ToggleInput, ToggleInput as Toggle, Root, Submit, Message, ErrorMessage, HelpMessage, ValidityState, Field, InlineField, Label, EditInPlace, } from './components/Form';
+export { TextControl, TextControl as Control, TextInput, ActionControl, ActionInput, PasswordControl, PasswordInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, CheckboxInput as Checkbox, RadioControl, RadioInput, RadioInput as Radio, ToggleControl, ToggleInput, ToggleInput as Toggle, Root, Submit, Message, ErrorMessage, HelpMessage, ValidityState, Field, InlineField, Label, EditInPlace, SettingsToggleInput, SettingsToggleControl, } from './components/Form';
 export * as Form from './components/Form';
 /**
  * Export utility functions

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EACL,OAAO,EACP,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,GACH,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EACL,WAAW,EAEX,WAAW,IAAI,OAAO,EACtB,SAAS,EACT,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,aAAa,IAAI,QAAQ,EACzB,YAAY,EACZ,UAAU,EAEV,UAAU,IAAI,KAAK,EACnB,aAAa,EACb,WAAW,EAEX,WAAW,IAAI,MAAM,EACrB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,IAAI,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,qBAAqB,CAAC"}

package/dist/index.js

@@ -55,6 +55,7 @@ import { Field } from "./components/Form/Field.js";
 import { InlineField } from "./components/Form/InlineField.js";
 import { Label } from "./components/Form/Label.js";
 import { EditInPlace } from "./components/Form/Controls/EditInPlace/EditInPlace.js";
+import { SettingsToggleControl, SettingsToggleInput } from "./components/Form/Controls/SettingsToggle/SettingsToggle.js";
 export {
   ActionControl,
   ActionInput,
@@ -113,6 +114,8 @@ export {
   Root,
   Search,
   Separator,
+  SettingsToggleControl,
+  SettingsToggleInput,
   Submit,
   Text,
   TextControl2 as TextControl,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx

@@ -0,0 +1,79 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+  ComponentProps,
+  ComponentRef,
+  forwardRef,
+  PropsWithChildren,
+} from "react";
+import { ToggleInput } from "../Toggle";
+import { Label } from "../../Label";
+import { HelpMessage } from "../../Message";
+import { InlineField } from "../../InlineField";
+import React from "react";
+import { Control } from "@radix-ui/react-form";
+
+type SettingsToggleProps = {
+  /**
+   * The CSS class name for the containing field.
+   */
+  className?: string;
+  /**
+   * The field name.
+   */
+  name: string;
+  label: string;
+  /**
+   * Optional help text to display below the setting.
+   */
+  helpMessage?: string;
+  /**
+   * Optional help text to display below the setting.
+   */
+  disabledMessage?: string;
+} & Omit<ComponentProps<typeof ToggleInput>, "type">;
+
+/**
+ * A toggle component.
+ */
+export const SettingsToggleInput = forwardRef<
+  HTMLInputElement,
+  PropsWithChildren<SettingsToggleProps>
+>(function Toggle(
+  { className, label, helpMessage, disabledMessage, name, ...props },
+  ref,
+) {
+  const content = (
+    <InlineField
+      className={className}
+      name={name}
+      control={<ToggleInput ref={ref} {...props} />}
+    >
+      <Label>{label}</Label>
+      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}
+      {disabledMessage && props.disabled && (
+        <HelpMessage>{disabledMessage}</HelpMessage>
+      )}
+    </InlineField>
+  );
+  return content;
+});
+
+/**
+ * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+ */
+export const SettingsToggleControl = forwardRef<
+  ComponentRef<typeof SettingsToggleInput>,
+  ComponentProps<typeof SettingsToggleInput>
+>(function ToggleControl(props, ref) {
+  return (
+    <Control asChild>
+      <SettingsToggleInput ref={ref} {...props} />
+    </Control>
+  );
+});

package/src/components/Form/Controls/SettingsToggle/index.ts

@@ -0,0 +1,10 @@
+/*
+Copyright 2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2023 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export { SettingsToggleControl, SettingsToggleInput } from "./SettingsToggle";

package/src/components/Form/Controls/index.ts

@@ -15,3 +15,4 @@ export { CheckboxControl, CheckboxInput } from "./Checkbox";
 export { RadioControl, RadioInput } from "./Radio";
 export { ToggleControl, ToggleInput } from "./Toggle";
 export { EditInPlace } from "./EditInPlace";
+export { SettingsToggleInput, SettingsToggleControl } from "./SettingsToggle";

package/src/components/Form/index.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd.
+Copyright 2023-2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
@@ -21,6 +21,8 @@ export {
   ToggleControl,
   ToggleInput,
   EditInPlace,
+  SettingsToggleInput,
+  SettingsToggleControl,
 } from "./Controls";
 
 export { Root } from "./Root";

package/src/index.ts

@@ -85,6 +85,8 @@ export {
   InlineField,
   Label,
   EditInPlace,
+  SettingsToggleInput,
+  SettingsToggleControl,
 } from "./components/Form";
 export * as Form from "./components/Form";