@ark-ui/svelte 5.12.1 → 5.13.0

package/dist/components/anatomy.d.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';

package/dist/components/anatomy.js

@@ -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';

package/dist/components/carousel/carousel-autoplay-indicator.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { Snippet } from 'svelte'
+
+  export interface CarouselAutoplayIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+    /**
+     * The fallback snippet to render when autoplay is paused.
+     */
+    fallback?: Snippet
+  }
+  export interface CarouselAutoplayIndicatorProps extends Assign<HTMLProps<'span'>, CarouselAutoplayIndicatorBaseProps> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { Ark } from '../factory'
+  import { carouselAnatomy } from './carousel.anatomy'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const parts = carouselAnatomy.build()
+
+  let { ref = $bindable(null), children, fallback, ...props }: CarouselAutoplayIndicatorProps = $props()
+
+  const carousel = useCarouselContext()
+</script>
+
+<Ark as="span" bind:ref {...parts.autoplayIndicator.attrs} {...props}>
+  {#if carousel().isPlaying}
+    {@render children?.()}
+  {:else}
+    {@render fallback?.()}
+  {/if}
+</Ark>

package/dist/components/carousel/carousel-autoplay-indicator.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { Snippet } from 'svelte';
+export interface CarouselAutoplayIndicatorBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+    /**
+     * The fallback snippet to render when autoplay is paused.
+     */
+    fallback?: Snippet;
+}
+export interface CarouselAutoplayIndicatorProps extends Assign<HTMLProps<'span'>, CarouselAutoplayIndicatorBaseProps> {
+    children?: Snippet;
+}
+declare const CarouselAutoplayIndicator: import("svelte").Component<CarouselAutoplayIndicatorProps, {}, "ref">;
+type CarouselAutoplayIndicator = ReturnType<typeof CarouselAutoplayIndicator>;
+export default CarouselAutoplayIndicator;

package/dist/components/carousel/carousel-progress-text.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface CarouselProgressTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
+  export interface CarouselProgressTextProps extends Assign<HTMLProps<'span'>, CarouselProgressTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from '../factory'
+  import { carouselAnatomy } from './carousel.anatomy'
+  import { useCarouselContext } from './use-carousel-context'
+
+  const parts = carouselAnatomy.build()
+
+  let { ref = $bindable(null), children, ...props }: CarouselProgressTextProps = $props()
+
+  const carousel = useCarouselContext()
+
+  const progressText = $derived(() => {
+    const currentPage = carousel().page + 1
+    const totalPages = carousel().pageSnapPoints.length
+    return `${currentPage} / ${totalPages}`
+  })
+</script>
+
+<Ark as="span" bind:ref {...parts.progressText.attrs} {...props}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {progressText()}
+  {/if}
+</Ark>

package/dist/components/carousel/carousel-progress-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface CarouselProgressTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {
+}
+export interface CarouselProgressTextProps extends Assign<HTMLProps<'span'>, CarouselProgressTextBaseProps> {
+}
+declare const CarouselProgressText: import("svelte").Component<CarouselProgressTextProps, {}, "ref">;
+type CarouselProgressText = ReturnType<typeof CarouselProgressText>;
+export default CarouselProgressText;

package/dist/components/carousel/carousel.anatomy.d.ts

@@ -1 +1 @@
-export { anatomy as carouselAnatomy } from '@zag-js/carousel';
+export declare const carouselAnatomy: import("@zag-js/anatomy").AnatomyInstance<"root" | "item" | "control" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;

package/dist/components/carousel/carousel.anatomy.js

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

package/dist/components/carousel/carousel.d.ts

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails, DragStatusDetails, PageChangeDetails } from '@zag-js/carousel';
+export { default as AutoplayIndicator, type CarouselAutoplayIndicatorBaseProps as AutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps as AutoplayIndicatorProps, } from './carousel-autoplay-indicator.svelte';
+export { default as ProgressText, type CarouselProgressTextBaseProps as ProgressTextBaseProps, type CarouselProgressTextProps as ProgressTextProps, } from './carousel-progress-text.svelte';
 export { default as AutoplayTrigger, type CarouselAutoplayTriggerBaseProps as AutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps as AutoplayTriggerProps, } from './carousel-autoplay-trigger.svelte';
 export { default as Context, type CarouselContextProps as ContextProps } from './carousel-context.svelte';
 export { default as Control, type CarouselControlBaseProps as ControlBaseProps, type CarouselControlProps as ControlProps, } from './carousel-control.svelte';

package/dist/components/carousel/carousel.js

@@ -1,3 +1,5 @@
+export { default as AutoplayIndicator, } from './carousel-autoplay-indicator.svelte';
+export { default as ProgressText, } from './carousel-progress-text.svelte';
 export { default as AutoplayTrigger, } from './carousel-autoplay-trigger.svelte';
 export { default as Context } from './carousel-context.svelte';
 export { default as Control, } from './carousel-control.svelte';

package/dist/components/carousel/index.d.ts

@@ -1,4 +1,6 @@
 export type { AutoplayStatusDetails as CarouselAutoplayStatusDetails, DragStatusDetails as CarouselDragStatusDetails, PageChangeDetails as CarouselPageChangeDetails, } from '@zag-js/carousel';
+export { default as CarouselAutoplayIndicator, type CarouselAutoplayIndicatorBaseProps, type CarouselAutoplayIndicatorProps, } from './carousel-autoplay-indicator.svelte';
+export { default as CarouselProgressText, type CarouselProgressTextBaseProps, type CarouselProgressTextProps, } from './carousel-progress-text.svelte';
 export { default as CarouselAutoplayTrigger, type CarouselAutoplayTriggerBaseProps, type CarouselAutoplayTriggerProps, } from './carousel-autoplay-trigger.svelte';
 export { default as CarouselContext, type CarouselContextProps } from './carousel-context.svelte';
 export { default as CarouselControl, type CarouselControlBaseProps, type CarouselControlProps, } from './carousel-control.svelte';

package/dist/components/carousel/index.js

@@ -1,3 +1,5 @@
+export { default as CarouselAutoplayIndicator, } from './carousel-autoplay-indicator.svelte';
+export { default as CarouselProgressText, } from './carousel-progress-text.svelte';
 export { default as CarouselAutoplayTrigger, } from './carousel-autoplay-trigger.svelte';
 export { default as CarouselContext } from './carousel-context.svelte';
 export { default as CarouselControl, } from './carousel-control.svelte';

package/dist/components/collection/use-list-collection.svelte.d.ts

@@ -4,7 +4,7 @@ export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'i
     /**
      * The initial items to display in the collection.
      */
-    initialItems: T[];
+    initialItems: T[] | readonly T[];
     /**
      * The filter function to use to filter the items.
      */

package/dist/components/color-picker/color-picker.d.ts

@@ -1,4 +1,4 @@
-export type { Color, ColorFormat, FormatChangeDetails, OpenChangeDetails, ValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color, ColorFormat, FocusOutsideEvent, FormatChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, ValueChangeDetails, } from '@zag-js/color-picker';
 export { default as Area, type ColorPickerAreaBaseProps as AreaBaseProps, type ColorPickerAreaProps as AreaProps, } from './color-picker-area.svelte';
 export { default as AreaBackground, type ColorPickerAreaBackgroundBaseProps as AreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps as AreaBackgroundProps, } from './color-picker-area-background.svelte';
 export { default as AreaThumb, type ColorPickerAreaThumbBaseProps as AreaThumbBaseProps, type ColorPickerAreaThumbProps as AreaThumbProps, } from './color-picker-area-thumb.svelte';

package/dist/components/color-picker/index.d.ts

@@ -1,5 +1,5 @@
 export { parse as parseColor } from '@zag-js/color-picker';
-export type { Color as ColorPickerColor, ColorFormat as ColorPickerColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
+export type { Color as ColorPickerColor, ColorFormat as ColorPickerColorFormat, FocusOutsideEvent as ColorPickerFocusOutsideEvent, FormatChangeDetails as ColorPickerFormatChangeDetails, InteractOutsideEvent as ColorPickerInteractOutsideEvent, OpenChangeDetails as ColorPickerOpenChangeDetails, PointerDownOutsideEvent as ColorPickerPointerDownOutsideEvent, ValueChangeDetails as ColorPickerValueChangeDetails, } from '@zag-js/color-picker';
 export { default as ColorPickerArea, type ColorPickerAreaBaseProps, type ColorPickerAreaProps, } from './color-picker-area.svelte';
 export { default as ColorPickerAreaBackground, type ColorPickerAreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps, } from './color-picker-area-background.svelte';
 export { default as ColorPickerAreaThumb, type ColorPickerAreaThumbBaseProps, type ColorPickerAreaThumbProps, } from './color-picker-area-thumb.svelte';

package/dist/components/combobox/combobox-empty.svelte

@@ -20,4 +20,4 @@
 
 {#if isEmpty}
   <Ark as="div" bind:ref {...parts.empty.attrs} {...props} role="presentation" />
-{/if}
+{/if}

package/dist/components/combobox/combobox-root.svelte

@@ -14,7 +14,10 @@
   export interface ComboboxRootProps<T extends CollectionItem>
     extends Assign<HTMLProps<'div'>, ComboboxRootBaseProps<T>> {}
 
-  export type ComboboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<ComboboxRootProps<T>, P>
+  export type ComboboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
+    ComboboxRootProps<T>,
+    P
+  >
 
   export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(
     props: ComboboxRootComponentProps<T, P>,

package/dist/components/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails, InputValueChangeDetails, OpenChangeDetails, SelectionDetails, ValueChangeDetails, } from '@zag-js/combobox';
+export type { FocusOutsideEvent, HighlightChangeDetails, InputValueChangeDetails, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, SelectionDetails, ValueChangeDetails, } from '@zag-js/combobox';
 export { default as ClearTrigger, type ComboboxClearTriggerProps as ClearTriggerProps, type ComboboxClearTriggerBaseProps as ClearTriggerBaseProps, } from './combobox-clear-trigger.svelte';
 export { default as Content, type ComboboxContentProps as ContentProps, type ComboboxContentBaseProps as ContentBaseProps, } from './combobox-content.svelte';
 export { default as Empty, type ComboboxEmptyProps as EmptyProps, type ComboboxEmptyBaseProps as EmptyBaseProps, } from './combobox-empty.svelte';

package/dist/components/combobox/index.d.ts

@@ -1,4 +1,4 @@
-export type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, SelectionDetails as ComboboxSelectionDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
+export type { FocusOutsideEvent as ComboboxFocusOutsideEvent, HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, InteractOutsideEvent as ComboboxInteractOutsideEvent, OpenChangeDetails as ComboboxOpenChangeDetails, PointerDownOutsideEvent as ComboboxPointerDownOutsideEvent, SelectionDetails as ComboboxSelectionDetails, ValueChangeDetails as ComboboxValueChangeDetails, } from '@zag-js/combobox';
 export { createListCollection, useListCollection, type CollectionItem, type ListCollection, type UseListCollectionProps, } from '../collection';
 export { default as ComboboxClearTrigger, type ComboboxClearTriggerProps, type ComboboxClearTriggerBaseProps, } from './combobox-clear-trigger.svelte';
 export { default as ComboboxContent, type ComboboxContentProps, type ComboboxContentBaseProps, } from './combobox-content.svelte';

package/dist/components/dialog/dialog.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/dialog';
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@zag-js/dialog';
 export { default as Backdrop, type DialogBackdropBaseProps as BackdropBaseProps, type DialogBackdropProps as BackdropProps, } from './dialog-backdrop.svelte';
 export { default as CloseTrigger, type DialogCloseTriggerBaseProps as CloseTriggerBaseProps, type DialogCloseTriggerProps as CloseTriggerProps, } from './dialog-close-trigger.svelte';
 export { default as Content, type DialogContentBaseProps as ContentBaseProps, type DialogContentProps as ContentProps, } from './dialog-content.svelte';

package/dist/components/dialog/index.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails as DialogOpenChangeDetails } from '@zag-js/dialog';
+export type { FocusOutsideEvent as DialogFocusOutsideEvent, InteractOutsideEvent as DialogInteractOutsideEvent, OpenChangeDetails as DialogOpenChangeDetails, PointerDownOutsideEvent as DialogPointerDownOutsideEvent, } from '@zag-js/dialog';
 export { default as DialogBackdrop, type DialogBackdropBaseProps, type DialogBackdropProps, } from './dialog-backdrop.svelte';
 export { default as DialogCloseTrigger, type DialogCloseTriggerBaseProps, type DialogCloseTriggerProps, } from './dialog-close-trigger.svelte';
 export { default as DialogContent, type DialogContentBaseProps, type DialogContentProps } from './dialog-content.svelte';

package/dist/components/editable/editable.d.ts

@@ -1,4 +1,4 @@
-export type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
+export type { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent, ValueChangeDetails as EditableValueChangeDetails, } from '@zag-js/editable';
 export { default as Area, type EditableAreaBaseProps as AreaBaseProps, type EditableAreaProps as AreaProps, } from './editable-area.svelte';
 export { default as CancelTrigger, type EditableCancelTriggerBaseProps as CancelTriggerBaseProps, type EditableCancelTriggerProps as CancelTriggerProps, } from './editable-cancel-trigger.svelte';
 export { default as Context, type EditableContextProps as ContextProps } from './editable-context.svelte';

package/dist/components/editable/index.d.ts

@@ -1,4 +1,4 @@
-export type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
+export type { FocusOutsideEvent as EditableFocusOutsideEvent, InteractOutsideEvent as EditableInteractOutsideEvent, PointerDownOutsideEvent as EditablePointerDownOutsideEvent, ValueChangeDetails as EditableValueChangeDetails, } from '@zag-js/editable';
 export { default as EditableArea, type EditableAreaBaseProps, type EditableAreaProps } from './editable-area.svelte';
 export { default as EditableCancelTrigger, type EditableCancelTriggerBaseProps, type EditableCancelTriggerProps, } from './editable-cancel-trigger.svelte';
 export { default as EditableContext, type EditableContextProps } from './editable-context.svelte';

package/dist/components/hover-card/hover-card.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails } from '@zag-js/hover-card';
+export type { FocusOutsideEvent, InteractOutsideEvent, OpenChangeDetails, PointerDownOutsideEvent, } from '@zag-js/hover-card';
 export { default as Arrow, type HoverCardArrowBaseProps as ArrowBaseProps, type HoverCardArrowProps as ArrowProps, } from './hover-card-arrow.svelte';
 export { default as ArrowTip, type HoverCardArrowTipBaseProps as ArrowTipBaseProps, type HoverCardArrowTipProps as ArrowTipProps, } from './hover-card-arrow-tip.svelte';
 export { default as Content, type HoverCardContentBaseProps as ContentBaseProps, type HoverCardContentProps as ContentProps, } from './hover-card-content.svelte';

package/dist/components/hover-card/index.d.ts

@@ -1,4 +1,4 @@
-export type { OpenChangeDetails as HoverCardOpenChangeDetails } from '@zag-js/hover-card';
+export type { FocusOutsideEvent as HoverCardFocusOutsideEvent, InteractOutsideEvent as HoverCardInteractOutsideEvent, OpenChangeDetails as HoverCardOpenChangeDetails, PointerDownOutsideEvent as HoverCardPointerDownOutsideEvent, } from '@zag-js/hover-card';
 export { default as HoverCardArrow, type HoverCardArrowBaseProps, type HoverCardArrowProps, } from './hover-card-arrow.svelte';
 export { default as HoverCardArrowTip, type HoverCardArrowTipBaseProps, type HoverCardArrowTipProps, } from './hover-card-arrow-tip.svelte';
 export { default as HoverCardContent, type HoverCardContentBaseProps, type HoverCardContentProps, } from './hover-card-content.svelte';

package/dist/components/image-cropper/image-cropper-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseImageCropperContext } from './use-image-cropper-context'
+
+  export interface ImageCropperContextProps {
+    render?: Snippet<[UseImageCropperContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useImageCropperContext } from './use-image-cropper-context'
+
+  const { render }: ImageCropperContextProps = $props()
+
+  const context = useImageCropperContext()
+</script>
+
+{@render render?.(context)}

package/dist/components/image-cropper/image-cropper-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseImageCropperContext } from './use-image-cropper-context';
+export interface ImageCropperContextProps {
+    render?: Snippet<[UseImageCropperContext]>;
+}
+declare const ImageCropperContext: import("svelte").Component<ImageCropperContextProps, {}, "">;
+type ImageCropperContext = ReturnType<typeof ImageCropperContext>;
+export default ImageCropperContext;

package/dist/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 '../../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} />

package/dist/components/image-cropper/image-cropper-grid.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { GridProps } from '@zag-js/image-cropper';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ImageCropperGridBaseProps extends PolymorphicProps<'div'>, RefAttribute, GridProps {
+}
+export interface ImageCropperGridProps extends Assign<HTMLProps<'div'>, ImageCropperGridBaseProps> {
+}
+declare const ImageCropperGrid: import("svelte").Component<ImageCropperGridProps, {}, "ref">;
+type ImageCropperGrid = ReturnType<typeof ImageCropperGrid>;
+export default ImageCropperGrid;

package/dist/components/image-cropper/image-cropper-handle.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { HandleProps } from '@zag-js/image-cropper'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ImageCropperHandleBaseProps extends PolymorphicProps<'div'>, RefAttribute, HandleProps {}
+  export interface ImageCropperHandleProps extends Assign<HTMLProps<'div'>, ImageCropperHandleBaseProps> {}
+</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 }: ImageCropperHandleProps = $props()
+  const imageCropper = useImageCropperContext()
+
+  const [handleProps, localProps] = $derived(createSplitProps<HandleProps>()(props, ['position']))
+
+  const mergedProps = $derived(mergeProps(imageCropper().getHandleProps(handleProps), localProps))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/image-cropper/image-cropper-handle.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HandleProps } from '@zag-js/image-cropper';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ImageCropperHandleBaseProps extends PolymorphicProps<'div'>, RefAttribute, HandleProps {
+}
+export interface ImageCropperHandleProps extends Assign<HTMLProps<'div'>, ImageCropperHandleBaseProps> {
+}
+declare const ImageCropperHandle: import("svelte").Component<ImageCropperHandleProps, {}, "ref">;
+type ImageCropperHandle = ReturnType<typeof ImageCropperHandle>;
+export default ImageCropperHandle;

package/dist/components/image-cropper/image-cropper-image.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ImageCropperImageBaseProps extends PolymorphicProps<'img'>, RefAttribute {}
+  export interface ImageCropperImageProps extends Assign<HTMLProps<'img'>, ImageCropperImageBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useImageCropperContext } from './use-image-cropper-context'
+
+  let { ref = $bindable(null), ...props }: ImageCropperImageProps = $props()
+  const imageCropper = useImageCropperContext()
+  const mergedProps = $derived(mergeProps(imageCropper().getImageProps(), props))
+</script>
+
+<Ark as="img" bind:ref {...mergedProps} />

package/dist/components/image-cropper/image-cropper-image.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ImageCropperImageBaseProps extends PolymorphicProps<'img'>, RefAttribute {
+}
+export interface ImageCropperImageProps extends Assign<HTMLProps<'img'>, ImageCropperImageBaseProps> {
+}
+declare const ImageCropperImage: import("svelte").Component<ImageCropperImageProps, {}, "ref">;
+type ImageCropperImage = ReturnType<typeof ImageCropperImage>;
+export default ImageCropperImage;

package/dist/components/image-cropper/image-cropper-root-provider.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseImageCropperReturn } from './use-image-cropper.svelte'
+
+  interface RootProviderProps {
+    value: UseImageCropperReturn
+  }
+
+  export interface ImageCropperRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface ImageCropperRootProviderProps extends ImageCropperRootProviderBaseProps {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { ImageCropperProvider } from './use-image-cropper-context'
+  import { Ark } from '../factory'
+
+  let { ref = $bindable(null), value, ...props }: ImageCropperRootProviderProps = $props()
+
+  ImageCropperProvider(value)
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/image-cropper/image-cropper-root-provider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { PolymorphicProps, RefAttribute } from '../../types';
+import type { UseImageCropperReturn } from './use-image-cropper.svelte';
+interface RootProviderProps {
+    value: UseImageCropperReturn;
+}
+export interface ImageCropperRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface ImageCropperRootProviderProps extends ImageCropperRootProviderBaseProps {
+    children?: Snippet;
+}
+declare const ImageCropperRootProvider: import("svelte").Component<ImageCropperRootProviderProps, {}, "ref">;
+type ImageCropperRootProvider = ReturnType<typeof ImageCropperRootProvider>;
+export default ImageCropperRootProvider;

package/dist/components/image-cropper/image-cropper-root.svelte

@@ -0,0 +1,87 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseImageCropperProps } from './use-image-cropper.svelte'
+
+  export interface ImageCropperRootBaseProps extends UseImageCropperProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface ImageCropperRootProps extends Assign<HTMLProps<'div'>, ImageCropperRootBaseProps> {
+    children?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Ark } from '../factory'
+  import { ImageCropperProvider } from './use-image-cropper-context'
+  import { useImageCropper } from './use-image-cropper.svelte'
+
+  let {
+    ref = $bindable(null),
+    zoom = $bindable(),
+    rotation = $bindable(),
+    flip = $bindable(),
+    ...props
+  }: ImageCropperRootProps = $props()
+  const providedId = $props.id()
+
+  const [useImageCropperProps, localProps] = $derived(
+    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 resolvedProps = $derived<UseImageCropperProps>({
+    ...useImageCropperProps,
+    id: useImageCropperProps.id ?? providedId,
+    zoom,
+    rotation,
+    flip,
+    onZoomChange(details) {
+      useImageCropperProps.onZoomChange?.(details)
+      if (zoom !== undefined) zoom = details.zoom
+    },
+    onRotationChange(details) {
+      useImageCropperProps.onRotationChange?.(details)
+      if (rotation !== undefined) rotation = details.rotation
+    },
+    onFlipChange(details) {
+      useImageCropperProps.onFlipChange?.(details)
+      if (flip !== undefined) flip = details.flip
+    },
+  })
+
+  const imageCropper = useImageCropper(() => resolvedProps)
+  const mergedProps = $derived(mergeProps(imageCropper().getRootProps(), localProps))
+
+  ImageCropperProvider(imageCropper)
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/image-cropper/image-cropper-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseImageCropperProps } from './use-image-cropper.svelte';
+export interface ImageCropperRootBaseProps extends UseImageCropperProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface ImageCropperRootProps extends Assign<HTMLProps<'div'>, ImageCropperRootBaseProps> {
+    children?: Snippet;
+}
+declare const ImageCropperRoot: import("svelte").Component<ImageCropperRootProps, {}, "ref" | "zoom" | "rotation" | "flip">;
+type ImageCropperRoot = ReturnType<typeof ImageCropperRoot>;
+export default ImageCropperRoot;

package/dist/components/image-cropper/image-cropper-selection.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ImageCropperSelectionBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ImageCropperSelectionProps extends Assign<HTMLProps<'div'>, ImageCropperSelectionBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useImageCropperContext } from './use-image-cropper-context'
+
+  let { ref = $bindable(null), ...props }: ImageCropperSelectionProps = $props()
+  const imageCropper = useImageCropperContext()
+  const mergedProps = $derived(mergeProps(imageCropper().getSelectionProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/image-cropper/image-cropper-selection.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ImageCropperSelectionBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface ImageCropperSelectionProps extends Assign<HTMLProps<'div'>, ImageCropperSelectionBaseProps> {
+}
+declare const ImageCropperSelection: import("svelte").Component<ImageCropperSelectionProps, {}, "ref">;
+type ImageCropperSelection = ReturnType<typeof ImageCropperSelection>;
+export default ImageCropperSelection;

package/dist/components/image-cropper/image-cropper-viewport.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ImageCropperViewportBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ImageCropperViewportProps extends Assign<HTMLProps<'div'>, ImageCropperViewportBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useImageCropperContext } from './use-image-cropper-context'
+
+  let { ref = $bindable(null), ...props }: ImageCropperViewportProps = $props()
+  const imageCropper = useImageCropperContext()
+  const mergedProps = $derived(mergeProps(imageCropper().getViewportProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/image-cropper/image-cropper-viewport.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface ImageCropperViewportBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface ImageCropperViewportProps extends Assign<HTMLProps<'div'>, ImageCropperViewportBaseProps> {
+}
+declare const ImageCropperViewport: import("svelte").Component<ImageCropperViewportProps, {}, "ref">;
+type ImageCropperViewport = ReturnType<typeof ImageCropperViewport>;
+export default ImageCropperViewport;

package/dist/components/image-cropper/image-cropper.anatomy.d.ts

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

package/dist/components/image-cropper/image-cropper.anatomy.js

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

package/dist/components/image-cropper/image-cropper.d.ts

@@ -0,0 +1,10 @@
+export type { CropChangeDetails, FlipChangeDetails, FlipState, GetCroppedImageOptions, HandlePosition, RotationChangeDetails, ZoomChangeDetails, } 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, type ImageCropperHandleProps as HandleProps, } from './image-cropper-handle.svelte';
+export { default as Image, type ImageCropperImageBaseProps as ImageBaseProps, type ImageCropperImageProps as ImageProps, } from './image-cropper-image.svelte';
+export { default as Root, type ImageCropperRootBaseProps as RootBaseProps, type ImageCropperRootProps as RootProps, } from './image-cropper-root.svelte';
+export { default as RootProvider, type ImageCropperRootProviderBaseProps as RootProviderBaseProps, type ImageCropperRootProviderProps as RootProviderProps, } from './image-cropper-root-provider.svelte';
+export { default as Selection, type ImageCropperSelectionBaseProps as SelectionBaseProps, type ImageCropperSelectionProps as SelectionProps, } from './image-cropper-selection.svelte';
+export { default as Viewport, type ImageCropperViewportBaseProps as ViewportBaseProps, type ImageCropperViewportProps as ViewportProps, } from './image-cropper-viewport.svelte';