fix(vue): add id props and improve state exposition

packages/vue/src/accordion/accordion.tsx

@@ -1,40 +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 ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { AccordionProvider } from './accordion-context'
-import { useAccordion, type UseAccordionContext } from './use-accordion'
+import { useAccordion } from './use-accordion'
 
-export type AccordionProps = Assign<HTMLArkProps<'div'>, UseAccordionContext>
+export type AccordionContext = Context & { modelValue?: AccordionContext['value'] }
 
-const VueAccordionProps = {
+export type UseAccordionProps = Assign<HTMLArkProps<'div'>, AccordionContext>
+
+const VueAccordionProps = createVueProps<UseAccordionProps>({
+  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<AccordionProps> = defineComponent({
+export const Accordion: ComponentWithProps<Partial<UseAccordionProps>> = defineComponent({
   name: 'Accordion',
   emits: ['change', 'update:modelValue'],
   props: VueAccordionProps,
@@ -45,8 +51,10 @@ export const Accordion: ComponentWithProps<AccordionProps> = defineComponent({
 
     return () => (
       <ark.div {...api.value.rootProps} {...attrs}>
-        {slots?.default?.()}
+        {slots?.default?.(api.value)}
       </ark.div>
     )
   },
 })
+
+export type AccordionProps = Optional<AccordionContext, 'id'>

packages/vue/src/accordion/docs/accordion.types.json

@@ -16,10 +16,15 @@
       "description": "Whether the accordion items are disabled"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  item(value: string): string\n  content(value: string): string\n  trigger(value: string): string\n}>",
       "isRequired": false,

packages/vue/src/accordion/use-accordion.ts

@@ -1,20 +1,20 @@
-import { connect, machine, type Context as AccordionContext } from '@zag-js/accordion'
+import { connect, machine } from '@zag-js/accordion'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, watch, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { AccordionContext } from './accordion'
 
-export interface UseAccordionContext extends Omit<AccordionContext, 'id'> {
-  modelValue?: AccordionContext['value']
-}
-
-export const useAccordion = (emit: CallableFunction, context: UseAccordionContext) => {
+export const useAccordion = <T extends ExtractPropTypes<AccordionContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
       value: reactiveContext.modelValue ?? reactiveContext.value,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       onChange: (details) => {
         emit('change', details.value)
         emit(
@@ -37,5 +37,3 @@ export const useAccordion = (emit: CallableFunction, context: UseAccordionContex
 
   return { api }
 }
-
-export type UseAccordionReturn = ReturnType<typeof useAccordion>

packages/vue/src/checkbox/checkbox.tsx

@@ -1,51 +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 ComponentWithProps } from '../utils'
+import { type Assign, type Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { CheckboxProvider } from './checkbox-context'
-import { useCheckbox, type UseCheckboxContext } from './use-checkbox'
+import { useCheckbox } from './use-checkbox'
 
-export type CheckboxProps = Assign<HTMLArkProps<'label'>, UseCheckboxContext>
+export type CheckboxContext = Context & {
+  modelValue?: Context['checked']
+}
+export type UseCheckboxProps = Assign<HTMLArkProps<'label'>, CheckboxContext>
 
-const VueCheckboxProps = {
+export const VueCheckboxProps = createVueProps<UseCheckboxProps>({
+  id: {
+    type: String as PropType<UseCheckboxProps['id']>,
+  },
+  'aria-describedby': {
+    type: String as PropType<UseCheckboxProps['aria-describedby']>,
+  },
+  'aria-label': {
+    type: String as PropType<UseCheckboxProps['aria-label']>,
+  },
+  '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 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<CheckboxProps> = defineComponent({
+export const Checkbox: ComponentWithProps<Partial<UseCheckboxProps>> = defineComponent({
   name: 'Checkbox',
   emits: ['change', 'update:modelValue'],
   props: VueCheckboxProps,
@@ -61,3 +86,5 @@ export const Checkbox: ComponentWithProps<CheckboxProps> = defineComponent({
     )
   },
 })
+
+export type CheckboxProps = Optional<CheckboxContext, 'id'>

packages/vue/src/checkbox/docs/checkbox.types.json

@@ -21,10 +21,15 @@
       "description": "The id of the form that the checkbox belongs to."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{ root: string; input: string; control: string; label: string }>",
       "isRequired": false,

packages/vue/src/checkbox/stories/basic.stories.vue

@@ -3,7 +3,9 @@ import { ref } from 'vue'
 import { Checkbox, CheckboxControl, CheckboxInput, CheckboxLabel } from '..'
 import '../checkbox.css'
 
-const checkboxRef = ref(true)
+const props = defineProps(['modelValue'])
+
+const checkboxRef = ref(props.modelValue || true)
 </script>
 <template>
   <Checkbox v-model="checkboxRef">

packages/vue/src/checkbox/use-checkbox.ts

@@ -1,19 +1,19 @@
-import { connect, machine, type Context as CheckboxContext } from '@zag-js/checkbox'
+import { connect, machine } from '@zag-js/checkbox'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, reactive, watch } from 'vue'
+import { computed, reactive, watch, type ExtractPropTypes } from 'vue'
 import { useId } from '../utils'
+import type { CheckboxContext } from './checkbox'
 
-export interface UseCheckboxContext extends Omit<CheckboxContext, 'id'> {
-  modelValue?: CheckboxContext['checked']
-}
-
-export const useCheckbox = (emit: CallableFunction, context: UseCheckboxContext) => {
+export const useCheckbox = <T extends ExtractPropTypes<CheckboxContext>>(
+  emit: CallableFunction,
+  context: T,
+) => {
   const reactiveContext = reactive(context)
 
   const [state, send] = useMachine(
     machine({
       ...reactiveContext,
-      id: useId().value,
+      id: reactiveContext.id || useId().value,
       checked: reactiveContext.modelValue ?? reactiveContext.checked,
       onChange(details) {
         emit('change', details.checked)
@@ -30,12 +30,10 @@ export const useCheckbox = (emit: CallableFunction, context: UseCheckboxContext)
       if (value == undefined) return
 
       if (value !== api.value.isChecked) {
-        api.value.setChecked(value)
+        api.value.setChecked(value as boolean)
       }
     },
   )
 
   return api
 }
-
-export type UseCheckboxReturn = ReturnType<typeof useCheckbox>

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

@@ -51,7 +51,7 @@ const colorPickerValue = ref('hsl(10, 81%, 59%)')
       <ColorPickerChannelInput :channel="lightness" />
 
       <ColorPickerChannelInput channel="alpha" />
-      <ColorPickerChannelInput channel="hex" />
+      <ColorPickerChannelInput channel="hue" />
 
       <ColorPickerSwatchGroup>
         <ColorPickerSwatch value="#123123">

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

@@ -1,41 +1,51 @@
+import { type Context } from '@zag-js/color-picker'
 import { defineComponent, type PropType } from 'vue'
-import type { ComponentWithProps } from '../utils'
+import type { HTMLArkProps } from '../factory'
+import type { Assign, Optional } from '../types'
+import { createVueProps, type ComponentWithProps } from '../utils'
 import { ColorPickerProvider } from './color-picker-context'
-import { useColorPicker, type UseColorPickerContext } from './use-color-picker'
+import { useColorPicker } from './use-color-picker'
 
-export type ColorPickerProps = UseColorPickerContext
+export type ColorPickerContext = Context & {
+  modelValue?: Context['value']
+}
+export type UseColorPickerProps = Assign<HTMLArkProps<'div'>, ColorPickerContext>
 
-export const ColorPicker: ComponentWithProps<ColorPickerProps> = defineComponent({
-  name: 'ColorPicker',
-  props: {
-    dir: {
-      type: String as PropType<ColorPickerProps['dir']>,
-    },
-    id: {
-      type: String as PropType<ColorPickerProps['id']>,
-    },
-    getRootNode: {
-      type: Function as PropType<ColorPickerProps['getRootNode']>,
-    },
-    modelValue: {
-      type: String as PropType<ColorPickerProps['modelValue']>,
-    },
-    value: {
-      type: String as PropType<ColorPickerProps['value']>,
-    },
-    disabled: {
-      type: Boolean as PropType<ColorPickerProps['disabled']>,
-    },
-    readOnly: {
-      type: Boolean as PropType<ColorPickerProps['readOnly']>,
-    },
+const VueColorPickerProps = createVueProps<UseColorPickerProps>({
+  dir: {
+    type: String as PropType<UseColorPickerProps['dir']>,
+  },
+  id: {
+    type: String as PropType<UseColorPickerProps['id']>,
+  },
+  getRootNode: {
+    type: Function as PropType<UseColorPickerProps['getRootNode']>,
+  },
+  modelValue: {
+    type: String as PropType<UseColorPickerProps['modelValue']>,
+  },
+  value: {
+    type: String as PropType<UseColorPickerProps['value']>,
+  },
+  disabled: {
+    type: Boolean as PropType<UseColorPickerProps['disabled']>,
   },
+  readOnly: {
+    type: Boolean as PropType<UseColorPickerProps['readOnly']>,
+  },
+})
+
+export const ColorPicker: ComponentWithProps<Partial<ColorPickerContext>> = defineComponent({
+  name: 'ColorPicker',
+  props: VueColorPickerProps,
   emits: ['change', 'change-end', 'update:modelValue'],
   setup(props, { slots, emit }) {
     const api = useColorPicker(emit, props)
 
     ColorPickerProvider(api)
 
-    return () => slots.default?.({ ...api.value })
+    return () => slots.default?.(api.value)
   },
 })
+
+export type ColorPickerProps = Optional<ColorPickerContext, 'id'>