initial

layers/ui/components/switcher/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="[cn.b(), cn.m(color)]">
+    <UiSwitcherOption
+      v-for="(option, index) in options"
+      :id="id"
+      :key="index"
+      :label="option.label"
+      :value="option.value"
+      :size="size"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiSwitcherOption from './option.vue'
+import type { ModelValue, Props } from './types'
+
+defineOptions({
+  name: 'UiSwitcher',
+})
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'blue',
+  required: false,
+  size: 'medium',
+})
+
+defineEmits<{
+  'update:modelValue': [state: ModelValue]
+}>()
+
+const cn = useClassname('ui-switcher')
+</script>
+
+<style lang="scss">
+@use 'styles';
+</style>

layers/ui/components/switcher/option.vue

@@ -0,0 +1,26 @@
+<template>
+  <UiButton
+    :class="[cn.b()]"
+    type="ghost"
+    color="secondary"
+    :icon="icon"
+    :state="checked ? 'active' : undefined"
+    :size="size"
+    @click="handleChange"
+  >
+    <template v-if="label">
+      {{ label }}
+    </template>
+  </UiButton>
+</template>
+
+<script setup lang="ts">
+import type { OptionProps } from './types.js'
+
+const props = defineProps<OptionProps>()
+const slots = useSlots()
+
+const cn = useClassname('ui-switcher-option')
+
+const { checked, handleChange } = useRadio(props, slots)
+</script>

layers/ui/components/switcher/styles.scss

@@ -0,0 +1,23 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.ui-switcher {
+  display: flex;
+  padding: 4px;
+  border-radius: 12px;
+  gap: 8px;
+
+  &--blue {
+    background-color: $clr-grey-200;
+  }
+
+  &--white {
+    background-color: $clr-grey-100;
+  }
+}
+
+.ui-switcher-option {
+  --button-border-radius: 8px;
+
+  flex: 1;
+}

layers/ui/components/switcher/types.ts

@@ -0,0 +1,21 @@
+import type { Props as ButtonProps } from '../button/index.vue'
+import type { UiIcon } from '#build/types/ui/icons'
+
+export type ModelValue = string | number | boolean
+
+export interface OptionProps {
+  id: string
+  label?: string
+  icon?: UiIcon
+  value: ModelValue
+  size?: ButtonProps['size']
+}
+
+export interface Props {
+  id: string
+  options: Pick<OptionProps, 'label' | 'value'>[]
+  modelValue?: ModelValue
+  required?: boolean
+  color?: 'blue' | 'white'
+  size?: ButtonProps['size']
+}