feat: add grid part

nelsonlaidev · nelsonlaidev · commit cadf27a60c59 · 2025-11-05T21:37:32.000+08:00
diff --git a/packages/react/src/components/image-cropper/examples/basic.tsx b/packages/react/src/components/image-cropper/examples/basic.tsx
@@ -11,6 +11,8 @@ export const Basic = () => {
               <div />
             </ImageCropper.Handle>
           ))}
+          <ImageCropper.Grid axis="horizontal" />
+          <ImageCropper.Grid axis="vertical" />
         </ImageCropper.Selection>
       </ImageCropper.Viewport>
     </ImageCropper.Root>
diff --git a/packages/react/src/components/image-cropper/image-cropper-grid.tsx b/packages/react/src/components/image-cropper/image-cropper-grid.tsx
@@ -0,0 +1,18 @@
+import type { GridProps } from '@zag-js/image-cropper'
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useImageCropperContext } from './use-image-cropper-context'
+
+export interface ImageCropperGridBaseProps extends PolymorphicProps, GridProps {}
+export interface ImageCropperGridProps extends HTMLProps<'div'>, ImageCropperGridBaseProps {}
+
+export const ImageCropperGrid = forwardRef<HTMLDivElement, ImageCropperGridProps>((props, ref) => {
+  const { axis, ...localProps } = props
+  const imageCropper = useImageCropperContext()
+  const mergedProps = mergeProps(imageCropper.getGridProps({ axis }), localProps)
+
+  return <ark.div {...mergedProps} ref={ref} />
+})
+
+ImageCropperGrid.displayName = 'ImageCropperGrid'
diff --git a/packages/react/src/components/image-cropper/image-cropper-handle.tsx b/packages/react/src/components/image-cropper/image-cropper-handle.tsx
@@ -1,15 +1,10 @@
-import type { HandlePosition } from '@zag-js/image-cropper'
+import type { HandleProps } from '@zag-js/image-cropper'
 import { mergeProps } from '@zag-js/react'
 import { forwardRef } from 'react'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useImageCropperContext } from './use-image-cropper-context'
 
-export interface ImageCropperHandleBaseProps extends PolymorphicProps {
-  /**
-   * The position of the handle
-   */
-  position: HandlePosition
-}
+export interface ImageCropperHandleBaseProps extends PolymorphicProps, HandleProps {}
 export interface ImageCropperHandleProps extends HTMLProps<'div'>, ImageCropperHandleBaseProps {}
 
 export const ImageCropperHandle = forwardRef<HTMLDivElement, ImageCropperHandleProps>((props, ref) => {
diff --git a/packages/react/src/components/image-cropper/image-cropper.ts b/packages/react/src/components/image-cropper/image-cropper.ts
@@ -11,6 +11,11 @@ export type {
 } from '@zag-js/image-cropper'
 export { handles } from '@zag-js/image-cropper'
 export { ImageCropperContext as Context, type ImageCropperContextProps as ContextProps } from './image-cropper-context'
+export {
+  ImageCropperGrid as Grid,
+  type ImageCropperGridBaseProps as GridBaseProps,
+  type ImageCropperGridProps as GridProps,
+} from './image-cropper-grid'
 export {
   ImageCropperHandle as Handle,
   type ImageCropperHandleBaseProps as HandleBaseProps,
diff --git a/packages/react/src/components/image-cropper/index.ts b/packages/react/src/components/image-cropper/index.ts
@@ -7,6 +7,7 @@ export type {
   ZoomChangeDetails as ImageCropperZoomChangeDetails,
 } from '@zag-js/image-cropper'
 export { ImageCropperContext, type ImageCropperContextProps } from './image-cropper-context'
+export { ImageCropperGrid, type ImageCropperGridBaseProps, type ImageCropperGridProps } from './image-cropper-grid'
 export {
   ImageCropperHandle,
   type ImageCropperHandleBaseProps,
diff --git a/packages/solid/src/components/image-cropper/examples/basic.tsx b/packages/solid/src/components/image-cropper/examples/basic.tsx
@@ -14,6 +14,8 @@ export const Basic = () => {
               </ImageCropper.Handle>
             )}
           </For>
+          <ImageCropper.Grid axis="horizontal" />
+          <ImageCropper.Grid axis="vertical" />
         </ImageCropper.Selection>
       </ImageCropper.Viewport>
     </ImageCropper.Root>
diff --git a/packages/solid/src/components/image-cropper/image-cropper-grid.tsx b/packages/solid/src/components/image-cropper/image-cropper-grid.tsx
@@ -0,0 +1,14 @@
+import type { GridProps } from '@zag-js/image-cropper'
+import { mergeProps } from '@zag-js/solid'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { useImageCropperContext } from './use-image-cropper-context'
+
+export interface ImageCropperGridBaseProps extends PolymorphicProps<'div'>, GridProps {}
+export interface ImageCropperGridProps extends HTMLProps<'div'>, ImageCropperGridBaseProps {}
+
+export const ImageCropperGrid = (props: ImageCropperGridProps) => {
+  const api = useImageCropperContext()
+  const mergedProps = mergeProps(() => api().getGridProps({ axis: props.axis }), props)
+
+  return <ark.div {...mergedProps} />
+}
diff --git a/packages/solid/src/components/image-cropper/image-cropper-handle.tsx b/packages/solid/src/components/image-cropper/image-cropper-handle.tsx
@@ -1,14 +1,9 @@
-import type { HandlePosition } from '@zag-js/image-cropper'
+import type { HandleProps } from '@zag-js/image-cropper'
 import { mergeProps } from '@zag-js/solid'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useImageCropperContext } from './use-image-cropper-context'
 
-export interface ImageCropperHandleBaseProps extends PolymorphicProps<'div'> {
-  /**
-   * The position of the handle
-   */
-  position: HandlePosition
-}
+export interface ImageCropperHandleBaseProps extends PolymorphicProps<'div'>, HandleProps {}
 export interface ImageCropperHandleProps extends HTMLProps<'div'>, ImageCropperHandleBaseProps {}
 
 export const ImageCropperHandle = (props: ImageCropperHandleProps) => {
diff --git a/packages/solid/src/components/image-cropper/image-cropper.ts b/packages/solid/src/components/image-cropper/image-cropper.ts
@@ -8,6 +8,11 @@ export type {
 } from '@zag-js/image-cropper'
 export { handles } from '@zag-js/image-cropper'
 export { ImageCropperContext as Context, type ImageCropperContextProps as ContextProps } from './image-cropper-context'
+export {
+  ImageCropperGrid as Grid,
+  type ImageCropperGridBaseProps as GridBaseProps,
+  type ImageCropperGridProps as GridProps,
+} from './image-cropper-grid'
 export {
   ImageCropperHandle as Handle,
   type ImageCropperHandleBaseProps as HandleBaseProps,
diff --git a/packages/solid/src/components/image-cropper/index.tsx b/packages/solid/src/components/image-cropper/index.tsx
@@ -7,6 +7,7 @@ export type {
   ZoomChangeDetails as ImageCropperZoomChangeDetails,
 } from '@zag-js/image-cropper'
 export { ImageCropperContext, type ImageCropperContextProps } from './image-cropper-context'
+export { ImageCropperGrid, type ImageCropperGridBaseProps, type ImageCropperGridProps } from './image-cropper-grid'
 export {
   ImageCropperHandle,
   type ImageCropperHandleBaseProps,
diff --git a/packages/svelte/src/lib/components/image-cropper/examples/basic.svelte b/packages/svelte/src/lib/components/image-cropper/examples/basic.svelte
@@ -11,6 +11,8 @@
           <div></div>
         </ImageCropper.Handle>
       {/each}
+      <ImageCropper.Grid axis="horizontal" />
+      <ImageCropper.Grid axis="vertical" />
     </ImageCropper.Selection>
   </ImageCropper.Viewport>
 </ImageCropper.Root>
diff --git a/packages/svelte/src/lib/components/image-cropper/image-cropper-grid.svelte b/packages/svelte/src/lib/components/image-cropper/image-cropper-grid.svelte
@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { GridProps } from '@zag-js/image-cropper'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '$lib/types'
+
+  export interface ImageCropperGridBaseProps extends PolymorphicProps<'div'>, RefAttribute, GridProps {}
+  export interface ImageCropperGridProps extends Assign<HTMLProps<'div'>, ImageCropperGridBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { useImageCropperContext } from './use-image-cropper-context'
+
+  let { ref = $bindable(null), ...props }: ImageCropperGridProps = $props()
+  const imageCropper = useImageCropperContext()
+
+  const [gridProps, localProps] = $derived(createSplitProps<GridProps>()(props, ['axis']))
+
+  const mergedProps = $derived(mergeProps(imageCropper().getGridProps(gridProps), localProps))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />
diff --git a/packages/svelte/src/lib/components/image-cropper/image-cropper-handle.svelte b/packages/svelte/src/lib/components/image-cropper/image-cropper-handle.svelte
@@ -2,7 +2,7 @@
   import type { HandleProps } from '@zag-js/image-cropper'
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '$lib/types'
 
-  export interface ImageCropperHandleBaseProps extends HandleProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface ImageCropperHandleBaseProps extends PolymorphicProps<'div'>, RefAttribute, HandleProps {}
   export interface ImageCropperHandleProps extends Assign<HTMLProps<'div'>, ImageCropperHandleBaseProps> {}
 </script>
 
diff --git a/packages/svelte/src/lib/components/image-cropper/image-cropper.ts b/packages/svelte/src/lib/components/image-cropper/image-cropper.ts
@@ -9,6 +9,11 @@ export type {
 } from '@zag-js/image-cropper'
 export { handles } from '@zag-js/image-cropper'
 export { default as Context, type ImageCropperContextProps as ContextProps } from './image-cropper-context.svelte'
+export {
+  default as Grid,
+  type ImageCropperGridBaseProps as GridBaseProps,
+  type ImageCropperGridProps as GridProps,
+} from './image-cropper-grid.svelte'
 export {
   default as Handle,
   type ImageCropperHandleBaseProps as HandleBaseProps,
diff --git a/packages/svelte/src/lib/components/image-cropper/index.ts b/packages/svelte/src/lib/components/image-cropper/index.ts
@@ -8,6 +8,11 @@ export type {
   ZoomChangeDetails as ImageCropperZoomChangeDetails,
 } from '@zag-js/image-cropper'
 export { default as ImageCropperContext, type ImageCropperContextProps } from './image-cropper-context.svelte'
+export {
+  default as ImageCropperGrid,
+  type ImageCropperGridBaseProps,
+  type ImageCropperGridProps,
+} from './image-cropper-grid.svelte'
 export {
   default as ImageCropperHandle,
   type ImageCropperHandleBaseProps,
diff --git a/packages/vue/src/components/image-cropper/examples/basic.vue b/packages/vue/src/components/image-cropper/examples/basic.vue
@@ -13,6 +13,8 @@ const imageSrc = ref('https://images.unsplash.com/photo-1506905925346-21bda4d32d
         <ImageCropper.Handle v-for="position in ImageCropper.handles" :key="position" :position="position">
           <div />
         </ImageCropper.Handle>
+        <ImageCropper.Grid axis="horizontal" />
+        <ImageCropper.Grid axis="vertical" />
       </ImageCropper.Selection>
     </ImageCropper.Viewport>
   </ImageCropper.Root>
diff --git a/packages/vue/src/components/image-cropper/image-cropper-grid.vue b/packages/vue/src/components/image-cropper/image-cropper-grid.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { PolymorphicProps } from '../factory'
+import type { GridProps } from '@zag-js/image-cropper'
+
+export interface ImageCropperGridBaseProps extends PolymorphicProps, GridProps {}
+export interface ImageCropperGridProps
+  extends ImageCropperGridBaseProps,
+    /**
+     * @vue-ignore
+     */
+    HTMLAttributes {}
+</script>
+
+<script setup lang="ts">
+import { ark } from '../factory'
+import { useImageCropperContext } from './use-image-cropper-context'
+import { useForwardExpose } from '../../utils/use-forward-expose'
+
+const props = defineProps<ImageCropperGridProps>()
+const imageCropper = useImageCropperContext()
+
+useForwardExpose()
+</script>
+
+<template>
+  <ark.div v-bind="imageCropper.getGridProps({ axis: props.axis })" :as-child="asChild">
+    <slot />
+  </ark.div>
+</template>
diff --git a/packages/vue/src/components/image-cropper/image-cropper-handle.vue b/packages/vue/src/components/image-cropper/image-cropper-handle.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { PolymorphicProps } from '../factory'
-import type { HandleProps } from './image-cropper.types'
+import type { HandleProps } from '@zag-js/image-cropper'
 
-export interface ImageCropperHandleBaseProps extends HandleProps, PolymorphicProps {}
+export interface ImageCropperHandleBaseProps extends PolymorphicProps, HandleProps {}
 export interface ImageCropperHandleProps
   extends ImageCropperHandleBaseProps,
     /**
diff --git a/packages/vue/src/components/image-cropper/image-cropper.ts b/packages/vue/src/components/image-cropper/image-cropper.ts
@@ -8,6 +8,11 @@ export type {
 } from '@zag-js/image-cropper'
 export { handles } from '@zag-js/image-cropper'
 export { default as Context, type ImageCropperContextProps as ContextProps } from './image-cropper-context.vue'
+export {
+  default as Grid,
+  type ImageCropperGridBaseProps as GridBaseProps,
+  type ImageCropperGridProps as GridProps,
+} from './image-cropper-grid.vue'
 export {
   default as Handle,
   type ImageCropperHandleBaseProps as HandleBaseProps,
diff --git a/packages/vue/src/components/image-cropper/image-cropper.types.ts b/packages/vue/src/components/image-cropper/image-cropper.types.ts
@@ -149,10 +149,3 @@ export type RootEmits = {
    */
   'update:crop': [crop: Rect]
 }
-
-export interface HandleProps {
-  /**
-   * The position of the handle
-   */
-  position: imageCropper.HandlePosition
-}
diff --git a/packages/vue/src/components/image-cropper/index.ts b/packages/vue/src/components/image-cropper/index.ts
@@ -7,6 +7,11 @@ export type {
   ZoomChangeDetails as ImageCropperZoomChangeDetails,
 } from '@zag-js/image-cropper'
 export { default as ImageCropperContext, type ImageCropperContextProps } from './image-cropper-context.vue'
+export {
+  default as ImageCropperGrid,
+  type ImageCropperGridProps,
+  type ImageCropperGridBaseProps,
+} from './image-cropper-grid.vue'
 export {
   default as ImageCropperHandle,
   type ImageCropperHandleProps,
