Switch story (#150)

* WIP

* Add Switch story

* Add `hasLabel` control to Switch story

* Increase label length to show off the squished state

.changeset/five-bikes-sell.md

@@ -0,0 +1,5 @@
+---
+"@spear-ai/ui": minor
+---
+
+Added Switch story.

packages/ui/src/components/switch/switch.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Form, Switch } from "react-aria-components";
+import { useIntl } from "react-intl";
+
+const PreviewSwitch = (properties: {
+  hasLabel: boolean;
+  isDisabled: boolean;
+  isPrimary: boolean;
+  isReadonly: boolean;
+  isSquished: boolean;
+}) => {
+  const { hasLabel, isDisabled, isPrimary, isReadonly, isSquished } = properties;
+  const intl = useIntl();
+
+  return (
+    <div className={`w-full ${isSquished ? "max-w-36" : "max-w-sm"}`}>
+      <Form className="relative w-full">
+        <div className="mt-3">
+          <Switch
+            className="group flex"
+            isDisabled={isDisabled}
+            isReadOnly={isReadonly}
+            value="isLimitedToFriends"
+          >
+            <span
+              className={`group relative isolate inline-flex h-6 w-11 rounded-full border-2 border-transparent bg-neutral-a-3 transition duration-200 ease-in-out group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-primary-7 group-disabled:bg-neutral-a-3 ${isPrimary ? "group-selected:bg-primary-9" : "group-selected:bg-neutral-9"}`}
+            >
+              <span className="pointer-events-none relative inline-block size-5 rounded-full bg-white shadow transition-all duration-200 ease-in-out will-change-transform translate-x-0 group-selected:translate-x-5 group-disabled:bg-neutral-2 group-disabled:shadow-none" />
+            </span>
+            {hasLabel ? (
+              <span className="ms-3 flex-1 text-sm font-medium leading-6 text-neutral-12 group-disabled:text-neutral-11">
+                {intl.formatMessage({
+                  defaultMessage: "Receive notifications",
+                  id: "D6jkwD",
+                })}
+              </span>
+            ) : null}
+          </Switch>
+        </div>
+      </Form>
+    </div>
+  );
+};
+
+const meta = {
+  component: PreviewSwitch,
+} satisfies Meta<typeof PreviewSwitch>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Standard: Story = {
+  args: {
+    hasLabel: true,
+    isDisabled: false,
+    isPrimary: false,
+    isReadonly: false,
+    isSquished: false,
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;