[Bug]: `as-child` type issues with 1.8.2 about radix-vue HOT 2 CLOSED

You are using useForwardProps wrongly. It should be a computed or a ref, and not object of ref(s).
Check out https://stackblitz.com/edit/vitejs-vite-dgmjpq?file=src%2Fcomponents%2FBox.vue

from radix-vue.

@zernonia Apologies, I just realized my reproduction maybe was a bit too minimal to showcase the problem properly. 🙈

I have created a more realistic and extensive version of it. The following is working in 1.7.4, but can not build in 1.8.x:

1.7.4: https://stackblitz.com/edit/vitejs-vite-4xcuqh?file=src%2Fcomponents%2FText.vue
1.8.2: https://stackblitz.com/edit/vitejs-vite-ksc3vz?file=src%2Fcomponents%2FText.vue

sprinkles() is just a stub for https://vanilla-extract.style/documentation/packages/sprinkles/ for demostration purposes. In reality the code for Text looks something like this:

<script setup lang="ts">
import { defineProps, toRefs } from 'vue'

import { useForwardProps } from 'radix-vue'

import { Box, type BoxProps } from '../Box'

import { sprinkles, type Sprinkles } from '@/styles/sprinkles.css'

export interface TextProps extends BoxProps {
  align?: Sprinkles['textAlign']
}

const props = defineProps<TextProps>()
const { align, ...rest } = toRefs(props)
const forwarded = useForwardProps(rest)
</script>

<template>
  <Box
    v-bind="forwarded"
    :class="
      sprinkles({
        textAlign: align,
      })
    "
  >
    <slot />
  </Box>
</template>

I think pulling out props for Text and passing on the rest (BoxProps) via a spread is a valid usecase for useForwardProps:

const props = defineProps<TextProps>();
const { align, family, ...rest } = toRefs(props);
const forwarded = useForwardProps(rest);

As far as I understand in [email protected] we would be able to replace this with a destructuring assignment:

const { align, family, ...rest } = defineProps<TextProps>();
const forwarded = useForwardProps(rest);

and I believe this also would return every prop of type Ref.

from radix-vue.