Add switch component

[mkernohanbc]

This PR adds a new Switch component, along with Storybook examples and docs. This PR closes #438.

A switch is a binary toggle that enables the user to set a value on or off. It is implemented using the RAC Switch component as a base.

Switch renders an <input> with the ARIA "switch" role:

• children slot is used to populate the text label, which automatically renders as a <label> and is associated to the switch
• labelPosition prop can be used to position the label left or right
• defaultSelected prop can be used to default the switch to 'on' (selected)
• isSelected will make the switch controlled
• isDisabled or isReadOnly can be used to lock a switch

[mkernohanbc]

@ty2k this pair of conditionals (lines 21 and 23) for positioning the label feels like a pretty inelegant solution, if you have a better way to do this would love to hear it!

[ty2k]

You could switch the flex direction of the thing like flex-direction: row and flex-direction: row-reverse based on that labelPosition prop, but this is probably the more clear solution. We can always complicate the heck out of this when we have to make all these components work for rtl instead of just ltr some day. :)

[ty2k]

This is really great, merge away. One thing to add either in here or in another PR at some point: onChange example. Here's what I roughed out on the Vite page to make sure the thing worked as I expected:

import { useState } from "react";

import { Switch } from "@/components";

export default function SwitchPage() {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <>
      <h2>Switch</h2>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "var(--layout-margin-medium",
        }}
      >
        <Switch>Label</Switch>
        <Switch labelPosition="left">Reversed label position</Switch>
        <Switch isDisabled>Disabled switch</Switch>
        <Switch labelPosition="left" defaultSelected>
          Switch on by default
        </Switch>
        <div>
          <Switch
            id="controlled-switch"
            isSelected={isSelected}
            onChange={() => setIsSelected(!isSelected)}
          >
            <pre>isSelected:</pre> {isSelected ? "true" : "false"}
          </Switch>
        </div>
      </div>
    </>
  );
}