UNPKG

gvf3n4ygn-test

Version:
16 lines 2.09 kB
{ "name": "toggle", "dependencies": [], "registryDependencies": [], "files": [ { "name": "Toggle.vue", "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue';\nimport { type ToggleVariants, toggleVariants } from '.';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<ToggleProps & {\n variant?: ToggleVariants['variant'];\n size?: ToggleVariants['size'];\n}>(), {\n variant: 'default',\n size: 'default',\n disabled: false,\n});\n\nconst emits = defineEmits<ToggleEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, size: undefined, variant: undefined }));\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n <Toggle\n v-bind=\"forwarded\"\n :class=\"cn(toggleVariants({ variant, size }), $attrs.class ?? '')\"\n >\n <slot />\n </Toggle>\n</template>\n" }, { "name": "index.ts", "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Toggle } from './Toggle.vue';\n\nexport const toggleVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n {\n variants: {\n variant: {\n default: 'bg-transparent',\n outline:\n 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n },\n size: {\n default: 'h-10 px-3',\n sm: 'h-9 px-2.5',\n lg: 'h-11 px-5',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>;\n" } ], "type": "components:ui" }