simplify carousel control

packages/react/src/components/carousel/carousel-control.tsx

@@ -1,12 +1,16 @@
+import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
-import { carouselAnatomy } from './carousel.anatomy'
+import { useCarouselContext } from './use-carousel-context'
 
 export interface CarouselControlBaseProps extends PolymorphicProps {}
 export interface CarouselControlProps extends HTMLProps<'div'>, CarouselControlBaseProps {}
 
-export const CarouselControl = forwardRef<HTMLDivElement, CarouselControlProps>((props, ref) => (
-  <ark.div {...carouselAnatomy.build().control.attrs} {...props} ref={ref} />
-))
+export const CarouselControl = forwardRef<HTMLDivElement, CarouselControlProps>((props, ref) => {
+  const carousel = useCarouselContext()
+  const mergedProps = mergeProps(carousel.getControlProps(), props)
+
+  return <ark.div {...mergedProps} {...props} ref={ref} />
+})
 
 CarouselControl.displayName = 'CarouselControl'

packages/react/src/components/carousel/carousel.anatomy.ts

@@ -1,3 +1 @@
-import { anatomy } from '@zag-js/carousel'
-
-export const carouselAnatomy = anatomy.extendWith('control')
+export { anatomy as carouselAnatomy } from '@zag-js/carousel'

packages/solid/src/components/carousel/carousel-control.tsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
-import { carouselAnatomy } from './carousel.anatomy'
+import { useCarouselContext } from './use-carousel-context'
 
 export interface CarouselControlBaseProps extends PolymorphicProps<'div'> {}
 export interface CarouselControlProps extends HTMLProps<'div'>, CarouselControlBaseProps {}
 
 export const CarouselControl = (props: CarouselControlProps) => {
-  const mergedProps = mergeProps(() => carouselAnatomy.build().control.attrs, props)
+  const api = useCarouselContext()
+  const mergedProps = mergeProps(() => api().getControlProps(), props)
 
   return <ark.div {...mergedProps} />
 }

packages/solid/src/components/carousel/carousel.anatomy.ts

@@ -1,3 +1 @@
-import { anatomy } from '@zag-js/carousel'
-
-export const carouselAnatomy = anatomy.extendWith('control')
+export { anatomy as carouselAnatomy } from '@zag-js/carousel'

packages/vue/src/components/carousel/carousel-control.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { PolymorphicProps } from '../factory'
+import { useCarouselContext } from './use-carousel-context'
 
 export interface CarouselControlBaseProps extends PolymorphicProps {}
 export interface CarouselControlProps
@@ -14,15 +15,15 @@ export interface CarouselControlProps
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useForwardExpose } from '../../utils'
-import { carouselAnatomy } from './carousel.anatomy'
 
 defineProps<CarouselControlProps>()
+const carousel = useCarouselContext()
 
 useForwardExpose()
 </script>
 
 <template>
-  <ark.div v-bind="{ ...carouselAnatomy.build().control.attrs }" :as-child="asChild">
+  <ark.div v-bind="carousel.getControlProps()" :as-child="asChild">
     <slot />
   </ark.div>
 </template>

packages/vue/src/components/carousel/carousel.anatomy.ts

@@ -1,3 +1 @@
-import { anatomy } from '@zag-js/carousel'
-
-export const carouselAnatomy = anatomy.extendWith('control')
+export { anatomy as carouselAnatomy } from '@zag-js/carousel'