BaseSwitchコンポーネントを追加

src/components/Base/BaseSwitch.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="root">
+    <div class="label">{{ checked ? onLabel : offLabel }}</div>
+    <SwitchRoot :id v-model:checked="checked" class="SwitchRoot">
+      <SwitchThumb class="SwitchThumb" />
+    </SwitchRoot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from "radix-vue";
+
+defineProps<{
+  id: string;
+  offLabel?: string;
+  onLabel?: string;
+}>();
+
+const checked = defineModel<boolean>("checked", { required: true });
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.root {
+  display: flex;
+  align-items: center;
+  gap: vars.$gap-1;
+}
+
+:deep(.SwitchRoot) {
+  cursor: pointer;
+  width: 40px;
+  padding: 1px;
+  height: vars.$size-indicator;
+  background-color: colors.$border;
+  border: 1px solid colors.$border;
+  border-radius: 9999px;
+  position: relative;
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &[data-state="checked"] {
+    background-color: colors.$primary;
+  }
+}
+
+.SwitchThumb {
+  display: block;
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition: transform vars.$transition-duration;
+  will-change: transform;
+}
+
+.SwitchThumb[data-state="checked"] {
+  transform: translateX(16px);
+}
+
+.label {
+  color: colors.$display;
+}
+</style>