chore(docs): add switch demos page

apps/docs/src/app/components/switch/ControllingSwitches.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { Form, Switch, box } from "@react-md/core";
+import { useState, type ReactElement } from "react";
+
+export default function ControllingSwitches(): ReactElement {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Form className={box()}>
+      <Switch
+        label="Label"
+        checked={checked}
+        onChange={(event) => setChecked(event.currentTarget.checked)}
+      />
+    </Form>
+  );
+}

apps/docs/src/app/components/switch/IconAfterLabel.tsx

@@ -0,0 +1,11 @@
+import { Form, Switch, box } from "@react-md/core";
+import { type ReactElement } from "react";
+
+export default function IconAfterLabel(): ReactElement {
+  return (
+    <Form className={box()}>
+      <Switch label="Label" iconAfter />
+      <Switch label="Label" iconAfter />
+    </Form>
+  );
+}

apps/docs/src/app/components/switch/SimpleSwitch.tsx

@@ -0,0 +1,12 @@
+import { Form, Switch, box } from "@react-md/core";
+import { type ReactElement } from "react";
+
+export default function SimpleSwitch(): ReactElement {
+  return (
+    <Form className={box()}>
+      <Switch label="Label" />
+      <Switch label="Label" defaultChecked />
+      <Switch label="Disabled" disabled />
+    </Form>
+  );
+}

apps/docs/src/app/components/switch/StackedSwitch.tsx

@@ -0,0 +1,11 @@
+import { Form, Switch, box } from "@react-md/core";
+import { type ReactElement } from "react";
+
+export default function StackedSwitch(): ReactElement {
+  return (
+    <Form className={box({ align: "start", stacked: true })}>
+      <Switch label="Stacked" stacked iconAfter />
+      <Switch label="Stacked" stacked />
+    </Form>
+  );
+}

apps/docs/src/app/components/switch/SwitchSizes.tsx

@@ -0,0 +1,13 @@
+import { Form, Switch, box } from "@react-md/core";
+import { type ReactElement } from "react";
+
+export default function SwitchSizes(): ReactElement {
+  return (
+    <Form className={box({ align: "start", stacked: true })}>
+      <Switch label="Small" style={{ fontSize: "0.75rem" }} />
+      <Switch label="Medium" style={{ fontSize: "1.25rem" }} />
+      <Switch label="Large" style={{ fontSize: "2rem" }} />
+      <Switch label="Toggle Only" trackStyle={{ fontSize: "1.5rem" }} />
+    </Form>
+  );
+}

apps/docs/src/app/components/switch/SwitchStates.tsx

@@ -0,0 +1,13 @@
+import { Form, Switch, box } from "@react-md/core";
+import { type ReactElement } from "react";
+
+export default function SwitchStates(): ReactElement {
+  return (
+    <Form className={box()}>
+      <Switch label="Normal" />
+      <Switch label="Error" error />
+      <Switch label="Disabled" disabled />
+      <Switch label="Active" active />
+    </Form>
+  );
+}

apps/docs/src/app/components/switch/SwitchWithCircularProgress.tsx

@@ -0,0 +1,40 @@
+"use client";
+import {
+  CircularProgress,
+  Form,
+  Switch,
+  box,
+  randomInt,
+  useAsyncAction,
+  wait,
+} from "@react-md/core";
+import { useState, type ReactElement } from "react";
+
+export default function SwitchWithCircularProgress(): ReactElement {
+  const [checked, setChecked] = useState(false);
+  const { handleAsync, pending } = useAsyncAction();
+  return (
+    <Form className={box()}>
+      <Switch
+        label="Label"
+        ballAddon={pending && <CircularProgress />}
+        checked={checked}
+        onChange={handleAsync(async (event) => {
+          const nextChecked = event.currentTarget.checked;
+          setChecked(nextChecked);
+          await wait(4000);
+
+          // randomly fail some async action
+          if (randomInt() % 3 === 0) {
+            setChecked(!nextChecked);
+          }
+        })}
+        ballStyle={{
+          // set the background color to the inactive color so that the circular
+          // progress bar will be visible while checked
+          "--rmd-switch-ball-background-color": pending ? "#f2f2f2" : undefined,
+        }}
+      />
+    </Form>
+  );
+}

apps/docs/src/app/components/switch/SwitchWithMessages.tsx

@@ -0,0 +1,28 @@
+import { Form, Switch, box } from "@react-md/core";
+import { type ReactElement } from "react";
+
+export default function SwitchWithMessages(): ReactElement {
+  return (
+    <Form className={box({ align: "start", stacked: true })}>
+      <Switch label="Label" messageProps={{ children: "Help Text" }} />
+      <Switch
+        label="Label"
+        error
+        messageProps={{ children: "Error!", error: true }}
+      />
+      <Switch
+        label="Stacked"
+        stacked
+        iconAfter
+        messageProps={{ children: "Help Text" }}
+      />
+      <Switch
+        label="Stacked"
+        error
+        stacked
+        iconAfter
+        messageProps={{ children: "Error!", error: true }}
+      />
+    </Form>
+  );
+}

apps/docs/src/app/components/switch/demos.mdx

@@ -0,0 +1,68 @@
+# Switch
+
+Switches toggle the state of a single item on or off and are the preferred way to adjust settings on mobile.
+
+Use switches to:
+
+- Toggle a single item on or off, on mobile and tablet
+- Immediately activate or deactivate something
+
+# Simple Switch
+
+A switch can be created using the `Switch` component. A `label` should normally be provided
+for accessibility purposes.
+
+{{ "component": "./SimpleSwitch.tsx" }}
+
+## Icon After Label
+
+The label can be placed before the switch icon by enabling the `iconAfter` prop.
+
+{{ "component": "./IconAfterLabel.tsx" }}
+
+## Stacked Label
+
+The label can be stacked above or below the switch by enabling the `stacked` prop.
+
+{{ "component": "./StackedSwitch.tsx" }}
+
+# Switch Sizes
+
+The `Switch` will automatically scale the label and switch toggle based on the
+current `font-size`. Apply the `font-size` only to the
+`trackStyle`/`trackClassName` if only the switch toggle should change size.
+
+{{ "component": "./SwitchSizes.tsx" }}
+
+# Switch States
+
+The `Switch` also has different states that can be applied. The most common will
+be the `error` or `disabled` states but also supports `active`.
+
+{{ "component": "./SwitchStates.tsx" }}
+
+# Controlling Switches
+
+The `Checkbox` can be controlled by providing the `checked` prop and `onChange`
+like a native `<input type="checkbox">`:
+
+{{ "component": "./ControllingSwitches.tsx" }}
+
+# Switch with Messages
+
+The `Switch` component is wrapped in the
+[FormMessageContainer](/components/form-message#form-message-container) so additional
+hint or error messages can be displayed.
+
+{{ "component": "./SwitchWithMessages.tsx" }}
+
+# Switch with Circular Progress
+
+The `Switch` can has been updated to support rendering a `CircularProgress`
+within the ball by using the `ballAddon` prop.
+
+> !Info! The `ballAddon` can also be used to render icons, but some additional
+> styles will be required to update the color of the icon between the unchecked
+> and checked states.
+
+{{ "component": "./SwitchWithCircularProgress.tsx" }}