chore: export right types

Signed-off-by: Shyrro <zsahmane@gmail.com>

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'>

packages/vue/src/checkbox/checkbox.tsx

@@ -1,67 +1,76 @@
 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'
 
 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'>

packages/vue/src/color-picker/color-picker.tsx

@@ -1,37 +1,37 @@
 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'
 
 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'>

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>

packages/vue/src/combobox/combobox.tsx

@@ -1,106 +1,106 @@
 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'
 
 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'>