fix: vue types

Author: segunadebayo

packages/vue/src/components/marquee/marquee-root.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { HTMLAttributes } from 'vue'
+import type { BooleanDefaults } from '../../types'
 import type { PolymorphicProps } from '../factory'
 import type { RootEmits, RootProps } from './marquee.types'
 
@@ -14,12 +15,19 @@ export interface MarqueeRootEmits extends RootEmits {}
 </script>
 
 <script setup lang="ts">
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { ark } from '../factory'
 import { useMarquee } from './use-marquee'
 import { MarqueeProvider } from './use-marquee-context'
-import { useForwardExpose } from '../../utils/use-forward-expose'
 
-const props = defineProps<MarqueeRootProps>()
+const props = withDefaults(defineProps<MarqueeRootProps>(), {
+  autoFill: undefined,
+  defaultPaused: undefined,
+  pauseOnInteraction: undefined,
+  paused: undefined,
+  reverse: undefined,
+} satisfies BooleanDefaults<RootProps>)
+
 const emits = defineEmits<MarqueeRootEmits>()
 
 const marquee = useMarquee(props, emits)

packages/vue/src/components/marquee/marquee.types.ts

@@ -1,10 +1,81 @@
 import type * as marquee from '@zag-js/marquee'
-import type { Optional } from '../../types'
 
-export interface RootProps extends Optional<Omit<marquee.Props, 'dir' | 'getRootNode'>, 'id'> {}
+export interface RootProps {
+  /**
+   * Whether to automatically duplicate content to fill the container.
+   * @default false
+   */
+  autoFill?: boolean
+  /**
+   * Whether the marquee is paused by default.
+   * @default false
+   */
+  defaultPaused?: boolean
+  /**
+   * The delay before the animation starts (in seconds).
+   * @default 0
+   */
+  delay?: number
+  /**
+   * The unique identifier of the machine.
+   */
+  id?: string
+  /**
+   * The ids of the elements in the marquee. Useful for composition.
+   */
+  ids?: Partial<{ root: string; viewport: string; content: (index: number) => string }>
+  /**
+   * The number of times to loop the animation (0 = infinite).
+   * @default 0
+   */
+  loopCount?: number
+  /**
+   * Whether to pause the marquee on user interaction (hover, focus).
+   * @default false
+   */
+  pauseOnInteraction?: boolean
+  /**
+   * Whether the marquee is paused.
+   */
+  paused?: boolean
+  /**
+   * Whether to reverse the animation direction.
+   * @default false
+   */
+  reverse?: boolean
+  /**
+   * The side/direction the marquee scrolls towards.
+   * @default "start"
+   */
+  side?: marquee.Side
+  /**
+   * The spacing between marquee items.
+   * @default "1rem"
+   */
+  spacing?: string
+  /**
+   * The speed of the marquee animation in pixels per second.
+   * @default 50
+   */
+  speed?: number
+  /**
+   * The localized messages to use.
+   */
+  translations?: marquee.IntlTranslations
+}
 
-export interface RootEmits {
-  pauseChange: [details: marquee.PauseStatusDetails]
-  loopComplete: []
+export type RootEmits = {
+  /**
+   * Function called when the marquee completes all loops and stops.
+   * Only fires for finite loops (loopCount > 0).
+   */
   complete: []
+  /**
+   * Function called when the marquee completes one loop iteration.
+   */
+  loopComplete: []
+  /**
+   * Function called when the pause status changes.
+   */
+  pauseChange: [details: marquee.PauseStatusDetails]
 }