From a00f4bc43e09799d558758b5f94ba5a047ec427f Mon Sep 17 00:00:00 2001
From: Shyrro <zsahmane@gmail.com>
Date: Fri, 12 May 2023 15:01:53 +0200
Subject: [PATCH] chore: export right types

Signed-off-by: Shyrro <zsahmane@gmail.com>
---
 packages/vue/src/accordion/accordion.tsx      | 27 +++----
 packages/vue/src/checkbox/checkbox.tsx        | 49 ++++++++-----
 .../vue/src/color-picker/color-picker.tsx     | 22 +++---
 .../vue/src/color-picker/use-color-picker.ts  |  2 +
 packages/vue/src/combobox/combobox.tsx        | 70 ++++++++++---------
 packages/vue/src/dialog/dialog.tsx            | 39 ++++++-----
 packages/vue/src/dialog/use-dialog.ts         |  2 +
 packages/vue/src/editable/editable.tsx        | 49 +++++++------
 packages/vue/src/editable/use-editable.ts     |  2 +
 packages/vue/src/hover-card/hover-card.tsx    | 25 ++++---
 packages/vue/src/hover-card/use-hover-card.ts |  2 +
 packages/vue/src/menu/menu.tsx                | 31 ++++----
 .../vue/src/number-input/number-input.tsx     | 64 +++++++++--------
 .../vue/src/number-input/use-number-input.tsx |  2 +
 .../pagination/pagination-page-trigger.tsx    |  2 +-
 .../vue/src/pagination/pagination.stories.vue |  3 +-
 packages/vue/src/pagination/pagination.tsx    | 28 ++++----
 packages/vue/src/pagination/use-pagination.ts |  2 +
 packages/vue/src/pin-input/pin-input.tsx      | 46 ++++++------
 packages/vue/src/pin-input/use-pin-input.ts   |  2 +
 packages/vue/src/popover/popover.tsx          | 37 +++++-----
 packages/vue/src/popover/use-popover.ts       |  2 +
 packages/vue/src/pressable/pressable.tsx      | 22 +++---
 packages/vue/src/pressable/use-pressable.tsx  |  2 +
 packages/vue/src/radio-group/radio-group.tsx  | 32 +++++----
 .../vue/src/range-slider/range-slider.tsx     | 50 ++++++-------
 .../vue/src/rating-group/rating-group.tsx     | 38 +++++-----
 packages/vue/src/select/select.tsx            | 43 ++++++------
 packages/vue/src/slider/slider.tsx            | 52 +++++++-------
 packages/vue/src/splitter/splitter.tsx        | 20 +++---
 packages/vue/src/tabs/tabs.tsx                | 28 ++++----
 packages/vue/src/tags-input/index.ts          |  2 +-
 packages/vue/src/tags-input/tags-input.tsx    | 53 +++++++-------
 packages/vue/src/tooltip/tooltip.tsx          | 33 +++++----
 34 files changed, 480 insertions(+), 403 deletions(-)

diff --git a/packages/vue/src/accordion/accordion.tsx b/packages/vue/src/accordion/accordion.tsx
index 29885be61e..9708456448 100644
--- a/packages/vue/src/accordion/accordion.tsx
+++ b/packages/vue/src/accordion/accordion.tsx
@@ -1,45 +1,46 @@
 import { type Context } from '@zag-js/accordion'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { AccordionProvider } from './accordion-context'
 import { useAccordion } from './use-accordion'
 
 export type AccordionContext = Context & { modelValue?: AccordionContext['value'] }
-export type AccordionProps = Assign<HTMLArkProps<'div'>, AccordionContext>
 
-const VueAccordionProps = createVueProps<AccordionProps>({
+export type UseAccordionProps = Assign<HTMLArkProps<'div'>, AccordionContext>
+
+const VueAccordionProps = createVueProps<UseAccordionProps>({
   id: {
-    type: String as PropType<AccordionProps['id']>,
+    type: String as PropType<UseAccordionProps['id']>,
   },
   modelValue: {
-    type: [String, Object] as PropType<AccordionProps['modelValue']>,
+    type: [String, Object] as PropType<UseAccordionProps['modelValue']>,
   },
   collapsible: {
-    type: Boolean as PropType<AccordionProps['collapsible']>,
+    type: Boolean as PropType<UseAccordionProps['collapsible']>,
     default: false,
   },
   multiple: {
-    type: Boolean as PropType<AccordionProps['multiple']>,
+    type: Boolean as PropType<UseAccordionProps['multiple']>,
     default: false,
   },
   disabled: {
-    type: Boolean as PropType<AccordionProps['disabled']>,
+    type: Boolean as PropType<UseAccordionProps['disabled']>,
     default: false,
   },
   ids: {
-    type: Object as PropType<AccordionProps['ids']>,
+    type: Object as PropType<UseAccordionProps['ids']>,
   },
   getRootNode: {
-    type: Function as PropType<AccordionProps['getRootNode']>,
+    type: Function as PropType<UseAccordionProps['getRootNode']>,
   },
   orientation: {
-    type: String as PropType<AccordionProps['orientation']>,
+    type: String as PropType<UseAccordionProps['orientation']>,
   },
 })
 
-export const Accordion: ComponentWithProps<Partial<AccordionProps>> = defineComponent({
+export const Accordion: ComponentWithProps<Partial<UseAccordionProps>> = defineComponent({
   name: 'Accordion',
   emits: ['change', 'update:modelValue'],
   props: VueAccordionProps,
@@ -55,3 +56,5 @@ export const Accordion: ComponentWithProps<Partial<AccordionProps>> = defineComp
     )
   },
 })
+
+export type AccordionProps = Optional<AccordionContext, 'id'>
diff --git a/packages/vue/src/checkbox/checkbox.tsx b/packages/vue/src/checkbox/checkbox.tsx
index 3906eb712e..bc91622426 100644
--- a/packages/vue/src/checkbox/checkbox.tsx
+++ b/packages/vue/src/checkbox/checkbox.tsx
@@ -1,7 +1,7 @@
 import { type Context } from '@zag-js/checkbox'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { CheckboxProvider } from './checkbox-context'
 import { useCheckbox } from './use-checkbox'
@@ -9,59 +9,68 @@ import { useCheckbox } from './use-checkbox'
 export type CheckboxContext = Context & {
   modelValue?: Context['checked']
 }
-export type CheckboxProps = Assign<HTMLArkProps<'label'>, CheckboxContext>
+export type UseCheckboxProps = Assign<HTMLArkProps<'label'>, CheckboxContext>
 
-export const VueCheckboxProps = createVueProps<CheckboxProps>({
+export const VueCheckboxProps = createVueProps<UseCheckboxProps>({
   id: {
-    type: String as PropType<CheckboxProps['id']>,
+    type: String as PropType<UseCheckboxProps['id']>,
   },
   'aria-describedby': {
-    type: String as PropType<CheckboxProps['aria-describedby']>,
+    type: String as PropType<UseCheckboxProps['aria-describedby']>,
   },
   'aria-label': {
-    type: String as PropType<CheckboxProps['aria-label']>,
+    type: String as PropType<UseCheckboxProps['aria-label']>,
   },
   'aria-labelledby': {
-    type: String as PropType<CheckboxProps['aria-labelledby']>,
+    type: String as PropType<UseCheckboxProps['aria-labelledby']>,
   },
   checked: {
-    type: Boolean as PropType<CheckboxProps['checked']>,
+    type: Boolean as PropType<UseCheckboxProps['checked']>,
     default: false,
   },
   dir: {
-    type: String as PropType<CheckboxProps['dir']>,
+    type: String as PropType<UseCheckboxProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<CheckboxProps['disabled']>,
+    type: Boolean as PropType<UseCheckboxProps['disabled']>,
+  },
+  focusable: {
+    type: Boolean as PropType<UseCheckboxProps['focusable']>,
   },
   form: {
-    type: String as PropType<CheckboxProps['form']>,
+    type: String as PropType<UseCheckboxProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<CheckboxProps['getRootNode']>,
+    type: Function as PropType<UseCheckboxProps['getRootNode']>,
   },
   ids: {
-    type: Object as PropType<CheckboxProps['ids']>,
+    type: Object as PropType<UseCheckboxProps['ids']>,
+  },
+  indeterminate: {
+    type: Boolean as PropType<UseCheckboxProps['indeterminate']>,
   },
   invalid: {
-    type: Boolean as PropType<CheckboxProps['invalid']>,
+    type: Boolean as PropType<UseCheckboxProps['invalid']>,
   },
   modelValue: {
-    type: [Boolean, String] as PropType<CheckboxProps['modelValue']>,
+    type: [Boolean, String] as PropType<UseCheckboxProps['modelValue']>,
     default: undefined,
   },
   name: {
-    type: String as PropType<CheckboxProps['name']>,
+    type: String as PropType<UseCheckboxProps['name']>,
+  },
+  readOnly: {
+    type: Boolean as PropType<UseCheckboxProps['readOnly']>,
   },
   required: {
-    type: Boolean as PropType<CheckboxProps['required']>,
+    type: Boolean as PropType<UseCheckboxProps['required']>,
   },
   value: {
-    type: String as PropType<CheckboxProps['value']>,
+    type: String as PropType<UseCheckboxProps['value']>,
   },
 })
 
-export const Checkbox: ComponentWithProps<Partial<CheckboxProps>> = defineComponent({
+export const Checkbox: ComponentWithProps<Partial<UseCheckboxProps>> = defineComponent({
   name: 'Checkbox',
   emits: ['change', 'update:modelValue'],
   props: VueCheckboxProps,
@@ -77,3 +86,5 @@ export const Checkbox: ComponentWithProps<Partial<CheckboxProps>> = defineCompon
     )
   },
 })
+
+export type CheckboxProps = Optional<CheckboxContext, 'id'>
diff --git a/packages/vue/src/color-picker/color-picker.tsx b/packages/vue/src/color-picker/color-picker.tsx
index c76698245b..3777347338 100644
--- a/packages/vue/src/color-picker/color-picker.tsx
+++ b/packages/vue/src/color-picker/color-picker.tsx
@@ -1,7 +1,7 @@
 import { type Context } from '@zag-js/color-picker'
 import { defineComponent, type PropType } from 'vue'
 import type { HTMLArkProps } from '../factory'
-import type { Assign } from '../types'
+import type { Assign, Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { ColorPickerProvider } from './color-picker-context'
 import { useColorPicker } from './use-color-picker'
@@ -9,29 +9,29 @@ import { useColorPicker } from './use-color-picker'
 export type ColorPickerContext = Context & {
   modelValue?: Context['value']
 }
-export type ColorPickerProps = Assign<HTMLArkProps<'div'>, ColorPickerContext>
+export type UseColorPickerProps = Assign<HTMLArkProps<'div'>, ColorPickerContext>
 
-const VueColorPickerProps = createVueProps<ColorPickerProps>({
+const VueColorPickerProps = createVueProps<UseColorPickerProps>({
   dir: {
-    type: String as PropType<ColorPickerProps['dir']>,
+    type: String as PropType<UseColorPickerProps['dir']>,
   },
   id: {
-    type: String as PropType<ColorPickerProps['id']>,
+    type: String as PropType<UseColorPickerProps['id']>,
   },
   getRootNode: {
-    type: Function as PropType<ColorPickerProps['getRootNode']>,
+    type: Function as PropType<UseColorPickerProps['getRootNode']>,
   },
   modelValue: {
-    type: String as PropType<ColorPickerProps['modelValue']>,
+    type: String as PropType<UseColorPickerProps['modelValue']>,
   },
   value: {
-    type: String as PropType<ColorPickerProps['value']>,
+    type: String as PropType<UseColorPickerProps['value']>,
   },
   disabled: {
-    type: Boolean as PropType<ColorPickerProps['disabled']>,
+    type: Boolean as PropType<UseColorPickerProps['disabled']>,
   },
   readOnly: {
-    type: Boolean as PropType<ColorPickerProps['readOnly']>,
+    type: Boolean as PropType<UseColorPickerProps['readOnly']>,
   },
 })
 
@@ -47,3 +47,5 @@ export const ColorPicker: ComponentWithProps<Partial<ColorPickerContext>> = defi
     return () => slots.default?.(api.value)
   },
 })
+
+export type ColorPickerProps = Optional<ColorPickerContext, 'id'>
diff --git a/packages/vue/src/color-picker/use-color-picker.ts b/packages/vue/src/color-picker/use-color-picker.ts
index 2076ea20c7..94825eb426 100644
--- a/packages/vue/src/color-picker/use-color-picker.ts
+++ b/packages/vue/src/color-picker/use-color-picker.ts
@@ -27,3 +27,5 @@ export const useColorPicker = <T extends ExtractPropTypes<ColorPickerContext>>(
 
   return computed(() => colorPicker.connect(state.value, send, normalizeProps))
 }
+
+export type UseColorPickerReturn = ReturnType<typeof colorPicker.connect>
diff --git a/packages/vue/src/combobox/combobox.tsx b/packages/vue/src/combobox/combobox.tsx
index 2d3f1e00c2..1786c3a37f 100644
--- a/packages/vue/src/combobox/combobox.tsx
+++ b/packages/vue/src/combobox/combobox.tsx
@@ -1,7 +1,7 @@
 import { type Context } from '@zag-js/combobox'
 import { defineComponent, type PropType } from 'vue'
-import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { ark } from '../factory'
+import type { Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { ComboboxProvider } from './combobox-context'
 import { useCombobox } from './use-combobox'
@@ -9,98 +9,98 @@ import { useCombobox } from './use-combobox'
 export type ComboboxContext = Context & {
   modelValue?: ComboboxContext['inputValue']
 }
-export type ComboboxProps = Assign<HTMLArkProps<any>, ComboboxContext>
+export type UseComboboxProps = ComboboxContext
 
-const VueComboboxProps = createVueProps<ComboboxProps>({
+const VueComboboxProps = createVueProps<UseComboboxProps>({
   id: {
-    type: String as PropType<ComboboxProps['id']>,
+    type: String as PropType<UseComboboxProps['id']>,
   },
   modelValue: {
-    type: String as PropType<ComboboxProps['modelValue']>,
+    type: String as PropType<UseComboboxProps['modelValue']>,
   },
   allowCustomValue: {
-    type: Boolean as PropType<ComboboxProps['allowCustomValue']>,
+    type: Boolean as PropType<UseComboboxProps['allowCustomValue']>,
   },
   ariaHidden: {
-    type: Boolean as PropType<ComboboxProps['ariaHidden']>,
+    type: Boolean as PropType<UseComboboxProps['ariaHidden']>,
   },
   autoFocus: {
-    type: Boolean as PropType<ComboboxProps['autoFocus']>,
+    type: Boolean as PropType<UseComboboxProps['autoFocus']>,
   },
   blurOnSelect: {
-    type: Boolean as PropType<ComboboxProps['blurOnSelect']>,
+    type: Boolean as PropType<UseComboboxProps['blurOnSelect']>,
   },
   dir: {
-    type: String as PropType<ComboboxProps['dir']>,
+    type: String as PropType<UseComboboxProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<ComboboxProps['disabled']>,
+    type: Boolean as PropType<UseComboboxProps['disabled']>,
   },
   focusOnClear: {
-    type: Boolean as PropType<ComboboxProps['focusOnClear']>,
+    type: Boolean as PropType<UseComboboxProps['focusOnClear']>,
   },
   form: {
-    type: String as PropType<ComboboxProps['form']>,
+    type: String as PropType<UseComboboxProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<ComboboxProps['getRootNode']>,
+    type: Function as PropType<UseComboboxProps['getRootNode']>,
   },
   ids: {
-    type: Object as PropType<ComboboxProps['ids']>,
+    type: Object as PropType<UseComboboxProps['ids']>,
   },
   inputBehavior: {
-    type: String as PropType<ComboboxProps['inputBehavior']>,
+    type: String as PropType<UseComboboxProps['inputBehavior']>,
   },
   inputValue: {
-    type: String as PropType<ComboboxProps['inputValue']>,
+    type: String as PropType<UseComboboxProps['inputValue']>,
   },
   invalid: {
-    type: Boolean as PropType<ComboboxProps['invalid']>,
+    type: Boolean as PropType<UseComboboxProps['invalid']>,
   },
   isCustomValue: {
-    type: Function as PropType<ComboboxProps['isCustomValue']>,
+    type: Function as PropType<UseComboboxProps['isCustomValue']>,
   },
   loop: {
-    type: Boolean as PropType<ComboboxProps['loop']>,
+    type: Boolean as PropType<UseComboboxProps['loop']>,
   },
   name: {
-    type: String as PropType<ComboboxProps['name']>,
+    type: String as PropType<UseComboboxProps['name']>,
   },
   openOnClick: {
-    type: Boolean as PropType<ComboboxProps['openOnClick']>,
+    type: Boolean as PropType<UseComboboxProps['openOnClick']>,
   },
   placeholder: {
-    type: String as PropType<ComboboxProps['placeholder']>,
+    type: String as PropType<UseComboboxProps['placeholder']>,
   },
   positioning: {
-    type: String as PropType<ComboboxProps['positioning']>,
+    type: String as PropType<UseComboboxProps['positioning']>,
   },
   readOnly: {
-    type: Boolean as PropType<ComboboxProps['readOnly']>,
+    type: Boolean as PropType<UseComboboxProps['readOnly']>,
   },
-  selectInputOnfocus: {
-    type: Boolean as PropType<ComboboxProps['selectInputOnFocus']>,
+  selectInputOnFocus: {
+    type: Boolean as PropType<UseComboboxProps['selectInputOnFocus']>,
   },
   selectOnTab: {
-    type: Boolean as PropType<ComboboxProps['selectOnTab']>,
+    type: Boolean as PropType<UseComboboxProps['selectOnTab']>,
   },
   selectionBehavior: {
-    type: String as PropType<ComboboxProps['selectionBehavior']>,
+    type: String as PropType<UseComboboxProps['selectionBehavior']>,
   },
   selectionData: {
-    type: Object as PropType<ComboboxProps['selectionData']>,
+    type: Object as PropType<UseComboboxProps['selectionData']>,
   },
   translations: {
-    type: Object as PropType<ComboboxProps['translations']>,
+    type: Object as PropType<UseComboboxProps['translations']>,
   },
 })
 
-export const Combobox: ComponentWithProps<Partial<ComboboxProps>> = defineComponent({
+export const Combobox: ComponentWithProps<Partial<UseComboboxProps>> = defineComponent({
   name: 'Combobox',
   props: VueComboboxProps,
   emits: ['close', 'open', 'highlight', 'input-change', 'update:modelValue', 'select'],
   setup(props, { slots, attrs, emit }) {
-    const api = useCombobox(emit, props)
+    const api = useCombobox(emit, props as UseComboboxProps)
 
     ComboboxProvider(api)
 
@@ -111,3 +111,5 @@ export const Combobox: ComponentWithProps<Partial<ComboboxProps>> = defineCompon
     )
   },
 })
+
+export type ComboboxProps = Optional<ComboboxContext, 'id'>
diff --git a/packages/vue/src/dialog/dialog.tsx b/packages/vue/src/dialog/dialog.tsx
index 503548f4fe..93fcb4960b 100644
--- a/packages/vue/src/dialog/dialog.tsx
+++ b/packages/vue/src/dialog/dialog.tsx
@@ -1,65 +1,66 @@
 import { type Context as DialogContext } from '@zag-js/dialog'
 import { defineComponent, type PropType } from 'vue'
-import { type HTMLArkProps } from '../factory'
-import type { Assign } from '../types'
+import type { Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { DialogProvider } from './dialog-context'
 import { useDialog } from './use-dialog'
 
-export type DialogProps = Assign<HTMLArkProps<any>, DialogContext>
+export type UseDialogProps = DialogContext
 
-const VueDialogProps = createVueProps<DialogProps>({
+const VueDialogProps = createVueProps<UseDialogProps>({
   id: {
-    type: String as PropType<DialogProps['id']>,
+    type: String as PropType<UseDialogProps['id']>,
   },
   ids: {
-    type: Object as PropType<DialogProps['ids']>,
+    type: Object as PropType<UseDialogProps['ids']>,
   },
   trapFocus: {
-    type: Boolean as PropType<DialogProps['trapFocus']>,
+    type: Boolean as PropType<UseDialogProps['trapFocus']>,
   },
   preventScroll: {
-    type: Boolean as PropType<DialogProps['preventScroll']>,
+    type: Boolean as PropType<UseDialogProps['preventScroll']>,
   },
   modal: {
-    type: Boolean as PropType<DialogProps['modal']>,
+    type: Boolean as PropType<UseDialogProps['modal']>,
   },
   initialFocusEl: {
-    type: Object as PropType<DialogProps['initialFocusEl']>,
+    type: Object as PropType<UseDialogProps['initialFocusEl']>,
   },
   finalFocusEl: {
-    type: Object as PropType<DialogProps['finalFocusEl']>,
+    type: Object as PropType<UseDialogProps['finalFocusEl']>,
   },
   restoreFocus: {
-    type: Boolean as PropType<DialogProps['restoreFocus']>,
+    type: Boolean as PropType<UseDialogProps['restoreFocus']>,
   },
   closeOnOutsideClick: {
-    type: Boolean as PropType<DialogProps['closeOnOutsideClick']>,
+    type: Boolean as PropType<UseDialogProps['closeOnOutsideClick']>,
     default: true,
   },
   closeOnEsc: {
-    type: Boolean as PropType<DialogProps['closeOnEsc']>,
+    type: Boolean as PropType<UseDialogProps['closeOnEsc']>,
   },
   'aria-label': {
-    type: String as PropType<DialogProps['aria-label']>,
+    type: String as PropType<UseDialogProps['aria-label']>,
   },
   role: {
-    type: String as PropType<DialogProps['role']>,
+    type: String as PropType<UseDialogProps['role']>,
   },
   open: {
-    type: Boolean as PropType<DialogProps['open']>,
+    type: Boolean as PropType<UseDialogProps['open']>,
   },
 })
 
-export const Dialog: ComponentWithProps<Partial<DialogProps>> = defineComponent({
+export const Dialog: ComponentWithProps<Partial<UseDialogProps>> = defineComponent({
   name: 'Dialog',
   props: VueDialogProps,
   emits: ['close', 'outside-click', 'esc'],
   setup(props, { slots, emit }) {
-    const api = useDialog(emit, props)
+    const api = useDialog(emit, props as UseDialogProps)
 
     DialogProvider(api)
 
     return () => slots?.default?.(api.value)
   },
 })
+
+export type DialogProps = Optional<UseDialogProps, 'id'>
diff --git a/packages/vue/src/dialog/use-dialog.ts b/packages/vue/src/dialog/use-dialog.ts
index a46497fbb5..42264f0f57 100644
--- a/packages/vue/src/dialog/use-dialog.ts
+++ b/packages/vue/src/dialog/use-dialog.ts
@@ -43,3 +43,5 @@ export const useDialog = <T extends ExtractPropTypes<DialogProps>>(
 
   return api
 }
+
+export type UseDialogReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/editable/editable.tsx b/packages/vue/src/editable/editable.tsx
index cc0fdd7ae7..b67128dc40 100644
--- a/packages/vue/src/editable/editable.tsx
+++ b/packages/vue/src/editable/editable.tsx
@@ -1,78 +1,79 @@
 import { type Context } from '@zag-js/editable'
 import { defineComponent, type PropType } from 'vue'
 import { ark } from '../factory'
+import type { Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { EditableProvider } from './editable-context'
 import { useEditable } from './use-editable'
 
-export type EditableProps = Context & { modelValue?: Context['value'] }
+export type UseEditableProps = Context & { modelValue?: Context['value'] }
 
-const VueEditableProps = createVueProps<EditableProps>({
+const VueEditableProps = createVueProps<UseEditableProps>({
   activationMode: {
-    type: String as PropType<EditableProps['activationMode']>,
+    type: String as PropType<UseEditableProps['activationMode']>,
   },
   autoResize: {
-    type: Boolean as PropType<EditableProps['autoResize']>,
+    type: Boolean as PropType<UseEditableProps['autoResize']>,
   },
   dir: {
-    type: String as PropType<EditableProps['dir']>,
+    type: String as PropType<UseEditableProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<EditableProps['disabled']>,
+    type: Boolean as PropType<UseEditableProps['disabled']>,
   },
   form: {
-    type: String as PropType<EditableProps['form']>,
+    type: String as PropType<UseEditableProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<EditableProps['getRootNode']>,
+    type: Function as PropType<UseEditableProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<EditableProps['id']>,
+    type: String as PropType<UseEditableProps['id']>,
   },
   ids: {
-    type: Object as PropType<EditableProps['ids']>,
+    type: Object as PropType<UseEditableProps['ids']>,
   },
   invalid: {
-    type: Boolean as PropType<EditableProps['invalid']>,
+    type: Boolean as PropType<UseEditableProps['invalid']>,
   },
   maxLength: {
-    type: Number as PropType<EditableProps['maxLength']>,
+    type: Number as PropType<UseEditableProps['maxLength']>,
   },
   modelValue: {
-    type: String as PropType<EditableProps['value']>,
+    type: String as PropType<UseEditableProps['value']>,
   },
   name: {
-    type: String as PropType<EditableProps['name']>,
+    type: String as PropType<UseEditableProps['name']>,
   },
   placeholder: {
-    type: String as PropType<EditableProps['placeholder']>,
+    type: String as PropType<UseEditableProps['placeholder']>,
   },
   readOnly: {
-    type: Boolean as PropType<EditableProps['readOnly']>,
+    type: Boolean as PropType<UseEditableProps['readOnly']>,
   },
   selectOnFocus: {
-    type: Boolean as PropType<EditableProps['selectOnFocus']>,
+    type: Boolean as PropType<UseEditableProps['selectOnFocus']>,
   },
   startWithEditView: {
-    type: Boolean as PropType<EditableProps['startWithEditView']>,
+    type: Boolean as PropType<UseEditableProps['startWithEditView']>,
   },
   submitMode: {
-    type: String as PropType<EditableProps['submitMode']>,
+    type: String as PropType<UseEditableProps['submitMode']>,
   },
   translations: {
-    type: Object as PropType<EditableProps['translations']>,
+    type: Object as PropType<UseEditableProps['translations']>,
   },
   value: {
-    type: String as PropType<EditableProps['value']>,
+    type: String as PropType<UseEditableProps['value']>,
   },
 })
 
-export const Editable: ComponentWithProps<Partial<EditableProps>> = defineComponent({
+export const Editable: ComponentWithProps<Partial<UseEditableProps>> = defineComponent({
   name: 'Editable',
   props: VueEditableProps,
   emits: ['cancel', 'change', 'update:modelValue', 'edit', 'submit'],
   setup(props, { slots, attrs, emit }) {
-    const api = useEditable(emit, props as EditableProps)
+    const api = useEditable(emit, props as UseEditableProps)
 
     EditableProvider(api)
 
@@ -83,3 +84,5 @@ export const Editable: ComponentWithProps<Partial<EditableProps>> = defineCompon
     )
   },
 })
+
+export type EditableProps = Optional<UseEditableProps, 'id'>
diff --git a/packages/vue/src/editable/use-editable.ts b/packages/vue/src/editable/use-editable.ts
index a2d560b75e..92a8ad9c81 100644
--- a/packages/vue/src/editable/use-editable.ts
+++ b/packages/vue/src/editable/use-editable.ts
@@ -33,3 +33,5 @@ export const useEditable = <T extends ExtractPropTypes<EditableProps>>(
 
   return computed(() => connect(state.value, send, normalizeProps))
 }
+
+export type UseEditableReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/hover-card/hover-card.tsx b/packages/vue/src/hover-card/hover-card.tsx
index d6e03cfdb3..51373a5ea5 100644
--- a/packages/vue/src/hover-card/hover-card.tsx
+++ b/packages/vue/src/hover-card/hover-card.tsx
@@ -1,40 +1,41 @@
 import { type Context as HoverCardContext } from '@zag-js/hover-card'
 import { defineComponent, type PropType } from 'vue'
 
+import type { Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { HoverCardProvider } from './hover-card-context'
 import { useHoverCard } from './use-hover-card'
 
-export type HoverCardProps = HoverCardContext
+export type UseHoverCardProps = HoverCardContext
 
-const VueHoverCardProps = createVueProps<HoverCardProps>({
+const VueHoverCardProps = createVueProps<UseHoverCardProps>({
   id: {
-    type: String as PropType<HoverCardProps['id']>,
+    type: String as PropType<UseHoverCardProps['id']>,
   },
   ids: {
-    type: Object as PropType<HoverCardProps['ids']>,
+    type: Object as PropType<UseHoverCardProps['ids']>,
   },
   openDelay: {
-    type: Number as PropType<HoverCardProps['openDelay']>,
+    type: Number as PropType<UseHoverCardProps['openDelay']>,
   },
   closeDelay: {
-    type: Number as PropType<HoverCardProps['closeDelay']>,
+    type: Number as PropType<UseHoverCardProps['closeDelay']>,
   },
   dir: {
-    type: String as PropType<HoverCardProps['dir']>,
+    type: String as PropType<UseHoverCardProps['dir']>,
   },
   getRootNode: {
-    type: Function as PropType<HoverCardProps['getRootNode']>,
+    type: Function as PropType<UseHoverCardProps['getRootNode']>,
   },
   open: {
-    type: Boolean as PropType<HoverCardProps['open']>,
+    type: Boolean as PropType<UseHoverCardProps['open']>,
   },
   positioning: {
-    type: Object as PropType<HoverCardProps['positioning']>,
+    type: Object as PropType<UseHoverCardProps['positioning']>,
   },
 })
 
-export const HoverCard: ComponentWithProps<Partial<HoverCardProps>> = defineComponent({
+export const HoverCard: ComponentWithProps<Partial<UseHoverCardProps>> = defineComponent({
   name: 'HoverCard',
   props: VueHoverCardProps,
   emits: ['open', 'close'],
@@ -46,3 +47,5 @@ export const HoverCard: ComponentWithProps<Partial<HoverCardProps>> = defineComp
     return () => slots?.default?.(api.value)
   },
 })
+
+export type HoverCardProps = Optional<UseHoverCardProps, 'id'>
diff --git a/packages/vue/src/hover-card/use-hover-card.ts b/packages/vue/src/hover-card/use-hover-card.ts
index 06223e15fa..7830135d8a 100644
--- a/packages/vue/src/hover-card/use-hover-card.ts
+++ b/packages/vue/src/hover-card/use-hover-card.ts
@@ -25,3 +25,5 @@ export const useHoverCard = <T extends ExtractPropTypes<HoverCardProps>>(
 
   return computed(() => connect(state.value, send, normalizeProps))
 }
+
+export type UseHoverCardReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/menu/menu.tsx b/packages/vue/src/menu/menu.tsx
index f6d6f5f6e4..a68a4a2425 100644
--- a/packages/vue/src/menu/menu.tsx
+++ b/packages/vue/src/menu/menu.tsx
@@ -1,5 +1,6 @@
 import type { Context } from '@zag-js/menu'
 import { computed, defineComponent, onMounted, type PropType } from 'vue'
+import type { Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import {
   MenuMachineProvider,
@@ -15,47 +16,47 @@ export type MenuState = {
   onClose: () => void
 }
 
-export type MenuProps = Context & { isOpen?: boolean }
+export type UseMenuProps = Context & { isOpen?: boolean }
 
-const VueProps = createVueProps<MenuProps>({
+const VueProps = createVueProps<UseMenuProps>({
   anchorPoint: {
-    type: Object as PropType<MenuProps['anchorPoint']>,
+    type: Object as PropType<UseMenuProps['anchorPoint']>,
   },
   'aria-label': {
-    type: String as PropType<MenuProps['aria-label']>,
+    type: String as PropType<UseMenuProps['aria-label']>,
   },
   closeOnSelect: {
-    type: Boolean as PropType<MenuProps['closeOnSelect']>,
+    type: Boolean as PropType<UseMenuProps['closeOnSelect']>,
     default: true,
   },
   dir: {
-    type: String as PropType<MenuProps['dir']>,
+    type: String as PropType<UseMenuProps['dir']>,
   },
   getRootNode: {
-    type: Function as PropType<MenuProps['getRootNode']>,
+    type: Function as PropType<UseMenuProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<MenuProps['id']>,
+    type: String as PropType<UseMenuProps['id']>,
   },
   ids: {
-    type: Object as PropType<MenuProps['ids']>,
+    type: Object as PropType<UseMenuProps['ids']>,
   },
   isOpen: {
-    type: Boolean as PropType<MenuProps['isOpen']>,
+    type: Boolean as PropType<UseMenuProps['isOpen']>,
     default: false,
   },
   loop: {
-    type: Boolean as PropType<MenuProps['loop']>,
+    type: Boolean as PropType<UseMenuProps['loop']>,
   },
   positioning: {
-    type: Object as PropType<MenuProps['positioning']>,
+    type: Object as PropType<UseMenuProps['positioning']>,
   },
   value: {
-    type: Object as PropType<MenuProps['value']>,
+    type: Object as PropType<UseMenuProps['value']>,
   },
 })
 
-export const Menu: ComponentWithProps<Partial<MenuProps>> = defineComponent({
+export const Menu: ComponentWithProps<Partial<UseMenuProps>> = defineComponent({
   name: 'Menu',
   props: VueProps,
   emits: ['close', 'open', 'select', 'value-change'],
@@ -95,3 +96,5 @@ export const Menu: ComponentWithProps<Partial<MenuProps>> = defineComponent({
     return () => slots.default?.({ isOpen: api.value.isOpen, close: api.value.close })
   },
 })
+
+export type MenuProps = Optional<UseMenuProps, 'id'>
diff --git a/packages/vue/src/number-input/number-input.tsx b/packages/vue/src/number-input/number-input.tsx
index 9e9ef1f9db..c7b384ff91 100644
--- a/packages/vue/src/number-input/number-input.tsx
+++ b/packages/vue/src/number-input/number-input.tsx
@@ -1,100 +1,100 @@
 import type { Context } from '@zag-js/number-input'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { NumberInputProvider } from './number-input-context'
 import { useNumberInput } from './use-number-input'
 
 export type NumberInputContext = Context & { modelValue?: Context['value'] }
-export type NumberInputProps = Assign<HTMLArkProps<'div'>, NumberInputContext>
+export type UseNumberInputProps = Assign<HTMLArkProps<'div'>, NumberInputContext>
 
-const VueNumberInputProps = createVueProps<NumberInputProps>({
+const VueNumberInputProps = createVueProps<UseNumberInputProps>({
   id: {
-    type: String as PropType<NumberInputProps['id']>,
+    type: String as PropType<UseNumberInputProps['id']>,
   },
   allowMouseWheel: {
-    type: Boolean as PropType<NumberInputProps['allowMouseWheel']>,
+    type: Boolean as PropType<UseNumberInputProps['allowMouseWheel']>,
   },
   allowOverflow: {
-    type: Boolean as PropType<NumberInputProps['allowOverflow']>,
+    type: Boolean as PropType<UseNumberInputProps['allowOverflow']>,
   },
   clampValueOnBlur: {
-    type: Boolean as PropType<NumberInputProps['clampValueOnBlur']>,
+    type: Boolean as PropType<UseNumberInputProps['clampValueOnBlur']>,
     default: true,
   },
   dir: {
-    type: String as PropType<NumberInputProps['dir']>,
+    type: String as PropType<UseNumberInputProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<NumberInputProps['disabled']>,
+    type: Boolean as PropType<UseNumberInputProps['disabled']>,
   },
   focusInputOnChange: {
-    type: Boolean as PropType<NumberInputProps['focusInputOnChange']>,
+    type: Boolean as PropType<UseNumberInputProps['focusInputOnChange']>,
   },
   form: {
-    type: String as PropType<NumberInputProps['form']>,
+    type: String as PropType<UseNumberInputProps['form']>,
   },
   format: {
-    type: Function as PropType<NumberInputProps['format']>,
+    type: Function as PropType<UseNumberInputProps['format']>,
   },
   getRootNode: {
-    type: Function as PropType<NumberInputProps['getRootNode']>,
+    type: Function as PropType<UseNumberInputProps['getRootNode']>,
   },
   ids: {
-    type: Object as PropType<NumberInputProps['ids']>,
+    type: Object as PropType<UseNumberInputProps['ids']>,
   },
   inputMode: {
-    type: String as PropType<NumberInputProps['inputMode']>,
+    type: String as PropType<UseNumberInputProps['inputMode']>,
   },
   invalid: {
-    type: Boolean as PropType<NumberInputProps['invalid']>,
+    type: Boolean as PropType<UseNumberInputProps['invalid']>,
   },
   max: {
-    type: Number as PropType<NumberInputProps['max']>,
+    type: Number as PropType<UseNumberInputProps['max']>,
   },
   maxFractionDigits: {
-    type: Number as PropType<NumberInputProps['maxFractionDigits']>,
+    type: Number as PropType<UseNumberInputProps['maxFractionDigits']>,
   },
   min: {
-    type: Number as PropType<NumberInputProps['min']>,
+    type: Number as PropType<UseNumberInputProps['min']>,
   },
   minFractionDigits: {
-    type: Number as PropType<NumberInputProps['minFractionDigits']>,
+    type: Number as PropType<UseNumberInputProps['minFractionDigits']>,
   },
   modelValue: {
-    type: String as PropType<NumberInputProps['modelValue']>,
+    type: String as PropType<UseNumberInputProps['modelValue']>,
   },
   name: {
-    type: String as PropType<NumberInputProps['name']>,
+    type: String as PropType<UseNumberInputProps['name']>,
   },
   parse: {
-    type: Function as PropType<NumberInputProps['parse']>,
+    type: Function as PropType<UseNumberInputProps['parse']>,
   },
   pattern: {
-    type: String as PropType<NumberInputProps['pattern']>,
+    type: String as PropType<UseNumberInputProps['pattern']>,
   },
   readOnly: {
-    type: Boolean as PropType<NumberInputProps['readOnly']>,
+    type: Boolean as PropType<UseNumberInputProps['readOnly']>,
   },
   spinOnPress: {
-    type: Boolean as PropType<NumberInputProps['spinOnPress']>,
+    type: Boolean as PropType<UseNumberInputProps['spinOnPress']>,
   },
   step: {
-    type: Number as PropType<NumberInputProps['step']>,
+    type: Number as PropType<UseNumberInputProps['step']>,
   },
   translations: {
-    type: Object as PropType<NumberInputProps['translations']>,
+    type: Object as PropType<UseNumberInputProps['translations']>,
   },
   validateCharacter: {
-    type: Function as PropType<NumberInputProps['validateCharacter']>,
+    type: Function as PropType<UseNumberInputProps['validateCharacter']>,
   },
   value: {
-    type: String as PropType<NumberInputProps['value']>,
+    type: String as PropType<UseNumberInputProps['value']>,
   },
 })
 
-export const NumberInput: ComponentWithProps<Partial<NumberInputProps>> = defineComponent({
+export const NumberInput: ComponentWithProps<Partial<UseNumberInputProps>> = defineComponent({
   name: 'NumberInput',
   emits: ['change', 'focus', 'invalid', 'blur', 'update:modelValue'],
   props: VueNumberInputProps,
@@ -106,3 +106,5 @@ export const NumberInput: ComponentWithProps<Partial<NumberInputProps>> = define
     return () => <ark.div>{() => slots?.default?.(api.value)}</ark.div>
   },
 })
+
+export type NumberInputProps = Optional<NumberInputContext, 'id'>
diff --git a/packages/vue/src/number-input/use-number-input.tsx b/packages/vue/src/number-input/use-number-input.tsx
index ded4e8cf66..cdd0470aa7 100644
--- a/packages/vue/src/number-input/use-number-input.tsx
+++ b/packages/vue/src/number-input/use-number-input.tsx
@@ -33,3 +33,5 @@ export const useNumberInput = <T extends ExtractPropTypes<NumberInputContext>>(
 
   return computed(() => connect(state.value, send, normalizeProps))
 }
+
+export type UseNumberInputReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/pagination/pagination-page-trigger.tsx b/packages/vue/src/pagination/pagination-page-trigger.tsx
index a28c7f51ff..f27f3b4fd5 100644
--- a/packages/vue/src/pagination/pagination-page-trigger.tsx
+++ b/packages/vue/src/pagination/pagination-page-trigger.tsx
@@ -6,7 +6,7 @@ import { usePaginationContext } from './pagination-context'
 
 export type PaginationPageTriggerProps = HTMLArkProps<'li'> & PageTriggerProps
 
-export const PaginationPageTrigger: ComponentWithProps<PaginationPageTriggerProps> =
+export const PaginationPageTrigger: ComponentWithProps<Partial<PaginationPageTriggerProps>> =
   defineComponent({
     name: 'PaginationPageTrigger',
     props: {
diff --git a/packages/vue/src/pagination/pagination.stories.vue b/packages/vue/src/pagination/pagination.stories.vue
index 5f7d5c45da..e3d070450b 100644
--- a/packages/vue/src/pagination/pagination.stories.vue
+++ b/packages/vue/src/pagination/pagination.stories.vue
@@ -8,6 +8,7 @@ import {
   PaginationPageTrigger,
   PaginationPrevPageTrigger,
 } from './'
+
 import './pagination.css'
 </script>
 <template>
@@ -20,7 +21,7 @@ import './pagination.css'
         <PaginationPageTrigger v-if="page.type === 'page'" :value="page.value">
           <button>{{ page.value }}</button>
         </PaginationPageTrigger>
-        <PaginationEllipsis v-else :index="index"> &#8230; </PaginationEllipsis>
+        <PaginationEllipsis v-else :index=" index "> &#8230; </PaginationEllipsis>
       </template>
       <PaginationListItem>
         <PaginationNextPageTrigger>
diff --git a/packages/vue/src/pagination/pagination.tsx b/packages/vue/src/pagination/pagination.tsx
index 3628e57465..44ab0c2855 100644
--- a/packages/vue/src/pagination/pagination.tsx
+++ b/packages/vue/src/pagination/pagination.tsx
@@ -1,45 +1,45 @@
 import type { Context as PaginationContext } from '@zag-js/pagination'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { PaginationProvider } from './pagination-context'
 import { usePagination } from './use-pagination'
 
-export type PaginationProps = Assign<HTMLArkProps<'nav'>, PaginationContext>
+export type UsePaginationProps = Assign<HTMLArkProps<'nav'>, PaginationContext>
 
-const VueProps = createVueProps<PaginationProps>({
+const VueProps = createVueProps<UsePaginationProps>({
   count: {
-    type: Number as PropType<PaginationProps['count']>,
+    type: Number as PropType<UsePaginationProps['count']>,
     required: true,
   },
   dir: {
-    type: String as PropType<PaginationProps['dir']>,
+    type: String as PropType<UsePaginationProps['dir']>,
   },
   getRootNode: {
-    type: Function as PropType<PaginationProps['getRootNode']>,
+    type: Function as PropType<UsePaginationProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<PaginationProps['id']>,
+    type: String as PropType<UsePaginationProps['id']>,
   },
   ids: {
-    type: Object as PropType<PaginationProps['ids']>,
+    type: Object as PropType<UsePaginationProps['ids']>,
   },
   page: {
-    type: Number as PropType<PaginationProps['page']>,
+    type: Number as PropType<UsePaginationProps['page']>,
   },
   pageSize: {
-    type: Number as PropType<PaginationProps['pageSize']>,
+    type: Number as PropType<UsePaginationProps['pageSize']>,
   },
   siblingCount: {
-    type: Number as PropType<PaginationProps['siblingCount']>,
+    type: Number as PropType<UsePaginationProps['siblingCount']>,
   },
   translations: {
-    type: Object as PropType<PaginationProps['translations']>,
+    type: Object as PropType<UsePaginationProps['translations']>,
   },
 })
 
-export const Pagination: ComponentWithProps<Partial<PaginationProps>> = defineComponent({
+export const Pagination: ComponentWithProps<Partial<UsePaginationProps>> = defineComponent({
   name: 'Pagination',
   props: VueProps,
   emits: ['change'],
@@ -55,3 +55,5 @@ export const Pagination: ComponentWithProps<Partial<PaginationProps>> = defineCo
     )
   },
 })
+
+export type PaginationProps = Optional<PaginationContext, 'id'>
diff --git a/packages/vue/src/pagination/use-pagination.ts b/packages/vue/src/pagination/use-pagination.ts
index f09a3cbd00..f3a04e1153 100644
--- a/packages/vue/src/pagination/use-pagination.ts
+++ b/packages/vue/src/pagination/use-pagination.ts
@@ -22,3 +22,5 @@ export const usePagination = <T extends ExtractPropTypes<PaginationContext>>(
 
   return computed(() => connect(state.value, send, normalizeProps))
 }
+
+export type UsePaginationReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/pin-input/pin-input.tsx b/packages/vue/src/pin-input/pin-input.tsx
index 903ff8c934..52a3e811d4 100644
--- a/packages/vue/src/pin-input/pin-input.tsx
+++ b/packages/vue/src/pin-input/pin-input.tsx
@@ -1,7 +1,7 @@
 import { type Context } from '@zag-js/pin-input'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { PinInputProvider } from './pin-input-context'
 import { usePinInput } from './use-pin-input'
@@ -9,66 +9,66 @@ import { usePinInput } from './use-pin-input'
 export type PinInputContext = Context & {
   modelValue?: PinInputContext['value']
 }
-export type PinInputProps = Assign<HTMLArkProps<'div'>, PinInputContext>
+export type UsePinInputProps = Assign<HTMLArkProps<'div'>, PinInputContext>
 
-const VuePinInputProps = createVueProps<PinInputProps>({
+const VuePinInputProps = createVueProps<UsePinInputProps>({
   autoFocus: {
-    type: Boolean as PropType<PinInputProps['autoFocus']>,
+    type: Boolean as PropType<UsePinInputProps['autoFocus']>,
   },
   blurOnComplete: {
-    type: Boolean as PropType<PinInputProps['blurOnComplete']>,
+    type: Boolean as PropType<UsePinInputProps['blurOnComplete']>,
   },
   dir: {
-    type: String as PropType<PinInputProps['dir']>,
+    type: String as PropType<UsePinInputProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<PinInputProps['disabled']>,
+    type: Boolean as PropType<UsePinInputProps['disabled']>,
   },
   form: {
-    type: String as PropType<PinInputProps['form']>,
+    type: String as PropType<UsePinInputProps['form']>,
   },
   id: {
-    type: String as PropType<PinInputProps['id']>,
+    type: String as PropType<UsePinInputProps['id']>,
   },
   ids: {
-    type: Object as PropType<PinInputProps['ids']>,
+    type: Object as PropType<UsePinInputProps['ids']>,
   },
   invalid: {
-    type: Boolean as PropType<PinInputProps['invalid']>,
+    type: Boolean as PropType<UsePinInputProps['invalid']>,
   },
   mask: {
-    type: Boolean as PropType<PinInputProps['mask']>,
+    type: Boolean as PropType<UsePinInputProps['mask']>,
   },
   modelValue: {
-    type: Array as PropType<PinInputProps['modelValue']>,
+    type: Array as PropType<UsePinInputProps['modelValue']>,
   },
   name: {
-    type: String as PropType<PinInputProps['name']>,
+    type: String as PropType<UsePinInputProps['name']>,
   },
   otp: {
-    type: Boolean as PropType<PinInputProps['otp']>,
+    type: Boolean as PropType<UsePinInputProps['otp']>,
   },
   pattern: {
-    type: String as PropType<PinInputProps['pattern']>,
+    type: String as PropType<UsePinInputProps['pattern']>,
   },
   placeholder: {
-    type: String as PropType<PinInputProps['placeholder']>,
+    type: String as PropType<UsePinInputProps['placeholder']>,
   },
   selectOnFocus: {
-    type: Boolean as PropType<PinInputProps['selectOnFocus']>,
+    type: Boolean as PropType<UsePinInputProps['selectOnFocus']>,
   },
   translations: {
-    type: Object as PropType<PinInputProps['translations']>,
+    type: Object as PropType<UsePinInputProps['translations']>,
   },
   type: {
-    type: String as PropType<PinInputProps['type']>,
+    type: String as PropType<UsePinInputProps['type']>,
   },
   value: {
-    type: Array as PropType<PinInputProps['value']>,
+    type: Array as PropType<UsePinInputProps['value']>,
   },
 })
 
-export const PinInput: ComponentWithProps<Partial<PinInputProps>> = defineComponent({
+export const PinInput: ComponentWithProps<Partial<UsePinInputProps>> = defineComponent({
   name: 'PinInput',
   props: VuePinInputProps,
   emits: ['change', 'update:modelValue', 'invalid', 'complete'],
@@ -84,3 +84,5 @@ export const PinInput: ComponentWithProps<Partial<PinInputProps>> = defineCompon
     )
   },
 })
+
+export type PinInputProps = Optional<PinInputContext, 'id'>
diff --git a/packages/vue/src/pin-input/use-pin-input.ts b/packages/vue/src/pin-input/use-pin-input.ts
index 6d139c740d..88d1637a83 100644
--- a/packages/vue/src/pin-input/use-pin-input.ts
+++ b/packages/vue/src/pin-input/use-pin-input.ts
@@ -32,3 +32,5 @@ export const usePinInput = <T extends ExtractPropTypes<PinInputContext>>(
 
   return api
 }
+
+export type UsePinInputReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/popover/popover.tsx b/packages/vue/src/popover/popover.tsx
index 2c45a22bff..05bb25f856 100644
--- a/packages/vue/src/popover/popover.tsx
+++ b/packages/vue/src/popover/popover.tsx
@@ -1,6 +1,7 @@
 import type { Context } from '@zag-js/popover'
 import { defineComponent, type PropType } from 'vue'
-import { createVueProps } from '../utils'
+import type { Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { PopoverProvider } from './popover-context'
 import { usePopover } from './use-popover'
 
@@ -12,49 +13,49 @@ export type PopoverContext = Context & {
    */
   isOpen?: boolean
 }
-export type PopoverProps = PopoverContext
+export type UsePopoverProps = PopoverContext
 
-const VuePopoverProps = createVueProps({
+const VuePopoverProps = createVueProps<Partial<UsePopoverProps>>({
   autoFocus: {
-    type: Boolean as PropType<PopoverProps['autoFocus']>,
+    type: Boolean as PropType<UsePopoverProps['autoFocus']>,
   },
   closeOnEsc: {
-    type: Boolean as PropType<PopoverProps['closeOnEsc']>,
+    type: Boolean as PropType<UsePopoverProps['closeOnEsc']>,
   },
   closeOnInteractOutside: {
-    type: Boolean as PropType<PopoverProps['closeOnInteractOutside']>,
+    type: Boolean as PropType<UsePopoverProps['closeOnInteractOutside']>,
   },
   getRootNode: {
-    type: Function as PropType<PopoverProps['getRootNode']>,
+    type: Function as PropType<UsePopoverProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<PopoverProps['id']>,
+    type: String as PropType<UsePopoverProps['id']>,
   },
   ids: {
-    type: Object as PropType<PopoverProps['ids']>,
+    type: Object as PropType<UsePopoverProps['ids']>,
   },
   initialFocusEl: {
-    type: [Object, Function] as PropType<PopoverProps['initialFocusEl']>,
+    type: [Object, Function] as PropType<UsePopoverProps['initialFocusEl']>,
   },
   isOpen: {
-    type: Boolean as PropType<PopoverProps['isOpen']>,
+    type: Boolean as PropType<UsePopoverProps['isOpen']>,
     default: false,
   },
   modal: {
-    type: Boolean as PropType<PopoverProps['modal']>,
+    type: Boolean as PropType<UsePopoverProps['modal']>,
   },
   portalled: {
-    type: Boolean as PropType<PopoverProps['portalled']>,
+    type: Boolean as PropType<UsePopoverProps['portalled']>,
   },
   open: {
-    type: Boolean as PropType<PopoverProps['open']>,
+    type: Boolean as PropType<UsePopoverProps['open']>,
   },
   positioning: {
-    type: Object as PropType<PopoverProps['positioning']>,
+    type: Object as PropType<UsePopoverProps['positioning']>,
   },
 })
 
-export const Popover = defineComponent({
+export const Popover: ComponentWithProps<Partial<UsePopoverProps>> = defineComponent({
   name: 'Popover',
   props: VuePopoverProps,
   emits: [
@@ -66,10 +67,12 @@ export const Popover = defineComponent({
     'pointer-down-outside',
   ],
   setup(props, { slots, emit }) {
-    const api = usePopover(emit, props)
+    const api = usePopover(emit, props as Partial<UsePopoverProps>)
 
     PopoverProvider(api)
 
     return () => slots.default?.(api.value)
   },
 })
+
+export type PopoverProps = Optional<UsePopoverProps, 'id'>
diff --git a/packages/vue/src/popover/use-popover.ts b/packages/vue/src/popover/use-popover.ts
index 4163a5b7e0..2fb8a8d0b7 100644
--- a/packages/vue/src/popover/use-popover.ts
+++ b/packages/vue/src/popover/use-popover.ts
@@ -55,3 +55,5 @@ export const usePopover = <T extends ExtractPropTypes<PopoverContext>>(
 
   return api
 }
+
+export type UsePopoverReturn = ReturnType<typeof connect>
diff --git a/packages/vue/src/pressable/pressable.tsx b/packages/vue/src/pressable/pressable.tsx
index 630a344e17..75db5e29c0 100644
--- a/packages/vue/src/pressable/pressable.tsx
+++ b/packages/vue/src/pressable/pressable.tsx
@@ -1,34 +1,34 @@
 import type { Context as PressableContext } from '@zag-js/pressable'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { usePressable } from './use-pressable'
 
-export type PressableProps = Assign<HTMLArkProps<'button'>, PressableContext>
+export type UsePressableProps = Assign<HTMLArkProps<'button'>, PressableContext>
 
-const VueProps = createVueProps<PressableProps>({
+const VueProps = createVueProps<UsePressableProps>({
   id: {
-    type: String as PropType<PressableProps['id']>,
+    type: String as PropType<UsePressableProps['id']>,
   },
   disabled: {
-    type: Boolean as PropType<PressableProps['disabled']>,
+    type: Boolean as PropType<UsePressableProps['disabled']>,
   },
   cancelOnPointerExit: {
-    type: Boolean as PropType<PressableProps['cancelOnPointerExit']>,
+    type: Boolean as PropType<UsePressableProps['cancelOnPointerExit']>,
   },
   preventFocusOnPress: {
-    type: Boolean as PropType<PressableProps['preventFocusOnPress']>,
+    type: Boolean as PropType<UsePressableProps['preventFocusOnPress']>,
   },
   allowTextSelectionOnPress: {
-    type: Boolean as PropType<PressableProps['allowTextSelectionOnPress']>,
+    type: Boolean as PropType<UsePressableProps['allowTextSelectionOnPress']>,
   },
   dir: {
-    type: String as PropType<PressableProps['dir']>,
+    type: String as PropType<UsePressableProps['dir']>,
   },
 })
 
-export const Pressable: ComponentWithProps<Partial<PressableProps>> = defineComponent({
+export const Pressable: ComponentWithProps<Partial<UsePressableProps>> = defineComponent({
   name: 'Pressable',
   props: VueProps,
   emits: ['press', 'long-press', 'press-end', 'press-up', 'press-start'],
@@ -41,3 +41,5 @@ export const Pressable: ComponentWithProps<Partial<PressableProps>> = defineComp
     )
   },
 })
+
+export type PressableProps = Optional<UsePressableProps, 'id'>
diff --git a/packages/vue/src/pressable/use-pressable.tsx b/packages/vue/src/pressable/use-pressable.tsx
index 703f9d402c..65fe77b965 100644
--- a/packages/vue/src/pressable/use-pressable.tsx
+++ b/packages/vue/src/pressable/use-pressable.tsx
@@ -3,6 +3,8 @@ import { normalizeProps, useMachine } from '@zag-js/vue'
 import { computed, reactive, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
 
+export type UsePressableContext = PressableContext
+
 export const usePressable = <T extends ExtractPropTypes<PressableContext>>(
   emit: CallableFunction,
   context: T,
diff --git a/packages/vue/src/radio-group/radio-group.tsx b/packages/vue/src/radio-group/radio-group.tsx
index 7d422b603c..0a6f62134c 100644
--- a/packages/vue/src/radio-group/radio-group.tsx
+++ b/packages/vue/src/radio-group/radio-group.tsx
@@ -1,7 +1,7 @@
 import type { Context } from '@zag-js/radio-group'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { RadioGroupProvider } from './radio-context'
 import { useRadioGroup } from './use-radio-group'
@@ -9,45 +9,45 @@ import { useRadioGroup } from './use-radio-group'
 export type RadioGroupContext = Context & {
   modelValue?: Context['value']
 }
-export type RadioGroupProps = Assign<HTMLArkProps<'div'>, RadioGroupContext>
+export type UseRadioGroupProps = Assign<HTMLArkProps<'div'>, RadioGroupContext>
 
-const VueProps = createVueProps<RadioGroupProps>({
+const VueProps = createVueProps<UseRadioGroupProps>({
   dir: {
-    type: String as PropType<RadioGroupProps['dir']>,
+    type: String as PropType<UseRadioGroupProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<RadioGroupProps['disabled']>,
+    type: Boolean as PropType<UseRadioGroupProps['disabled']>,
   },
   form: {
-    type: String as PropType<RadioGroupProps['form']>,
+    type: String as PropType<UseRadioGroupProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<RadioGroupProps['getRootNode']>,
+    type: Function as PropType<UseRadioGroupProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<RadioGroupProps['id']>,
+    type: String as PropType<UseRadioGroupProps['id']>,
   },
   ids: {
-    type: Object as PropType<RadioGroupProps['ids']>,
+    type: Object as PropType<UseRadioGroupProps['ids']>,
   },
   modelValue: {
-    type: String as PropType<RadioGroupProps['modelValue']>,
+    type: String as PropType<UseRadioGroupProps['modelValue']>,
   },
   name: {
-    type: String as PropType<RadioGroupProps['name']>,
+    type: String as PropType<UseRadioGroupProps['name']>,
   },
   orientation: {
-    type: String as PropType<RadioGroupProps['orientation']>,
+    type: String as PropType<UseRadioGroupProps['orientation']>,
   },
   readOnly: {
-    type: Boolean as PropType<RadioGroupProps['readOnly']>,
+    type: Boolean as PropType<UseRadioGroupProps['readOnly']>,
   },
   value: {
-    type: String as PropType<RadioGroupProps['value']>,
+    type: String as PropType<UseRadioGroupProps['value']>,
   },
 })
 
-export const RadioGroup: ComponentWithProps<Partial<RadioGroupProps>> = defineComponent({
+export const RadioGroup: ComponentWithProps<Partial<UseRadioGroupProps>> = defineComponent({
   name: 'RadioGroup',
   props: VueProps,
   emits: ['change', 'update:modelValue'],
@@ -63,3 +63,5 @@ export const RadioGroup: ComponentWithProps<Partial<RadioGroupProps>> = defineCo
     )
   },
 })
+
+export type RadioGroupProps = Optional<RadioGroupContext, 'id'>
diff --git a/packages/vue/src/range-slider/range-slider.tsx b/packages/vue/src/range-slider/range-slider.tsx
index f3051fcf0e..383fb9d18e 100644
--- a/packages/vue/src/range-slider/range-slider.tsx
+++ b/packages/vue/src/range-slider/range-slider.tsx
@@ -1,7 +1,7 @@
 import type { Context } from '@zag-js/range-slider'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { RangeSliderProvider } from './range-slider-context'
 import { useRangeSlider } from './use-range-slider'
@@ -10,72 +10,72 @@ export type RangeSliderContext = Context & {
   modelValue?: Context['value']
 }
 
-export type RangeSliderProps = Assign<HTMLArkProps<'div'>, RangeSliderContext>
+export type UseRangeSliderProps = Assign<HTMLArkProps<'div'>, RangeSliderContext>
 
-const VueProps = createVueProps<RangeSliderProps>({
+const VueProps = createVueProps<UseRangeSliderProps>({
   'aria-label': {
-    type: Object as PropType<RangeSliderProps['aria-label']>,
+    type: Object as PropType<UseRangeSliderProps['aria-label']>,
   },
   'aria-labelledby': {
-    type: Object as PropType<RangeSliderProps['aria-labelledby']>,
+    type: Object as PropType<UseRangeSliderProps['aria-labelledby']>,
   },
   dir: {
-    type: String as PropType<RangeSliderProps['dir']>,
+    type: String as PropType<UseRangeSliderProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<RangeSliderProps['disabled']>,
+    type: Boolean as PropType<UseRangeSliderProps['disabled']>,
   },
   form: {
-    type: String as PropType<RangeSliderProps['form']>,
+    type: String as PropType<UseRangeSliderProps['form']>,
   },
   getAriaValueText: {
-    type: Function as PropType<RangeSliderProps['getAriaValueText']>,
+    type: Function as PropType<UseRangeSliderProps['getAriaValueText']>,
   },
   getRootNode: {
-    type: Function as PropType<RangeSliderProps['getRootNode']>,
+    type: Function as PropType<UseRangeSliderProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<RangeSliderProps['id']>,
+    type: String as PropType<UseRangeSliderProps['id']>,
   },
   ids: {
-    type: Object as PropType<RangeSliderProps['ids']>,
+    type: Object as PropType<UseRangeSliderProps['ids']>,
   },
   invalid: {
-    type: Boolean as PropType<RangeSliderProps['invalid']>,
+    type: Boolean as PropType<UseRangeSliderProps['invalid']>,
   },
   max: {
-    type: Number as PropType<RangeSliderProps['max']>,
+    type: Number as PropType<UseRangeSliderProps['max']>,
   },
   min: {
-    type: Number as PropType<RangeSliderProps['min']>,
+    type: Number as PropType<UseRangeSliderProps['min']>,
   },
   minStepsBetweenThumbs: {
-    type: Number as PropType<RangeSliderProps['minStepsBetweenThumbs']>,
+    type: Number as PropType<UseRangeSliderProps['minStepsBetweenThumbs']>,
   },
   modelValue: {
-    type: Object as PropType<RangeSliderProps['modelValue']>,
+    type: Object as PropType<UseRangeSliderProps['modelValue']>,
   },
   name: {
-    type: String as PropType<RangeSliderProps['name']>,
+    type: String as PropType<UseRangeSliderProps['name']>,
   },
   orientation: {
-    type: String as PropType<RangeSliderProps['orientation']>,
+    type: String as PropType<UseRangeSliderProps['orientation']>,
   },
   readOnly: {
-    type: Boolean as PropType<RangeSliderProps['readOnly']>,
+    type: Boolean as PropType<UseRangeSliderProps['readOnly']>,
   },
   step: {
-    type: Number as PropType<RangeSliderProps['step']>,
+    type: Number as PropType<UseRangeSliderProps['step']>,
   },
   thumbAlignment: {
-    type: String as PropType<RangeSliderProps['thumbAlignment']>,
+    type: String as PropType<UseRangeSliderProps['thumbAlignment']>,
   },
   value: {
-    type: Object as PropType<RangeSliderProps['value']>,
+    type: Object as PropType<UseRangeSliderProps['value']>,
   },
 })
 
-export const RangeSlider: ComponentWithProps<Partial<RangeSliderProps>> = defineComponent({
+export const RangeSlider: ComponentWithProps<Partial<UseRangeSliderProps>> = defineComponent({
   name: 'RangeSlider',
   props: VueProps,
   emits: ['change', 'update:modelValue', 'change-start', 'change-end'],
@@ -95,3 +95,5 @@ export const RangeSlider: ComponentWithProps<Partial<RangeSliderProps>> = define
     )
   },
 })
+
+export type RangeSliderProps = Optional<RangeSliderContext, 'id'>
diff --git a/packages/vue/src/rating-group/rating-group.tsx b/packages/vue/src/rating-group/rating-group.tsx
index 69399716a1..4181bb8717 100644
--- a/packages/vue/src/rating-group/rating-group.tsx
+++ b/packages/vue/src/rating-group/rating-group.tsx
@@ -1,7 +1,7 @@
 import type { Context } from '@zag-js/rating-group'
 import { defineComponent, Fragment, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import type { Assign } from '../types'
+import type { Assign, Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { RatingGroupProvider } from './rating-group-context'
 import { useRatingGroup } from './use-rating-group'
@@ -10,54 +10,54 @@ export type RatingGroupContext = Context & {
   modelValue?: RatingGroupContext['value']
 }
 
-export type RatingGroupProps = Assign<HTMLArkProps<'input'>, RatingGroupContext>
+export type UseRatingGroupProps = Assign<HTMLArkProps<'input'>, RatingGroupContext>
 
-const vueRatingGroupProps = createVueProps<RatingGroupProps>({
+const vueRatingGroupProps = createVueProps<UseRatingGroupProps>({
   id: {
-    type: String as PropType<RatingGroupProps['id']>,
+    type: String as PropType<UseRatingGroupProps['id']>,
   },
   allowHalf: {
-    type: Boolean as PropType<RatingGroupProps['allowHalf']>,
+    type: Boolean as PropType<UseRatingGroupProps['allowHalf']>,
   },
   autoFocus: {
-    type: Boolean as PropType<RatingGroupProps['autoFocus']>,
+    type: Boolean as PropType<UseRatingGroupProps['autoFocus']>,
   },
   dir: {
-    type: String as PropType<RatingGroupProps['dir']>,
+    type: String as PropType<UseRatingGroupProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<RatingGroupProps['disabled']>,
+    type: Boolean as PropType<UseRatingGroupProps['disabled']>,
   },
   form: {
-    type: String as PropType<RatingGroupProps['form']>,
+    type: String as PropType<UseRatingGroupProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<RatingGroupProps['getRootNode']>,
+    type: Function as PropType<UseRatingGroupProps['getRootNode']>,
   },
   ids: {
-    type: Object as PropType<RatingGroupProps['ids']>,
+    type: Object as PropType<UseRatingGroupProps['ids']>,
   },
   max: {
-    type: Number as PropType<RatingGroupProps['max']>,
+    type: Number as PropType<UseRatingGroupProps['max']>,
   },
   modelValue: {
-    type: Number as PropType<RatingGroupProps['modelValue']>,
+    type: Number as PropType<UseRatingGroupProps['modelValue']>,
   },
   name: {
-    type: String as PropType<RatingGroupProps['name']>,
+    type: String as PropType<UseRatingGroupProps['name']>,
   },
   readOnly: {
-    type: Boolean as PropType<RatingGroupProps['readOnly']>,
+    type: Boolean as PropType<UseRatingGroupProps['readOnly']>,
   },
   translations: {
-    type: Object as PropType<RatingGroupProps['translations']>,
+    type: Object as PropType<UseRatingGroupProps['translations']>,
   },
   value: {
-    type: Number as PropType<RatingGroupProps['value']>,
+    type: Number as PropType<UseRatingGroupProps['value']>,
   },
 })
 
-export const RatingGroup: ComponentWithProps<Partial<RatingGroupProps>> = defineComponent({
+export const RatingGroup: ComponentWithProps<Partial<UseRatingGroupProps>> = defineComponent({
   name: 'RatingGroup',
   props: vueRatingGroupProps,
   emits: ['change', 'update:modelValue', 'hover'],
@@ -76,3 +76,5 @@ export const RatingGroup: ComponentWithProps<Partial<RatingGroupProps>> = define
     )
   },
 })
+
+export type RatingGroupProps = Optional<RatingGroupContext, 'id'>
diff --git a/packages/vue/src/select/select.tsx b/packages/vue/src/select/select.tsx
index 075f16084b..e415402059 100644
--- a/packages/vue/src/select/select.tsx
+++ b/packages/vue/src/select/select.tsx
@@ -1,5 +1,6 @@
 import type { Context } from '@zag-js/select'
 import { defineComponent, type PropType } from 'vue'
+import type { Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { SelectProvider } from './select-context'
 import { useSelect } from './use-select'
@@ -8,72 +9,74 @@ export type SelectContext = Context & {
   modelValue?: Context['selectedOption']
 }
 
-export type SelectProps = SelectContext
+export type UseSelectProps = SelectContext
 
-const VueSelectProps = createVueProps<SelectProps>({
+const VueSelectProps = createVueProps<UseSelectProps>({
   id: {
-    type: String as PropType<SelectProps['id']>,
+    type: String as PropType<UseSelectProps['id']>,
   },
   modelValue: {
-    type: [Object, null] as PropType<SelectProps['modelValue']>,
+    type: [Object, null] as PropType<UseSelectProps['modelValue']>,
   },
   loop: {
-    type: Boolean as PropType<SelectProps['loop']>,
+    type: Boolean as PropType<UseSelectProps['loop']>,
     default: false,
   },
   closeOnSelect: {
-    type: Boolean as PropType<SelectProps['closeOnSelect']>,
+    type: Boolean as PropType<UseSelectProps['closeOnSelect']>,
     default: true,
   },
   disabled: {
-    type: Boolean as PropType<SelectProps['disabled']>,
+    type: Boolean as PropType<UseSelectProps['disabled']>,
     default: false,
   },
   readOnly: {
-    type: Boolean as PropType<SelectProps['readOnly']>,
+    type: Boolean as PropType<UseSelectProps['readOnly']>,
     default: false,
   },
   name: {
-    type: String as PropType<SelectProps['name']>,
+    type: String as PropType<UseSelectProps['name']>,
   },
   invalid: {
-    type: Boolean as PropType<SelectProps['invalid']>,
+    type: Boolean as PropType<UseSelectProps['invalid']>,
   },
   form: {
-    type: String as PropType<SelectProps['form']>,
+    type: String as PropType<UseSelectProps['form']>,
   },
   positioning: {
-    type: Object as PropType<SelectProps['positioning']>,
+    type: Object as PropType<UseSelectProps['positioning']>,
   },
   highlightedOption: {
-    type: Object as PropType<SelectProps['highlightedOption']>,
+    type: Object as PropType<UseSelectProps['highlightedOption']>,
   },
   selectOnTab: {
-    type: Boolean as PropType<SelectProps['selectOnTab']>,
+    type: Boolean as PropType<UseSelectProps['selectOnTab']>,
   },
   selectedOption: {
-    type: Object as PropType<SelectProps['selectedOption']>,
+    type: Object as PropType<UseSelectProps['selectedOption']>,
   },
   dir: {
-    type: String as PropType<SelectProps['dir']>,
+    type: String as PropType<UseSelectProps['dir']>,
   },
   ids: {
-    type: Object as PropType<SelectProps['ids']>,
+    type: Object as PropType<UseSelectProps['ids']>,
   },
   getRootNode: {
-    type: Function as PropType<SelectProps['getRootNode']>,
+    type: Function as PropType<UseSelectProps['getRootNode']>,
   },
 })
 
-export const Select: ComponentWithProps<Partial<SelectProps>> = defineComponent({
+export const Select: ComponentWithProps<Partial<UseSelectProps>> = defineComponent({
   name: 'Select',
   emits: ['change', 'highlight', 'open', 'close', 'update:modelValue'],
   props: VueSelectProps,
   setup(props, { slots, emit }) {
-    const api = useSelect(emit, props as SelectProps)
+    const api = useSelect(emit, props as UseSelectProps)
 
     SelectProvider(api)
 
     return () => slots?.default?.(api.value)
   },
 })
+
+export type SelectProps = Optional<SelectContext, 'id'>
diff --git a/packages/vue/src/slider/slider.tsx b/packages/vue/src/slider/slider.tsx
index d7691aff22..6f6692140b 100644
--- a/packages/vue/src/slider/slider.tsx
+++ b/packages/vue/src/slider/slider.tsx
@@ -1,7 +1,7 @@
 import type { Context } from '@zag-js/slider'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, getValidChildren, type ComponentWithProps } from '../utils'
 import { SliderProvider } from './slider-context'
 import { useSlider } from './use-slider'
@@ -10,75 +10,75 @@ export type SliderContext = Context & {
   modelValue?: Context['value']
 }
 
-export type SliderProps = Assign<HTMLArkProps<'div'>, SliderContext>
+export type UseSliderProps = Assign<HTMLArkProps<'div'>, SliderContext>
 
-const VueProps = createVueProps<SliderProps>({
+const VueProps = createVueProps<UseSliderProps>({
   'aria-label': {
-    type: String as PropType<SliderProps['aria-label']>,
+    type: String as PropType<UseSliderProps['aria-label']>,
   },
   'aria-labelledby': {
-    type: String as PropType<SliderProps['aria-labelledby']>,
+    type: String as PropType<UseSliderProps['aria-labelledby']>,
   },
   dir: {
-    type: String as PropType<SliderProps['dir']>,
+    type: String as PropType<UseSliderProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<SliderProps['disabled']>,
+    type: Boolean as PropType<UseSliderProps['disabled']>,
   },
   focusThumbOnChange: {
-    type: Boolean as PropType<SliderProps['focusThumbOnChange']>,
+    type: Boolean as PropType<UseSliderProps['focusThumbOnChange']>,
   },
   form: {
-    type: String as PropType<SliderProps['form']>,
+    type: String as PropType<UseSliderProps['form']>,
   },
   getAriaValueText: {
-    type: Function as PropType<SliderProps['getAriaValueText']>,
+    type: Function as PropType<UseSliderProps['getAriaValueText']>,
   },
   getRootNode: {
-    type: Function as PropType<SliderProps['getRootNode']>,
+    type: Function as PropType<UseSliderProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<SliderProps['id']>,
+    type: String as PropType<UseSliderProps['id']>,
   },
   ids: {
-    type: Object as PropType<SliderProps['ids']>,
+    type: Object as PropType<UseSliderProps['ids']>,
   },
   invalid: {
-    type: Boolean as PropType<SliderProps['invalid']>,
+    type: Boolean as PropType<UseSliderProps['invalid']>,
   },
   max: {
-    type: Number as PropType<SliderProps['max']>,
+    type: Number as PropType<UseSliderProps['max']>,
   },
   min: {
-    type: Number as PropType<SliderProps['min']>,
+    type: Number as PropType<UseSliderProps['min']>,
   },
   modelValue: {
-    type: Number as PropType<SliderProps['modelValue']>,
+    type: Number as PropType<UseSliderProps['modelValue']>,
   },
   name: {
-    type: String as PropType<SliderProps['name']>,
+    type: String as PropType<UseSliderProps['name']>,
   },
   orientation: {
-    type: String as PropType<SliderProps['orientation']>,
+    type: String as PropType<UseSliderProps['orientation']>,
   },
   origin: {
-    type: String as PropType<SliderProps['origin']>,
+    type: String as PropType<UseSliderProps['origin']>,
   },
   readOnly: {
-    type: Boolean as PropType<SliderProps['readOnly']>,
+    type: Boolean as PropType<UseSliderProps['readOnly']>,
   },
   step: {
-    type: Number as PropType<SliderProps['step']>,
+    type: Number as PropType<UseSliderProps['step']>,
   },
   thumbAlignment: {
-    type: String as PropType<SliderProps['thumbAlignment']>,
+    type: String as PropType<UseSliderProps['thumbAlignment']>,
   },
   value: {
-    type: Number as PropType<SliderProps['value']>,
+    type: Number as PropType<UseSliderProps['value']>,
   },
 })
 
-export const Slider: ComponentWithProps<Partial<SliderProps>> = defineComponent({
+export const Slider: ComponentWithProps<Partial<UseSliderProps>> = defineComponent({
   name: 'Slider',
   props: VueProps,
   setup(props, { slots, attrs, emit, expose }) {
@@ -97,3 +97,5 @@ export const Slider: ComponentWithProps<Partial<SliderProps>> = defineComponent(
     )
   },
 })
+
+export type SliderProps = Optional<SliderContext, 'id'>
diff --git a/packages/vue/src/splitter/splitter.tsx b/packages/vue/src/splitter/splitter.tsx
index a923d6d808..1753481f76 100644
--- a/packages/vue/src/splitter/splitter.tsx
+++ b/packages/vue/src/splitter/splitter.tsx
@@ -1,31 +1,31 @@
 import type { Context as SplitterContext } from '@zag-js/splitter'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, getValidChildren, type ComponentWithProps } from '../utils'
 import { SplitterProvider } from './splitter-context'
 import { useSplitter } from './use-splitter'
 
-export type SplitterProps = Assign<HTMLArkProps<'div'>, SplitterContext>
-const VueProps = createVueProps<SplitterProps>({
+export type UseSplitterProps = Assign<HTMLArkProps<'div'>, SplitterContext>
+const VueProps = createVueProps<UseSplitterProps>({
   dir: {
-    type: String as PropType<SplitterProps['dir']>,
+    type: String as PropType<UseSplitterProps['dir']>,
   },
   getRootNode: {
-    type: Function as PropType<SplitterProps['getRootNode']>,
+    type: Function as PropType<UseSplitterProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<SplitterProps['id']>,
+    type: String as PropType<UseSplitterProps['id']>,
   },
   orientation: {
-    type: String as PropType<SplitterProps['orientation']>,
+    type: String as PropType<UseSplitterProps['orientation']>,
   },
   size: {
-    type: Object as PropType<SplitterProps['size']>,
+    type: Object as PropType<UseSplitterProps['size']>,
   },
 })
 
-export const Splitter: ComponentWithProps<Partial<SplitterProps>> = defineComponent({
+export const Splitter: ComponentWithProps<Partial<UseSplitterProps>> = defineComponent({
   name: 'Splitter',
   props: VueProps,
   emits: ['resize', 'resize-end', 'resize-start'],
@@ -41,3 +41,5 @@ export const Splitter: ComponentWithProps<Partial<SplitterProps>> = defineCompon
     )
   },
 })
+
+export type SplitterProps = Optional<SplitterContext, 'id'>
diff --git a/packages/vue/src/tabs/tabs.tsx b/packages/vue/src/tabs/tabs.tsx
index 777c6b6992..92915ca362 100644
--- a/packages/vue/src/tabs/tabs.tsx
+++ b/packages/vue/src/tabs/tabs.tsx
@@ -1,7 +1,7 @@
 import type { Context } from '@zag-js/tabs'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import { type Assign } from '../types'
+import { type Assign, type Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { TabsProvider } from './tabs-context'
 import { useTabs } from './use-tabs'
@@ -9,39 +9,39 @@ import { useTabs } from './use-tabs'
 export type TabsContext = Context & {
   defaultValue?: Context['value']
 }
-export type TabsProps = Assign<HTMLArkProps<'div'>, TabsContext>
+export type UseTabsProps = Assign<HTMLArkProps<'div'>, TabsContext>
 
-const VueTabsProps = createVueProps<TabsProps>({
+const VueTabsProps = createVueProps<UseTabsProps>({
   id: {
-    type: String as PropType<TabsProps['id']>,
+    type: String as PropType<UseTabsProps['id']>,
   },
   defaultValue: {
-    type: String as PropType<TabsProps['defaultValue']>,
+    type: String as PropType<UseTabsProps['defaultValue']>,
   },
   orientation: {
-    type: String as PropType<TabsProps['orientation']>,
+    type: String as PropType<UseTabsProps['orientation']>,
   },
   activationMode: {
-    type: String as PropType<TabsProps['activationMode']>,
+    type: String as PropType<UseTabsProps['activationMode']>,
   },
   dir: {
-    type: String as PropType<TabsProps['dir']>,
+    type: String as PropType<UseTabsProps['dir']>,
   },
   loop: {
-    type: Boolean as PropType<TabsProps['loop']>,
+    type: Boolean as PropType<UseTabsProps['loop']>,
   },
   translation: {
-    type: Object as PropType<TabsProps['translations']>,
+    type: Object as PropType<UseTabsProps['translations']>,
   },
   ids: {
-    type: Object as PropType<TabsProps['ids']>,
+    type: Object as PropType<UseTabsProps['ids']>,
   },
   getRootNode: {
-    type: Function as PropType<TabsProps['getRootNode']>,
+    type: Function as PropType<UseTabsProps['getRootNode']>,
   },
 })
 
-export const Tabs: ComponentWithProps<Partial<TabsProps>> = defineComponent({
+export const Tabs: ComponentWithProps<Partial<UseTabsProps>> = defineComponent({
   name: 'Tabs',
   emits: ['change', 'focus', 'delete'],
   props: VueTabsProps,
@@ -60,3 +60,5 @@ export const Tabs: ComponentWithProps<Partial<TabsProps>> = defineComponent({
     )
   },
 })
+
+export type TabsProps = Optional<TabsContext, 'id'>
diff --git a/packages/vue/src/tags-input/index.ts b/packages/vue/src/tags-input/index.ts
index d2d5ceeda9..b11da4fc41 100644
--- a/packages/vue/src/tags-input/index.ts
+++ b/packages/vue/src/tags-input/index.ts
@@ -8,4 +8,4 @@ export { TagsInputControl, type TagsInputControlProps } from './tags-input-contr
 export { TagsInputField, type TagsInputFieldProps } from './tags-input-field'
 export { TagsInputLabel, type TagsInputLabelProps } from './tags-input-label'
 export { tagsInputAnatomy } from './tags-input.anatomy'
-export { useTagsInput, type UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input'
+export { useTagsInput, type UseTagsInputReturn } from './use-tags-input'
diff --git a/packages/vue/src/tags-input/tags-input.tsx b/packages/vue/src/tags-input/tags-input.tsx
index ccdfbe5d27..30c25ac159 100644
--- a/packages/vue/src/tags-input/tags-input.tsx
+++ b/packages/vue/src/tags-input/tags-input.tsx
@@ -1,9 +1,8 @@
 import type { Context } from '@zag-js/tags-input'
 import { defineComponent, type PropType } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
-import type { Assign } from '../types'
+import type { Assign, Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
-import type { TagInputProps } from './tag-input'
 import { TagsInputProvider } from './tags-input-context'
 import { useTagsInput } from './use-tags-input'
 
@@ -11,76 +10,76 @@ export type TagsInputContext = Context & {
   modelValue?: Context['value']
 }
 
-export type TagsInputProps = Assign<HTMLArkProps<'div'>, TagsInputContext>
+export type UseTagsInputProps = Assign<HTMLArkProps<'div'>, TagsInputContext>
 
-const VueTagsInputProps = createVueProps<TagsInputProps>({
+const VueTagsInputProps = createVueProps<UseTagsInputProps>({
   addOnPaste: {
-    type: Boolean as PropType<TagsInputProps['addOnPaste']>,
+    type: Boolean as PropType<UseTagsInputProps['addOnPaste']>,
   },
   allowEditTag: {
-    type: Boolean as PropType<TagsInputProps['allowEditTag']>,
+    type: Boolean as PropType<UseTagsInputProps['allowEditTag']>,
     default: true,
   },
   allowOverflow: {
-    type: Boolean as PropType<TagsInputProps['allowOverflow']>,
+    type: Boolean as PropType<UseTagsInputProps['allowOverflow']>,
   },
   autoFocus: {
-    type: Boolean as PropType<TagsInputProps['autoFocus']>,
+    type: Boolean as PropType<UseTagsInputProps['autoFocus']>,
   },
   blurBehavior: {
-    type: String as PropType<TagsInputProps['blurBehavior']>,
+    type: String as PropType<UseTagsInputProps['blurBehavior']>,
   },
   dir: {
-    type: String as PropType<TagsInputProps['dir']>,
+    type: String as PropType<UseTagsInputProps['dir']>,
   },
   disabled: {
-    type: Boolean as PropType<TagsInputProps['disabled']>,
+    type: Boolean as PropType<UseTagsInputProps['disabled']>,
   },
   form: {
-    type: String as PropType<TagsInputProps['form']>,
+    type: String as PropType<UseTagsInputProps['form']>,
   },
   getRootNode: {
-    type: Function as PropType<TagsInputProps['getRootNode']>,
+    type: Function as PropType<UseTagsInputProps['getRootNode']>,
   },
   id: {
-    type: String as PropType<TagsInputProps['id']>,
+    type: String as PropType<UseTagsInputProps['id']>,
   },
   ids: {
-    type: String as PropType<TagsInputProps['ids']>,
+    type: String as PropType<UseTagsInputProps['ids']>,
   },
   inputValue: {
-    type: String as PropType<TagsInputProps['inputValue']>,
+    type: String as PropType<UseTagsInputProps['inputValue']>,
   },
   invalid: {
-    type: Boolean as PropType<TagsInputProps['invalid']>,
+    type: Boolean as PropType<UseTagsInputProps['invalid']>,
   },
   max: {
-    type: Number as PropType<TagsInputProps['max']>,
+    type: Number as PropType<UseTagsInputProps['max']>,
   },
   maxLength: {
-    type: Number as PropType<TagsInputProps['maxLength']>,
+    type: Number as PropType<UseTagsInputProps['maxLength']>,
   },
   modelValue: {
-    type: Object as PropType<TagsInputProps['modelValue']>,
+    type: Object as PropType<UseTagsInputProps['modelValue']>,
   },
   name: {
-    type: String as PropType<TagsInputProps['name']>,
+    type: String as PropType<UseTagsInputProps['name']>,
   },
   readOnly: {
-    type: Boolean as PropType<TagsInputProps['readOnly']>,
+    type: Boolean as PropType<UseTagsInputProps['readOnly']>,
   },
   translations: {
-    type: Object as PropType<TagsInputProps['translations']>,
+    type: Object as PropType<UseTagsInputProps['translations']>,
   },
   validate: {
-    type: Function as PropType<TagsInputProps['validate']>,
+    type: Function as PropType<UseTagsInputProps['validate']>,
   },
   value: {
-    type: Object as PropType<TagsInputProps['value']>,
+    type: Object as PropType<UseTagsInputProps['value']>,
   },
 })
 
-export const TagsInput: ComponentWithProps<Partial<TagInputProps>> = defineComponent({
+export const TagsInput: ComponentWithProps<Partial<UseTagsInputProps>> = defineComponent({
   name: 'TagsInput',
   props: VueTagsInputProps,
   emits: ['change', 'update:modelValue', 'highlight', 'invalid', 'tag-update'],
@@ -100,3 +99,5 @@ export const TagsInput: ComponentWithProps<Partial<TagInputProps>> = defineCompo
     )
   },
 })
+
+export type TagsInputProps = Optional<TagsInputContext, 'id'>
diff --git a/packages/vue/src/tooltip/tooltip.tsx b/packages/vue/src/tooltip/tooltip.tsx
index 03426189ab..739ae1c42e 100644
--- a/packages/vue/src/tooltip/tooltip.tsx
+++ b/packages/vue/src/tooltip/tooltip.tsx
@@ -1,57 +1,60 @@
 import type { Context } from '@zag-js/tooltip'
 import { defineComponent, type PropType } from 'vue'
+import type { Optional } from '../types'
 import { createVueProps, type ComponentWithProps } from '../utils'
 import { TooltipProvider } from './tooltip-context'
 import { useTooltip } from './use-tooltip'
 
-export type TooltipProps = Context
+export type UseTooltipProps = Context
 
-const VueTooltipProps = createVueProps<TooltipProps>({
+const VueTooltipProps = createVueProps<UseTooltipProps>({
   id: {
-    type: String as PropType<TooltipProps['id']>,
+    type: String as PropType<UseTooltipProps['id']>,
   },
   ids: {
-    type: Object as PropType<TooltipProps['ids']>,
+    type: Object as PropType<UseTooltipProps['ids']>,
   },
   openDelay: {
-    type: Number as PropType<TooltipProps['openDelay']>,
+    type: Number as PropType<UseTooltipProps['openDelay']>,
   },
   closeDelay: {
-    type: Number as PropType<TooltipProps['closeDelay']>,
+    type: Number as PropType<UseTooltipProps['closeDelay']>,
   },
   closeOnPointerDown: {
-    type: Boolean as PropType<TooltipProps['closeOnPointerDown']>,
+    type: Boolean as PropType<UseTooltipProps['closeOnPointerDown']>,
   },
   closeOnEsc: {
-    type: Boolean as PropType<TooltipProps['closeOnEsc']>,
+    type: Boolean as PropType<UseTooltipProps['closeOnEsc']>,
     default: true,
   },
   interactive: {
-    type: Boolean as PropType<TooltipProps['interactive']>,
+    type: Boolean as PropType<UseTooltipProps['interactive']>,
   },
   'aria-label': {
-    type: String as PropType<TooltipProps['aria-label']>,
+    type: String as PropType<UseTooltipProps['aria-label']>,
   },
   positioning: {
-    type: Object as PropType<TooltipProps['positioning']>,
+    type: Object as PropType<UseTooltipProps['positioning']>,
   },
   disabled: {
-    type: Boolean as PropType<TooltipProps['disabled']>,
+    type: Boolean as PropType<UseTooltipProps['disabled']>,
   },
   getRootNode: {
-    type: Function as PropType<TooltipProps['getRootNode']>,
+    type: Function as PropType<UseTooltipProps['getRootNode']>,
   },
 })
 
-export const Tooltip: ComponentWithProps<Partial<TooltipProps>> = defineComponent({
+export const Tooltip: ComponentWithProps<Partial<UseTooltipProps>> = defineComponent({
   name: 'Tooltip',
   props: VueTooltipProps,
   emits: ['open', 'close'],
   setup(props, { slots, emit }) {
-    const api = useTooltip(emit, props as TooltipProps)
+    const api = useTooltip(emit, props as UseTooltipProps)
 
     TooltipProvider(api)
 
     return () => slots?.default?.()
   },
 })
+
+export type TooltipProps = Optional<Context, 'id'>