fix(Button): missing asChild (#203)

* fix: button should use primitive

* docs: fix missing NuxtLink import

* chore: build registry

apps/www/src/lib/registry/default/example/ButtonAsChildDemo.vue

@@ -4,8 +4,8 @@ import { Button } from '@/lib/registry/default/ui/button'
 
 <template>
   <Button as-child>
-    <NuxtLink to="/login">
+    <a href="/login">
       Login
-    </NuxtLink>
+    </a>
   </Button>
 </template>

apps/www/src/lib/registry/default/ui/button/Button.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
+interface Props extends PrimitiveProps {
   variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
   size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
   as?: string
@@ -14,10 +15,11 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <component
+  <Primitive
-    :is="as"
+    :as="as"
+    :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
   >
     <slot />
-  </component>
+  </Primitive>
 </template>

apps/www/src/lib/registry/new-york/example/ButtonAsChildDemo.vue

@@ -4,8 +4,8 @@ import { Button } from '@/lib/registry/new-york/ui/button'
 
 <template>
   <Button as-child>
-    <NuxtLink to="/login">
+    <a href="/login">
       Login
-    </NuxtLink>
+    </a>
   </Button>
 </template>

apps/www/src/lib/registry/new-york/ui/button/Button.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface Props {
+interface Props extends PrimitiveProps {
   variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
   size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
   as?: string
@@ -14,10 +15,11 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <component
+  <Primitive
-    :is="as"
+    :as="as"
+    :as-child="asChild"
     :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
   >
     <slot />
-  </component>
+  </Primitive>
 </template>

apps/www/src/public/registry/index.json

@@ -95,7 +95,9 @@
   },
   {
     "name": "button",
-    "dependencies": [],
+    "dependencies": [
+      "radix-vue"
+    ],
     "registryDependencies": [
       "utils"
     ],

apps/www/src/public/registry/styles/default/button.json

@@ -1,13 +1,15 @@
 {
   "name": "button",
-  "dependencies": [],
+  "dependencies": [
+    "radix-vue"
+  ],
   "registryDependencies": [
     "utils"
   ],
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </component>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/default/checkbox.json

@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
+}

apps/www/src/public/registry/styles/default/dropdown-menu.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",

apps/www/src/public/registry/styles/default/input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" type=\"text\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\">\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst { class: className, ...rest } = useAttrs()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className ?? '')\" v-bind=\"rest\">\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/new-york/button.json

@@ -1,13 +1,15 @@
 {
   "name": "button",
-  "dependencies": [],
+  "dependencies": [
+    "radix-vue"
+  ],
   "registryDependencies": [
     "utils"
   ],
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </component>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']\n  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']\n  as?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  as: 'button',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn(buttonVariants({ variant, size }), $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/new-york/checkbox.json

@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
+}

apps/www/src/public/registry/styles/new-york/command.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "name": "Command.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :open=\"true\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxRootProps>()\nconst emits = defineEmits<ComboboxRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    :open=\"true\"\n    :class=\"cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n"
     },
     {
       "name": "CommandDialog.vue",

apps/www/src/public/registry/styles/new-york/dropdown-menu.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "DropdownMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'\n\nconst props = defineProps<DropdownMenuRootProps>()\nconst emits = defineEmits<DropdownMenuRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",

apps/www/src/public/registry/styles/new-york/input.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" type=\"text\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')\">\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  defaultValue?: string | number\n  modelValue?: string | number\n}>()\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void\n}>()\n\nconst { class: className, ...rest } = useAttrs()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n})\n</script>\n\n<template>\n  <input v-model=\"modelValue\" :class=\"cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className ?? '')\" v-bind=\"rest\">\n</template>\n"
     },
     {
       "name": "index.ts",