feat: image cropper

.storybook/styles.css

@@ -14,6 +14,7 @@
 @import url('./styles/file-upload.css');
 @import url('./styles/floating-panel.css');
 @import url('./styles/hover-card.css');
+@import url('./styles/image-cropper.css');
 @import url('./styles/json-tree-view.css');
 @import url('./styles/listbox.css');
 @import url('./styles/menu.css');

.storybook/styles/image-cropper.css

@@ -0,0 +1,56 @@
+[data-scope='image-cropper'][data-part='root'] {
+  max-width: fit-content;
+}
+
+[data-scope='image-cropper'][data-part='selection'] {
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  cursor: move;
+  &[data-shape='circle'] {
+    border-radius: 50%;
+  }
+}
+
+[data-scope='image-cropper'][data-part='image'] {
+  display: block;
+  max-width: 100%;
+}
+
+[data-scope='image-cropper'][data-part='handle'] {
+  --handle-size: 12px;
+  width: var(--handle-size);
+  height: var(--handle-size);
+
+  &[data-position='n'],
+  &[data-position='s'] {
+    height: 6px;
+  }
+
+  &[data-position='e'],
+  &[data-position='w'] {
+    width: 6px;
+  }
+
+  & > div {
+    width: calc(var(--handle-size) / 2);
+    height: calc(var(--handle-size) / 2);
+    background: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+[data-scope='image-cropper'][data-part='grid'] {
+  --grid-color: rgba(255, 255, 255, 0.7);
+  --grid-line-width: 1px;
+
+  &[data-axis='vertical'] {
+    border-inline: var(--grid-line-width) solid var(--grid-color);
+  }
+
+  &[data-axis='horizontal'] {
+    border-block: var(--grid-line-width) solid var(--grid-color);
+  }
+}

packages/react/package.json

@@ -112,6 +112,7 @@
     "@zag-js/focus-trap": "1.27.1",
     "@zag-js/highlight-word": "1.27.1",
     "@zag-js/hover-card": "1.27.1",
+    "@zag-js/image-cropper": "1.27.1",
     "@zag-js/i18n-utils": "1.27.1",
     "@zag-js/json-tree-utils": "1.27.1",
     "@zag-js/listbox": "1.27.1",

packages/react/src/components/anatomy.ts

@@ -17,6 +17,7 @@ export { fieldsetAnatomy } from './fieldset/fieldset.anatomy'
 export { fileUploadAnatomy } from './file-upload/file-upload.anatomy'
 export { floatingPanelAnatomy } from './floating-panel/floating-panel.anatomy'
 export { hoverCardAnatomy } from './hover-card/hover-card.anatomy'
+export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy'
 export { listboxAnatomy } from './listbox/listbox.anatomy'
 export { marqueeAnatomy } from './marquee/marquee.anatomy'
 export { menuAnatomy } from './menu/menu.anatomy'

packages/react/src/components/image-cropper/examples/basic.tsx

@@ -0,0 +1,20 @@
+import { ImageCropper } from '@ark-ui/react/image-cropper'
+
+export const Basic = () => {
+  return (
+    <ImageCropper.Root>
+      <ImageCropper.Viewport>
+        <ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
+        <ImageCropper.Selection>
+          {ImageCropper.handles.map((position) => (
+            <ImageCropper.Handle key={position} position={position}>
+              <div />
+            </ImageCropper.Handle>
+          ))}
+          <ImageCropper.Grid axis="horizontal" />
+          <ImageCropper.Grid axis="vertical" />
+        </ImageCropper.Selection>
+      </ImageCropper.Viewport>
+    </ImageCropper.Root>
+  )
+}

packages/react/src/components/image-cropper/examples/circle.tsx

@@ -0,0 +1,18 @@
+import { ImageCropper } from '@ark-ui/react/image-cropper'
+
+export const Circle = () => {
+  return (
+    <ImageCropper.Root cropShape="circle">
+      <ImageCropper.Viewport>
+        <ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
+        <ImageCropper.Selection>
+          {ImageCropper.handles.map((position) => (
+            <ImageCropper.Handle key={position} position={position}>
+              <div />
+            </ImageCropper.Handle>
+          ))}
+        </ImageCropper.Selection>
+      </ImageCropper.Viewport>
+    </ImageCropper.Root>
+  )
+}

packages/react/src/components/image-cropper/examples/controlled.tsx

@@ -0,0 +1,28 @@
+import { ImageCropper } from '@ark-ui/react/image-cropper'
+import { useState } from 'react'
+
+export const Controlled = () => {
+  const [zoom, setZoom] = useState(1)
+
+  return (
+    <>
+      <button onClick={() => setZoom(zoom + 0.1)}>Zoom In</button>
+      <button onClick={() => setZoom(zoom - 0.1)}>Zoom Out</button>
+
+      <ImageCropper.Root zoom={zoom} onZoomChange={(e) => setZoom(e.zoom)}>
+        <ImageCropper.Viewport>
+          <ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
+          <ImageCropper.Selection>
+            {ImageCropper.handles.map((position) => (
+              <ImageCropper.Handle key={position} position={position}>
+                <div />
+              </ImageCropper.Handle>
+            ))}
+            <ImageCropper.Grid axis="horizontal" />
+            <ImageCropper.Grid axis="vertical" />
+          </ImageCropper.Selection>
+        </ImageCropper.Viewport>
+      </ImageCropper.Root>
+    </>
+  )
+}

packages/react/src/components/image-cropper/examples/fixed.tsx

@@ -0,0 +1,15 @@
+import { ImageCropper } from '@ark-ui/react/image-cropper'
+
+export const Fixed = () => {
+  return (
+    <ImageCropper.Root fixedCropArea>
+      <ImageCropper.Viewport>
+        <ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
+        <ImageCropper.Selection>
+          <ImageCropper.Grid axis="horizontal" />
+          <ImageCropper.Grid axis="vertical" />
+        </ImageCropper.Selection>
+      </ImageCropper.Viewport>
+    </ImageCropper.Root>
+  )
+}

packages/react/src/components/image-cropper/examples/root-provider.tsx

@@ -0,0 +1,27 @@
+import { ImageCropper, useImageCropper } from '@ark-ui/react/image-cropper'
+
+export const RootProvider = () => {
+  const imageCropper = useImageCropper()
+
+  return (
+    <>
+      <button onClick={() => imageCropper.setZoom(imageCropper.zoom + 0.1)}>Zoom In</button>
+      <button onClick={() => imageCropper.setZoom(imageCropper.zoom - 0.1)}>Zoom Out</button>
+
+      <ImageCropper.RootProvider value={imageCropper}>
+        <ImageCropper.Viewport>
+          <ImageCropper.Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800" alt="Sample" />
+          <ImageCropper.Selection>
+            {ImageCropper.handles.map((position) => (
+              <ImageCropper.Handle key={position} position={position}>
+                <div />
+              </ImageCropper.Handle>
+            ))}
+            <ImageCropper.Grid axis="horizontal" />
+            <ImageCropper.Grid axis="vertical" />
+          </ImageCropper.Selection>
+        </ImageCropper.Viewport>
+      </ImageCropper.RootProvider>
+    </>
+  )
+}

packages/react/src/components/image-cropper/image-cropper-context.tsx

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react'
+import { type UseImageCropperContext, useImageCropperContext } from './use-image-cropper-context'
+
+export interface ImageCropperContextProps {
+  children: (context: UseImageCropperContext) => ReactNode
+}
+
+export const ImageCropperContext = (props: ImageCropperContextProps) => props.children(useImageCropperContext())

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'

packages/react/src/components/image-cropper/image-cropper-handle.tsx

@@ -0,0 +1,18 @@
+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, HandleProps {}
+export interface ImageCropperHandleProps extends HTMLProps<'div'>, ImageCropperHandleBaseProps {}
+
+export const ImageCropperHandle = forwardRef<HTMLDivElement, ImageCropperHandleProps>((props, ref) => {
+  const { position, ...localProps } = props
+  const imageCropper = useImageCropperContext()
+  const mergedProps = mergeProps(imageCropper.getHandleProps({ position }), localProps)
+
+  return <ark.div {...mergedProps} ref={ref} />
+})
+
+ImageCropperHandle.displayName = 'ImageCropperHandle'

packages/react/src/components/image-cropper/image-cropper-image.tsx

@@ -0,0 +1,16 @@
+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 ImageCropperImageBaseProps extends PolymorphicProps {}
+export interface ImageCropperImageProps extends HTMLProps<'img'>, ImageCropperImageBaseProps {}
+
+export const ImageCropperImage = forwardRef<HTMLImageElement, ImageCropperImageProps>((props, ref) => {
+  const imageCropper = useImageCropperContext()
+  const mergedProps = mergeProps(imageCropper.getImageProps(), props)
+
+  return <ark.img {...mergedProps} ref={ref} />
+})
+
+ImageCropperImage.displayName = 'ImageCropperImage'

packages/react/src/components/image-cropper/image-cropper-root-provider.tsx

@@ -0,0 +1,26 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { createSplitProps } from '../../utils/create-split-props'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import type { UseImageCropperReturn } from './use-image-cropper'
+import { ImageCropperProvider } from './use-image-cropper-context'
+
+interface RootProviderProps {
+  value: UseImageCropperReturn
+}
+
+export interface ImageCropperRootProviderBaseProps extends RootProviderProps, PolymorphicProps {}
+export interface ImageCropperRootProviderProps extends HTMLProps<'div'>, ImageCropperRootProviderBaseProps {}
+
+export const ImageCropperRootProvider = forwardRef<HTMLDivElement, ImageCropperRootProviderProps>((props, ref) => {
+  const [{ value: imageCropper }, localProps] = createSplitProps<RootProviderProps>()(props, ['value'])
+  const mergedProps = mergeProps(imageCropper.getRootProps(), localProps)
+
+  return (
+    <ImageCropperProvider value={imageCropper}>
+      <ark.div {...mergedProps} ref={ref} />
+    </ImageCropperProvider>
+  )
+})
+
+ImageCropperRootProvider.displayName = 'ImageCropperRootProvider'

packages/react/src/components/image-cropper/image-cropper-root.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from '@zag-js/react'
+import { forwardRef } from 'react'
+import { createSplitProps } from '../../utils/create-split-props'
+import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
+import { type UseImageCropperProps, useImageCropper } from './use-image-cropper'
+import { ImageCropperProvider } from './use-image-cropper-context'
+
+export interface ImageCropperRootBaseProps extends UseImageCropperProps, PolymorphicProps {}
+export interface ImageCropperRootProps extends HTMLProps<'div'>, ImageCropperRootBaseProps {}
+
+export const ImageCropperRoot = forwardRef<HTMLDivElement, ImageCropperRootProps>((props, ref) => {
+  const [useImageCropperProps, localProps] = createSplitProps<UseImageCropperProps>()(props, [
+    'aspectRatio',
+    'cropShape',
+    'defaultFlip',
+    'defaultRotation',
+    'defaultZoom',
+    'fixedCropArea',
+    'flip',
+    'id',
+    'ids',
+    'initialCrop',
+    'maxHeight',
+    'maxWidth',
+    'maxZoom',
+    'minHeight',
+    'minWidth',
+    'minZoom',
+    'nudgeStep',
+    'nudgeStepCtrl',
+    'nudgeStepShift',
+    'onCropChange',
+    'onFlipChange',
+    'onRotationChange',
+    'onZoomChange',
+    'rotation',
+    'translations',
+    'zoom',
+    'zoomSensitivity',
+    'zoomStep',
+  ])
+  const imageCropper = useImageCropper(useImageCropperProps)
+  const mergedProps = mergeProps(imageCropper.getRootProps(), localProps)
+
+  return (
+    <ImageCropperProvider value={imageCropper}>
+      <ark.div {...mergedProps} ref={ref} />
+    </ImageCropperProvider>
+  )
+})
+
+ImageCropperRoot.displayName = 'ImageCropperRoot'

packages/react/src/components/image-cropper/image-cropper-selection.tsx

@@ -0,0 +1,16 @@
+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 ImageCropperSelectionBaseProps extends PolymorphicProps {}
+export interface ImageCropperSelectionProps extends HTMLProps<'div'>, ImageCropperSelectionBaseProps {}
+
+export const ImageCropperSelection = forwardRef<HTMLDivElement, ImageCropperSelectionProps>((props, ref) => {
+  const imageCropper = useImageCropperContext()
+  const mergedProps = mergeProps(imageCropper.getSelectionProps(), props)
+
+  return <ark.div {...mergedProps} ref={ref} />
+})
+
+ImageCropperSelection.displayName = 'ImageCropperSelection'

packages/react/src/components/image-cropper/image-cropper-viewport.tsx

@@ -0,0 +1,16 @@
+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 ImageCropperViewportBaseProps extends PolymorphicProps {}
+export interface ImageCropperViewportProps extends HTMLProps<'div'>, ImageCropperViewportBaseProps {}
+
+export const ImageCropperViewport = forwardRef<HTMLDivElement, ImageCropperViewportProps>((props, ref) => {
+  const imageCropper = useImageCropperContext()
+  const mergedProps = mergeProps(imageCropper.getViewportProps(), props)
+
+  return <ark.div {...mergedProps} ref={ref} />
+})
+
+ImageCropperViewport.displayName = 'ImageCropperViewport'

packages/react/src/components/image-cropper/image-cropper.anatomy.ts

@@ -0,0 +1 @@
+export { anatomy as imageCropperAnatomy } from '@zag-js/image-cropper'

packages/react/src/components/image-cropper/image-cropper.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react-vite'
+
+const meta: Meta = {
+  title: 'Components / Image Cropper',
+}
+
+export default meta
+
+export { Basic } from './examples/basic'
+export { Circle } from './examples/circle'
+export { Controlled } from './examples/controlled'
+export { Fixed } from './examples/fixed'
+export { RootProvider } from './examples/root-provider'