feat: SW-1422 Implemented Switch/Toggle component

components/TempDesignSystem/Form/Switch/index.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { Switch as AriaSwitch } from "react-aria-components"
+import { useController, useFormContext } from "react-hook-form"
+
+import { InfoCircleIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./switch.module.css"
+
+import type { SwitchProps } from "@/types/components/switch"
+
+export default function Switch({
+  className,
+  name,
+  children,
+  registerOptions,
+}: React.PropsWithChildren<SwitchProps>) {
+  const { control } = useFormContext()
+  const { field, fieldState } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+
+  return (
+    <AriaSwitch
+      className={`${styles.container} ${className}`}
+      isSelected={field.value}
+      onChange={field.onChange}
+      data-testid={name}
+      isDisabled={registerOptions?.disabled}
+      excludeFromTabOrder
+    >
+      {({ isSelected }) => (
+        <>
+          <span className={styles.switchContainer}>
+            {children}
+            <span className={styles.switch} tabIndex={0}></span>
+          </span>
+          {fieldState.error ? (
+            <Caption className={styles.error} fontOnly>
+              <InfoCircleIcon color="red" />
+              {fieldState.error.message}
+            </Caption>
+          ) : null}
+        </>
+      )}
+    </AriaSwitch>
+  )
+}

components/TempDesignSystem/Form/Switch/switch.module.css

@@ -0,0 +1,44 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.switch {
+  width: 40px;
+  height: 24px;
+  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  background: var(--UI-Input-Controls-Surface-Normal);
+  border-radius: 24px;
+  transition: all 200ms;
+  display: block;
+
+  &:before {
+    content: "";
+    display: block;
+    margin: 2px;
+    width: 16px;
+    height: 16px;
+    background: var(--UI-Input-Controls-Border-Normal);
+    border-radius: 100%;
+    transition: all 200ms;
+  }
+}
+
+.container[data-selected] {
+  .switch {
+    border-color: var(--UI-Input-Controls-Fill-Selected);
+    background: var(--UI-Input-Controls-Fill-Selected);
+
+    &:before {
+      background: var(--UI-Input-Controls-Surface-Normal);
+      transform: translateX(100%);
+    }
+  }
+}
+
+.container[data-focus-visible] .switch {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: 2px;
+}

types/components/switch/index.ts

@@ -0,0 +1,7 @@
+import type { RegisterOptions } from "react-hook-form"
+
+export interface SwitchProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  name: string
+  registerOptions?: RegisterOptions
+}