feat(Switch): new component

src/runtime/components/Switch.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SwitchRootProps, SwitchRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/switch'
+
+const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
+
+const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
+
+type SwitchVariants = VariantProps<typeof switchTv>
+
+export interface SwitchProps extends Omit<SwitchRootProps, 'asChild'> {
+  color?: SwitchVariants['color']
+  size?: SwitchVariants['size']
+  checkedIcon?: string
+  uncheckedIcon?: string
+  class?: any
+  ui?: Partial<typeof switchTv.slots>
+}
+
+export interface SwitchEmits extends SwitchRootEmits {}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<SwitchProps>()
+const emits = defineEmits<SwitchEmits>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'checked', 'disabled', 'required', 'name', 'id', 'value'), emits)
+
+const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
+  color: props.color,
+  size: props.size
+}))
+</script>
+
+<template>
+  <SwitchRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+    <SwitchThumb :class="ui.thumb()">
+      <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ checked: true })" />
+      <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ checked: false })" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

src/theme/index.ts

@@ -17,5 +17,6 @@ export { default as navigationMenu } from './navigationMenu'
 export { default as popover } from './popover'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
+export { default as switch } from './switch'
 export { default as tabs } from './tabs'
 export { default as tooltip } from './tooltip'

src/theme/switch.ts

@@ -0,0 +1,62 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
+    thumb: 'group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
+    icon: 'absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0'
+  },
+  variants: {
+    color: Object.fromEntries(config.colors.map((color: string) => [color, {
+      root: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
+      icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
+    }])),
+    size: {
+      '2xs': {
+        root: 'h-3 w-5',
+        thumb: 'size-2 data-[state=checked]:translate-x-2',
+        icon: 'size-1.5'
+      },
+      xs: {
+        root: 'h-3.5 w-6',
+        thumb: 'size-2.5 data-[state=checked]:translate-x-2.5',
+        icon: 'size-2'
+      },
+      sm: {
+        root: 'h-4 w-7',
+        thumb: 'size-3 data-[state=checked]:translate-x-3',
+        icon: 'size-2.5'
+      },
+      md: {
+        root: 'h-5 w-9',
+        thumb: 'size-4 data-[state=checked]:translate-x-4',
+        icon: 'size-3'
+      },
+      lg: {
+        root: 'h-6 w-11',
+        thumb: 'size-5 data-[state=checked]:translate-x-5',
+        icon: 'size-4'
+      },
+      xl: {
+        root: 'h-7 w-[3.25rem]',
+        thumb: 'size-6 data-[state=checked]:translate-x-6',
+        icon: 'size-5'
+      },
+      '2xl': {
+        root: 'h-8 w-[3.75rem]',
+        thumb: 'size-7 data-[state=checked]:translate-x-7',
+        icon: 'size-6'
+      }
+    },
+    checked: {
+      true: {
+        icon: 'group-data-[state=checked]:opacity-100'
+      },
+      false: {
+        icon: 'group-data-[state=unchecked]:opacity-100'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: 'md'
+  }
+})