@vector-im/compound-web 8.0.0 → 8.1.1

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/components/Menu/ContextMenu.cjs

@@ -7,6 +7,7 @@ const FloatingMenu = require("./FloatingMenu.cjs");
 const vaul = require("vaul");
 const classNames = require("classnames");
 const DrawerMenu_module = require("./DrawerMenu.module.css.cjs");
+const ContextMenu_module = require("./ContextMenu.module.css.cjs");
 const MenuContext = require("./MenuContext.cjs");
 const DrawerMenu = require("./DrawerMenu.cjs");
 const platform = require("../../utils/platform.cjs");
@@ -57,7 +58,7 @@ const ContextMenu = ({
     ] }) })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactContextMenu.Root, { onOpenChange, children: [
     trigger,
-    /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { showTitle, title, children }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Content, { asChild: true, className: classNames(ContextMenu_module.default.content), children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { showTitle, title, children }) }) })
   ] });
 };
 exports.ContextMenu = ContextMenu;

package/dist/components/Menu/ContextMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.cjs","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 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 React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["ContextMenuItem","useState","useCallback","platform","getPlatform","useMemo","jsx","MenuContext","Trigger","jsxs","Fragment","Root","Drawer","classnames","drawerStyles","DrawerMenu","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAwDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,qCACGA,kCAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,KAAK;AACtC,QAAM,eAAeC,MAAA;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJD,2BAAA;AAAA,IAACE,iBAAA;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEHC,2BAAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,IAACJ,2BAAAA,IAAAK,iBAAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3CL,2BAAAA,IAACM,YAAO,MAAP,EAAY,MAAY,cACvB,UAAAH,gCAACG,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAN,+BAACM,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAa,EAAE,GAAG;AAAA,MACxDR,2BAAAA,IAACM,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACN,2BAAAA,IAAAS,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAECN,2BAAA,KAAAE,iBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACAL,2BAAA,IAAAU,iBAAA,QAAA,EACC,UAACV,2BAAA,IAAAW,iBAAA,SAAA,EAAQ,SAAO,MACd,UAACX,2BAAA,IAAAY,aAAA,cAAA,EAAa,WAAsB,OACjC,SACH,CAAA,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"ContextMenu.cjs","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 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 React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport contextStyles from \"./ContextMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild className={classnames(contextStyles.content)}>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["ContextMenuItem","useState","useCallback","platform","getPlatform","useMemo","jsx","MenuContext","Trigger","jsxs","Fragment","Root","Drawer","classnames","drawerStyles","DrawerMenu","Portal","Content","contextStyles","FloatingMenu"],"mappings":";;;;;;;;;;;;;AAyDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,qCACGA,kCAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,KAAK;AACtC,QAAM,eAAeC,MAAA;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJD,2BAAA;AAAA,IAACE,iBAAA;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEHC,2BAAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,IAACJ,2BAAAA,IAAAK,iBAAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3CL,2BAAAA,IAACM,YAAO,MAAP,EAAY,MAAY,cACvB,UAAAH,gCAACG,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAN,+BAACM,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAa,EAAE,GAAG;AAAA,MACxDR,2BAAAA,IAACM,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACN,2BAAAA,IAAAS,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAECN,2BAAA,KAAAE,iBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,mCACAK,iBAAAA,QACC,EAAA,UAAAV,2BAAA,IAACW,iBAAQ,SAAA,EAAA,SAAO,MAAC,WAAWJ,WAAWK,mBAAc,QAAA,OAAO,GAC1D,UAACZ,2BAAAA,IAAAa,aAAA,cAAA,EAAa,WAAsB,OACjC,UACH,GACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/components/Menu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ContextMenu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAgB7E,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CAwEjC,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ContextMenu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAiB7E,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CAwEjC,CAAC"}

package/dist/components/Menu/ContextMenu.js

@@ -5,6 +5,7 @@ import { FloatingMenu } from "./FloatingMenu.js";
 import { Drawer } from "vaul";
 import classNames from "classnames";
 import drawerMenu from "./DrawerMenu.module.css.js";
+import contextStyles from "./ContextMenu.module.css.js";
 import { MenuContext } from "./MenuContext.js";
 import { DrawerMenu } from "./DrawerMenu.js";
 import { getPlatform } from "../../utils/platform.js";
@@ -55,7 +56,7 @@ const ContextMenu = ({
     ] }) })
   ] }) : /* @__PURE__ */ jsxs(Root, { onOpenChange, children: [
     trigger,
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, children: /* @__PURE__ */ jsx(FloatingMenu, { showTitle, title, children }) }) })
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, className: classNames(contextStyles.content), children: /* @__PURE__ */ jsx(FloatingMenu, { showTitle, title, children }) }) })
   ] });
 };
 export {

package/dist/components/Menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 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 React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames","drawerStyles"],"mappings":";;;;;;;;;;AAwDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,0BACG,iBAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEH,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3C,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAWC,WAAa,EAAE,GAAG;AAAA,MACxD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAEC,qBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACA,oBAAA,QAAA,EACC,UAAC,oBAAA,SAAA,EAAQ,SAAO,MACd,UAAC,oBAAA,cAAA,EAAa,WAAsB,OACjC,SACH,CAAA,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 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 React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport contextStyles from \"./ContextMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild className={classnames(contextStyles.content)}>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames","drawerStyles"],"mappings":";;;;;;;;;;;AAyDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,0BACG,iBAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEH,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3C,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAWC,WAAa,EAAE,GAAG;AAAA,MACxD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAEC,qBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,wBACA,QACC,EAAA,UAAA,oBAAC,SAAQ,EAAA,SAAO,MAAC,WAAWD,WAAW,cAAc,OAAO,GAC1D,UAAC,oBAAA,cAAA,EAAa,WAAsB,OACjC,UACH,GACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Menu/ContextMenu.module.css.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const content = "_content_vnv5k_8";
+const contextStyles = {
+  content
+};
+exports.content = content;
+exports.default = contextStyles;
+//# sourceMappingURL=ContextMenu.module.css.cjs.map

package/dist/components/Menu/ContextMenu.module.css.cjs.map

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

package/dist/components/Menu/ContextMenu.module.css.js

@@ -0,0 +1,9 @@
+const content = "_content_vnv5k_8";
+const contextStyles = {
+  content
+};
+export {
+  content,
+  contextStyles as default
+};
+//# sourceMappingURL=ContextMenu.module.css.js.map

package/dist/components/Menu/ContextMenu.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.module.css.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":"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"}

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/dist/style.css.css

@@ -779,6 +779,16 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-icon-secondary);
   border-radius: var(--cpd-radius-pill-effect);
 }
+/*
+ * 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.
+ */
+
+._content_vnv5k_8[data-state="closed"] {
+  animation: none;
+}
 /*
 Copyright 2023 New Vector Ltd.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.0.0",
+  "version": "8.1.1",
   "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/components/Menu/ContextMenu.module.css

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+.content[data-state="closed"] {
+  animation: none;
+}

package/src/components/Menu/ContextMenu.tsx

@@ -17,6 +17,7 @@ import { FloatingMenu } from "./FloatingMenu";
 import { Drawer } from "vaul";
 import classnames from "classnames";
 import drawerStyles from "./DrawerMenu.module.css";
+import contextStyles from "./ContextMenu.module.css";
 import { MenuContext, MenuData, MenuItemWrapperProps } from "./MenuContext";
 import { DrawerMenu } from "./DrawerMenu";
 import { getPlatform } from "../../utils/platform";
@@ -130,7 +131,7 @@ export const ContextMenu: FC<Props> = ({
     <Root onOpenChange={onOpenChange}>
       {trigger}
       <Portal>
-        <Content asChild>
+        <Content asChild className={classnames(contextStyles.content)}>
           <FloatingMenu showTitle={showTitle} title={title}>
             {children}
           </FloatingMenu>

package/src/index.ts

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