fix: toggle not setting pressed property on init (#223)

* fix: toggle not setting pressed property on init

* refactor: move class outside of toggleVariants

apps/www/src/lib/registry/default/ui/toggle/Toggle.vue

@@ -2,7 +2,7 @@
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
 import { Toggle, useForwardPropsEmits } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { toggleVariants } from '.'
 import { cn } from '@/lib/utils'
 
@@ -13,6 +13,11 @@ interface Props extends ToggleProps {
   size?: ToggleVariantProps['size']
   disabled?: boolean
 }
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
@@ -26,13 +31,17 @@ const toggleProps = computed(() => {
   return otherProps
 })
 
-const forwarded = useForwardPropsEmits(toggleProps, emits)
+const { class: className, ...rest } = useAttrs()
+const forwarded = useForwardPropsEmits(toggleProps.value, emits)
 </script>
 
 <template>
   <Toggle
-    v-bind="forwarded"
-    :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
+    v-bind="{
+      ...forwarded,
+      ...rest,
+    }"
+    :class="cn(toggleVariants({ variant, size }), className ?? '')"
     :disabled="props.disabled"
   >
     <slot />

apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue

@@ -2,7 +2,7 @@
 import type { ToggleEmits, ToggleProps } from 'radix-vue'
 import { Toggle, useForwardPropsEmits } from 'radix-vue'
 import type { VariantProps } from 'class-variance-authority'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { toggleVariants } from '.'
 import { cn } from '@/lib/utils'
 
@@ -13,6 +13,11 @@ interface Props extends ToggleProps {
   size?: ToggleVariantProps['size']
   disabled?: boolean
 }
+
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
@@ -22,17 +27,21 @@ const emits = defineEmits<ToggleEmits>()
 
 const toggleProps = computed(() => {
   // eslint-disable-next-line unused-imports/no-unused-vars
-  const { variant, size, ...otherProps } = props
+  const { variant, size, disabled, ...otherProps } = props
   return otherProps
 })
 
-const forwarded = useForwardPropsEmits(toggleProps, emits)
+const { class: className, ...rest } = useAttrs()
+const forwarded = useForwardPropsEmits(toggleProps.value, emits)
 </script>
 
 <template>
   <Toggle
-    v-bind="forwarded"
-    :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
+    v-bind="{
+      ...forwarded,
+      ...rest,
+    }"
+    :class="cn(toggleVariants({ variant, size }), className ?? '')"
     :disabled="props.disabled"
   >
     <slot />