UNPKG

gvf3n4ygn-test

Version:
16 lines 1.4 kB
{ "name": "switch", "dependencies": [], "registryDependencies": [], "files": [ { "name": "Switch.vue", "content": "<script setup lang=\"ts\">\nimport {\n SwitchRoot,\n type SwitchRootEmits,\n type SwitchRootProps,\n SwitchThumb,\n useForwardPropsEmits,\n} from 'radix-vue';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SwitchRootProps>();\nconst emits = defineEmits<SwitchRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <SwitchRoot\n v-bind=\"forwarded\"\n :class=\"cn(\n 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',\n $attrs.class ?? '',\n )\"\n >\n <SwitchThumb\n :class=\"cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')\"\n />\n </SwitchRoot>\n</template>\n" }, { "name": "index.ts", "content": "export { default as Switch } from './Switch.vue';\n" } ], "type": "components:ui" }