@frybynite/image-cloud 0.7.3 → 0.7.5

package/dist/index.d.ts

@@ -166,6 +166,15 @@ export declare interface BouncePathConfig {
 
 export declare type BouncePreset = 'energetic' | 'playful' | 'subtle';
 
+declare interface ClipPathConfig {
+    shape: ClipPathShape;
+    mode?: ClipPathMode;
+}
+
+declare type ClipPathMode = 'percent' | 'height-relative';
+
+declare type ClipPathShape = 'circle' | 'square' | 'triangle' | 'pentagon' | 'hexagon' | 'octagon' | 'diamond';
+
 export declare interface ClusterAlgorithmConfig {
     clusterCount: number | 'auto';
     clusterSpread: number;
@@ -732,7 +741,6 @@ declare class ImageCloud {
     private queueInterval;
     private loadGeneration;
     private defaultStyles;
-    private hoverStyles;
     private defaultClassName;
     private hoverClassName;
     private animationEngine;
@@ -970,6 +978,7 @@ declare interface ImageStyleState {
     outline?: OutlineConfig;
     objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
     aspectRatio?: string;
+    clipPath?: ClipPathShape | string | ClipPathConfig;
 }
 
 declare interface ImageStylingConfig {
@@ -1508,9 +1517,7 @@ export declare class ZoomEngine {
     private outgoing;
     private incoming;
     private focusGeneration;
-    private defaultStyles;
-    private focusedStyles;
-    private defaultClassName;
+    private styling?;
     private focusedClassName;
     constructor(config: FocusInteractionConfig, animationEngine: AnimationEngine, styling?: ImageStylingConfig);
     /**
@@ -1546,12 +1553,19 @@ export declare class ZoomEngine {
     private animateWithDimensions;
     /**
      * Apply focused styling to an element
+     * Applies non-clip-path styles immediately, clip-path will be updated during animation via startClipPathAnimation
      */
     private applyFocusedStyling;
     /**
      * Remove focused styling from an element
+     * Removes classes and z-index, clip-path will be updated during animation via startClipPathAnimation
      */
     private removeFocusedStyling;
+    /**
+     * Continuously update clip-path during animation based on current element dimensions
+     * This ensures clip-path changes smoothly as width/height animate
+     */
+    private startClipPathAnimation;
     /**
      * Start focus animation for an image using dimension-based zoom
      * Animates actual width/height for sharper rendering instead of transform scale

package/dist/react.d.ts

@@ -166,6 +166,15 @@ export declare interface BouncePathConfig {
 
 export declare type BouncePreset = 'energetic' | 'playful' | 'subtle';
 
+declare interface ClipPathConfig {
+    shape: ClipPathShape;
+    mode?: ClipPathMode;
+}
+
+declare type ClipPathMode = 'percent' | 'height-relative';
+
+declare type ClipPathShape = 'circle' | 'square' | 'triangle' | 'pentagon' | 'hexagon' | 'octagon' | 'diamond';
+
 export declare interface ClusterAlgorithmConfig {
     clusterCount: number | 'auto';
     clusterSpread: number;
@@ -732,7 +741,6 @@ declare class ImageCloud {
     private queueInterval;
     private loadGeneration;
     private defaultStyles;
-    private hoverStyles;
     private defaultClassName;
     private hoverClassName;
     private animationEngine;
@@ -970,6 +978,7 @@ declare interface ImageStyleState {
     outline?: OutlineConfig;
     objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
     aspectRatio?: string;
+    clipPath?: ClipPathShape | string | ClipPathConfig;
 }
 
 declare interface ImageStylingConfig {
@@ -1508,9 +1517,7 @@ export declare class ZoomEngine {
     private outgoing;
     private incoming;
     private focusGeneration;
-    private defaultStyles;
-    private focusedStyles;
-    private defaultClassName;
+    private styling?;
     private focusedClassName;
     constructor(config: FocusInteractionConfig, animationEngine: AnimationEngine, styling?: ImageStylingConfig);
     /**
@@ -1546,12 +1553,19 @@ export declare class ZoomEngine {
     private animateWithDimensions;
     /**
      * Apply focused styling to an element
+     * Applies non-clip-path styles immediately, clip-path will be updated during animation via startClipPathAnimation
      */
     private applyFocusedStyling;
     /**
      * Remove focused styling from an element
+     * Removes classes and z-index, clip-path will be updated during animation via startClipPathAnimation
      */
     private removeFocusedStyling;
+    /**
+     * Continuously update clip-path during animation based on current element dimensions
+     * This ensures clip-path changes smoothly as width/height animate
+     */
+    private startClipPathAnimation;
     /**
      * Start focus animation for an image using dimension-based zoom
      * Animates actual width/height for sharper rendering instead of transform scale