@vector-im/compound-web 8.1.2 → 8.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs +4 -2
  2. package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs.map +1 -1
  3. package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.d.ts.map +1 -1
  4. package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js +5 -3
  5. package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js.map +1 -1
  6. package/dist/components/Form/Controls/Toggle/Toggle.cjs +10 -1
  7. package/dist/components/Form/Controls/Toggle/Toggle.cjs.map +1 -1
  8. package/dist/components/Form/Controls/Toggle/Toggle.d.ts.map +1 -1
  9. package/dist/components/Form/Controls/Toggle/Toggle.js +10 -1
  10. package/dist/components/Form/Controls/Toggle/Toggle.js.map +1 -1
  11. package/package.json +4 -3
  12. package/src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx +5 -2
  13. package/src/components/Form/Controls/Toggle/Toggle.tsx +7 -1
package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs CHANGED
@@ -8,14 +8,16 @@ const InlineField = require("../../InlineField.cjs");
8
8
  const reactForm = require("@radix-ui/react-form");
9
9
  const Toggle = require("../Toggle/Toggle.cjs");
10
10
  const SettingsToggleInput = React.forwardRef(function Toggle$1({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
11
+ const generatedId = React.useId();
12
+ const id = props.id ?? generatedId;
11
13
  const content = /* @__PURE__ */ jsxRuntime.jsxs(
12
14
  InlineField.InlineField,
13
15
  {
14
16
  className,
15
17
  name,
16
- control: /* @__PURE__ */ jsxRuntime.jsx(Toggle.ToggleInput, { ref, ...props }),
18
+ control: /* @__PURE__ */ jsxRuntime.jsx(Toggle.ToggleInput, { id, ref, ...props }),
17
19
  children: [
18
- /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { children: label }),
20
+ /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: id, children: label }),
19
21
  helpMessage && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: helpMessage }),
20
22
  disabledMessage && props.disabled && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: disabledMessage })
21
23
  ]
package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs.map CHANGED
@@ -1 +1 @@
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;;;"}
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 useId,\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 generatedId = useId();\n const id = props.id ?? generatedId;\n const content = (\n <InlineField\n className={className}\n name={name}\n control={<ToggleInput id={id} ref={ref} {...props} />}\n >\n <Label htmlFor={id}>{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","useId","jsxs","InlineField","jsx","ToggleInput","Label","HelpMessage","Control"],"mappings":";;;;;;;;;AA4CO,MAAM,sBAAsBA,MAAA,WAGjC,SAASC,SACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,cAAcC,MAAAA,MAAM;AACpB,QAAA,KAAK,MAAM,MAAM;AACvB,QAAM,UACJC,2BAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAUC,2BAAA,IAAAC,oBAAA,EAAY,IAAQ,KAAW,GAAG,OAAO;AAAA,MAEnD,UAAA;AAAA,QAACD,2BAAA,IAAAE,MAAA,OAAA,EAAM,SAAS,IAAK,UAAM,OAAA;AAAA,QAC1B,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,wBAAwBR,MAAAA,WAGnC,SAAS,cAAc,OAAO,KAAK;AAEjC,SAAAK,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.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"SettingsToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,cAAc,EAGd,iBAAiB,EAElB,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,8HAuB9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,mLAShC,CAAC"}
package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js CHANGED
@@ -1,19 +1,21 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
2
+ import { forwardRef, useId } from "react";
3
3
  import { Label } from "../../Label.js";
4
4
  import { HelpMessage } from "../../Message.js";
5
5
  import { InlineField } from "../../InlineField.js";
6
6
  import { Control } from "@radix-ui/react-form";
7
7
  import { ToggleInput } from "../Toggle/Toggle.js";
8
8
  const SettingsToggleInput = forwardRef(function Toggle({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
9
+ const generatedId = useId();
10
+ const id = props.id ?? generatedId;
9
11
  const content = /* @__PURE__ */ jsxs(
10
12
  InlineField,
11
13
  {
12
14
  className,
13
15
  name,
14
- control: /* @__PURE__ */ jsx(ToggleInput, { ref, ...props }),
16
+ control: /* @__PURE__ */ jsx(ToggleInput, { id, ref, ...props }),
15
17
  children: [
16
- /* @__PURE__ */ jsx(Label, { children: label }),
18
+ /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
17
19
  helpMessage && /* @__PURE__ */ jsx(HelpMessage, { children: helpMessage }),
18
20
  disabledMessage && props.disabled && /* @__PURE__ */ jsx(HelpMessage, { children: disabledMessage })
19
21
  ]
package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js.map CHANGED
@@ -1 +1 @@
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;"}
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 useId,\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 generatedId = useId();\n const id = props.id ?? generatedId;\n const content = (\n <InlineField\n className={className}\n name={name}\n control={<ToggleInput id={id} ref={ref} {...props} />}\n >\n <Label htmlFor={id}>{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":";;;;;;;AA4CO,MAAM,sBAAsB,WAGjC,SAAS,OACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,cAAc,MAAM;AACpB,QAAA,KAAK,MAAM,MAAM;AACvB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAU,oBAAA,aAAA,EAAY,IAAQ,KAAW,GAAG,OAAO;AAAA,MAEnD,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAM,SAAS,IAAK,UAAM,OAAA;AAAA,QAC1B,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/Toggle/Toggle.cjs CHANGED
@@ -8,7 +8,16 @@ const reactForm = require("@radix-ui/react-form");
8
8
  const ToggleInput = React.forwardRef(function Toggle({ className, ...props }, ref) {
9
9
  const classes = classNames(Toggle_module.default.container, className);
10
10
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
11
- /* @__PURE__ */ jsxRuntime.jsx("input", { ref, className: Toggle_module.default.input, ...props, type: "checkbox" }),
11
+ /* @__PURE__ */ jsxRuntime.jsx(
12
+ "input",
13
+ {
14
+ role: "switch",
15
+ ref,
16
+ className: Toggle_module.default.input,
17
+ ...props,
18
+ type: "checkbox"
19
+ }
20
+ ),
12
21
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: Toggle_module.default.ui })
13
22
  ] });
14
23
  });
package/dist/components/Form/Controls/Toggle/Toggle.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.cjs","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\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 classnames from \"classnames\";\nimport React, {\n ComponentProps,\n ComponentRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n /**\n * The CSS class name.\n */\n className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n HTMLInputElement,\n PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n const classes = classnames(styles.container, className);\n return (\n <div className={classes}>\n <input ref={ref} className={styles.input} {...props} type=\"checkbox\" />\n <div className={styles.ui} />\n </div>\n );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n ComponentRef<typeof ToggleInput>,\n ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n return (\n <Control asChild>\n <ToggleInput ref={ref} {...props} />\n </Control>\n );\n});\n"],"names":["forwardRef","classnames","styles","jsxs","jsx","ToggleControl","Control"],"mappings":";;;;;;;AA6Ba,MAAA,cAAcA,iBAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,QAAM,UAAUC,WAAWC,sBAAO,WAAW,SAAS;AAEpD,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,IAACC,2BAAAA,IAAA,SAAA,EAAM,KAAU,WAAWF,cAAAA,QAAO,OAAQ,GAAG,OAAO,MAAK,YAAW;AAAA,IACpEE,2BAAAA,IAAA,OAAA,EAAI,WAAWF,cAAAA,QAAO,GAAI,CAAA;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgBF,MAAAA,WAG3B,SAASK,eAAc,OAAO,KAAK;AAEjC,SAAAD,2BAAA,IAACE,qBAAQ,SAAO,MACd,yCAAC,aAAY,EAAA,KAAW,GAAG,MAAA,CAAO,EACpC,CAAA;AAEJ,CAAC;;;"}
1
+ {"version":3,"file":"Toggle.cjs","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\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 classnames from \"classnames\";\nimport React, {\n ComponentProps,\n ComponentRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n /**\n * The CSS class name.\n */\n className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n HTMLInputElement,\n PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n const classes = classnames(styles.container, className);\n return (\n <div className={classes}>\n <input\n role=\"switch\"\n ref={ref}\n className={styles.input}\n {...props}\n type=\"checkbox\"\n />\n <div className={styles.ui} />\n </div>\n );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n ComponentRef<typeof ToggleInput>,\n ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n return (\n <Control asChild>\n <ToggleInput ref={ref} {...props} />\n </Control>\n );\n});\n"],"names":["forwardRef","classnames","styles","jsxs","jsx","ToggleControl","Control"],"mappings":";;;;;;;AA6Ba,MAAA,cAAcA,iBAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,QAAM,UAAUC,WAAWC,sBAAO,WAAW,SAAS;AAEpD,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,WAAWF,cAAO,QAAA;AAAA,QACjB,GAAG;AAAA,QACJ,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,IACCE,2BAAAA,IAAA,OAAA,EAAI,WAAWF,cAAAA,QAAO,GAAI,CAAA;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgBF,MAAAA,WAG3B,SAASK,eAAc,OAAO,KAAK;AAEjC,SAAAD,2BAAA,IAACE,qBAAQ,SAAO,MACd,yCAAC,aAAY,EAAA,KAAW,GAAG,MAAA,CAAO,EACpC,CAAA;AAEJ,CAAC;;;"}
package/dist/components/Form/Controls/Toggle/Toggle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,EACZ,cAAc,EAIf,MAAM,OAAO,CAAC;AAIf,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,WAAW,4HAWtB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,aAAa,iLASxB,CAAC"}
1
+ {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,EACZ,cAAc,EAIf,MAAM,OAAO,CAAC;AAIf,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,WAAW,4HAiBtB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,aAAa,iLASxB,CAAC"}
package/dist/components/Form/Controls/Toggle/Toggle.js CHANGED
@@ -6,7 +6,16 @@ import { Control } from "@radix-ui/react-form";
6
6
  const ToggleInput = forwardRef(function Toggle({ className, ...props }, ref) {
7
7
  const classes = classNames(styles.container, className);
8
8
  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
9
- /* @__PURE__ */ jsx("input", { ref, className: styles.input, ...props, type: "checkbox" }),
9
+ /* @__PURE__ */ jsx(
10
+ "input",
11
+ {
12
+ role: "switch",
13
+ ref,
14
+ className: styles.input,
15
+ ...props,
16
+ type: "checkbox"
17
+ }
18
+ ),
10
19
  /* @__PURE__ */ jsx("div", { className: styles.ui })
11
20
  ] });
12
21
  });
package/dist/components/Form/Controls/Toggle/Toggle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.js","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\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 classnames from \"classnames\";\nimport React, {\n ComponentProps,\n ComponentRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n /**\n * The CSS class name.\n */\n className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n HTMLInputElement,\n PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n const classes = classnames(styles.container, className);\n return (\n <div className={classes}>\n <input ref={ref} className={styles.input} {...props} type=\"checkbox\" />\n <div className={styles.ui} />\n </div>\n );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n ComponentRef<typeof ToggleInput>,\n ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n return (\n <Control asChild>\n <ToggleInput ref={ref} {...props} />\n </Control>\n );\n});\n"],"names":["classnames","ToggleControl"],"mappings":";;;;;AA6Ba,MAAA,cAAc,WAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,QAAM,UAAUA,WAAW,OAAO,WAAW,SAAS;AAEpD,SAAA,qBAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAM,KAAU,WAAW,OAAO,OAAQ,GAAG,OAAO,MAAK,YAAW;AAAA,IACpE,oBAAA,OAAA,EAAI,WAAW,OAAO,GAAI,CAAA;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgB,WAG3B,SAASC,eAAc,OAAO,KAAK;AAEjC,SAAA,oBAAC,WAAQ,SAAO,MACd,8BAAC,aAAY,EAAA,KAAW,GAAG,MAAA,CAAO,EACpC,CAAA;AAEJ,CAAC;"}
1
+ {"version":3,"file":"Toggle.js","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\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 classnames from \"classnames\";\nimport React, {\n ComponentProps,\n ComponentRef,\n forwardRef,\n PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n /**\n * The CSS class name.\n */\n className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n HTMLInputElement,\n PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n const classes = classnames(styles.container, className);\n return (\n <div className={classes}>\n <input\n role=\"switch\"\n ref={ref}\n className={styles.input}\n {...props}\n type=\"checkbox\"\n />\n <div className={styles.ui} />\n </div>\n );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n ComponentRef<typeof ToggleInput>,\n ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n return (\n <Control asChild>\n <ToggleInput ref={ref} {...props} />\n </Control>\n );\n});\n"],"names":["classnames","ToggleControl"],"mappings":";;;;;AA6Ba,MAAA,cAAc,WAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,QAAM,UAAUA,WAAW,OAAO,WAAW,SAAS;AAEpD,SAAA,qBAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,WAAW,OAAO;AAAA,QACjB,GAAG;AAAA,QACJ,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,IACC,oBAAA,OAAA,EAAI,WAAW,OAAO,GAAI,CAAA;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgB,WAG3B,SAASC,eAAc,OAAO,KAAK;AAEjC,SAAA,oBAAC,WAAQ,SAAO,MACd,8BAAC,aAAY,EAAA,KAAW,GAAG,MAAA,CAAO,EACpC,CAAA;AAEJ,CAAC;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vector-im/compound-web",
3
- "version": "8.1.2",
3
+ "version": "8.2.0",
4
4
  "description": "Compound components for the Web",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -50,6 +50,7 @@
50
50
  },
51
51
  "homepage": "https://github.com/vector-im/compound-web#readme",
52
52
  "devDependencies": {
53
+ "@element-hq/element-web-playwright-common": "^1.4.2",
53
54
  "@fontsource/inconsolata": "^5.0.8",
54
55
  "@fontsource/inter": "^5.0.8",
55
56
  "@playwright/test": "^1.41.1",
@@ -74,7 +75,7 @@
74
75
  "@types/react": "^19.0.0",
75
76
  "@typescript-eslint/eslint-plugin": "^8.0.0",
76
77
  "@typescript-eslint/parser": "^8.0.0",
77
- "@vector-im/compound-design-tokens": "^4.0.0",
78
+ "@vector-im/compound-design-tokens": "^5.0.0",
78
79
  "@vitejs/plugin-react": "^4.0.4",
79
80
  "@vitest/coverage-v8": "^3.0.0",
80
81
  "browserslist-to-esbuild": "^2.0.0",
@@ -117,7 +118,7 @@
117
118
  "@fontsource/inconsolata": "^5",
118
119
  "@fontsource/inter": "^5",
119
120
  "@types/react": "*",
120
- "@vector-im/compound-design-tokens": ">=1.6.1 <5.0.0",
121
+ "@vector-im/compound-design-tokens": ">=1.6.1 <6.0.0",
121
122
  "react": "^18 || ^19.0.0"
122
123
  },
123
124
  "peerDependenciesMeta": {
package/src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  ComponentRef,
11
11
  forwardRef,
12
12
  PropsWithChildren,
13
+ useId,
13
14
  } from "react";
14
15
  import { ToggleInput } from "../Toggle";
15
16
  import { Label } from "../../Label";
@@ -48,13 +49,15 @@ export const SettingsToggleInput = forwardRef<
48
49
  { className, label, helpMessage, disabledMessage, name, ...props },
49
50
  ref,
50
51
  ) {
52
+ const generatedId = useId();
53
+ const id = props.id ?? generatedId;
51
54
  const content = (
52
55
  <InlineField
53
56
  className={className}
54
57
  name={name}
55
- control={<ToggleInput ref={ref} {...props} />}
58
+ control={<ToggleInput id={id} ref={ref} {...props} />}
56
59
  >
57
- <Label>{label}</Label>
60
+ <Label htmlFor={id}>{label}</Label>
58
61
  {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}
59
62
  {disabledMessage && props.disabled && (
60
63
  <HelpMessage>{disabledMessage}</HelpMessage>
package/src/components/Form/Controls/Toggle/Toggle.tsx CHANGED
@@ -34,7 +34,13 @@ export const ToggleInput = forwardRef<
34
34
  const classes = classnames(styles.container, className);
35
35
  return (
36
36
  <div className={classes}>
37
- <input ref={ref} className={styles.input} {...props} type="checkbox" />
37
+ <input
38
+ role="switch"
39
+ ref={ref}
40
+ className={styles.input}
41
+ {...props}
42
+ type="checkbox"
43
+ />
38
44
  <div className={styles.ui} />
39
45
  </div>
40
46
  );