@frybynite/image-cloud 0.9.2 → 0.9.4

package/dist/index.d.ts

@@ -552,7 +552,7 @@ declare interface FocusInteractionConfig {
  * Minimal functional CSS required for the library to work.
  * Injected automatically - no external CSS file needed.
  */
-export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.fbn-ic-image {\n  position: absolute;\n  cursor: pointer;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0.6s;\n  will-change: transform;\n  user-select: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n.fbn-ic-image.fbn-ic-focused {\n  z-index: 1000;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0s;\n  will-change: auto;\n}\n\n.fbn-ic-counter {\n  position: fixed;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10001;\n  pointer-events: none;\n}\n\n.fbn-ic-hidden {\n  display: none !important;\n}\n";
+export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.fbn-ic-image {\n  position: absolute;\n  cursor: pointer;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0.6s;\n  will-change: transform;\n  user-select: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n.fbn-ic-image.fbn-ic-focused {\n  z-index: 1000;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0s;\n  will-change: auto;\n}\n\n.fbn-ic-counter {\n  position: fixed;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10001;\n  pointer-events: none;\n}\n\n.fbn-ic-gallery:focus,\n.fbn-ic-gallery.fbn-ic-has-focus {\n  outline: 2px solid rgba(147, 197, 253, 0.8);\n  outline-offset: -4px;\n}\n.fbn-ic-gallery.fbn-ic-suppress-outline:focus {\n  outline: none;\n}\n.fbn-ic-gallery.fbn-ic-suppress-outline.fbn-ic-has-focus {\n  outline: 2px solid rgba(99, 102, 241, 0.6);\n  outline-offset: -4px;\n}\n\n.fbn-ic-nav-btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 10001;\n  cursor: pointer;\n  border: none;\n  background: none;\n  padding: 0;\n  line-height: 1;\n}\n.fbn-ic-nav-btn-prev {\n  left: 12px;\n}\n.fbn-ic-nav-btn-next {\n  right: 12px;\n}\n\n.fbn-ic-hidden {\n  display: none !important;\n}\n";
 
 export declare type GalleryConfig = ImageCloudConfig;
 
@@ -805,6 +805,10 @@ declare class ImageCloud {
     private errorElAutoCreated;
     private counterEl;
     private counterElAutoCreated;
+    private prevButtonEl;
+    private nextButtonEl;
+    private prevButtonElAutoCreated;
+    private nextButtonElAutoCreated;
     constructor(options?: ImageCloudOptions);
     /**
      * Create image filter based on shared loader config
@@ -828,6 +832,8 @@ declare class ImageCloud {
     private createDefaultLoadingElement;
     private createDefaultErrorElement;
     private createDefaultCounterElement;
+    private createDefaultPrevButtonElement;
+    private createDefaultNextButtonElement;
     private setupEventListeners;
     /**
      * Navigate to the next image (Right arrow)
@@ -865,6 +871,10 @@ declare class ImageCloud {
     private hideError;
     private updateCounter;
     private hideCounter;
+    private showFocusIndicator;
+    private hideFocusIndicator;
+    private showNavButtons;
+    private hideNavButtons;
     /**
      * Destroy the gallery and clean up resources
      */
@@ -880,7 +890,7 @@ export declare interface ImageCloudConfig {
     layout: LayoutConfig;
     animation: AnimationConfig;
     interaction: InteractionConfig;
-    rendering: RenderingConfig;
+    ui: UIConfig;
     styling?: ImageStylingConfig;
 }
 
@@ -893,7 +903,11 @@ export declare interface ImageCloudOptions {
     layout?: Partial<LayoutConfig>;
     animation?: Partial<AnimationConfig>;
     interaction?: Partial<InteractionConfig>;
-    rendering?: Partial<RenderingConfig>;
+    ui?: Partial<UIConfig>;
+    /** @deprecated Use `ui` instead of `rendering.ui` */
+    rendering?: {
+        ui?: Partial<UIConfig>;
+    };
     styling?: Partial<ImageStylingConfig>;
 }
 
@@ -1253,11 +1267,6 @@ export declare class RandomPlacementLayout implements PlacementLayout {
     private random;
 }
 
-declare interface RenderingConfig {
-    responsive: ResponsiveRenderingConfig;
-    ui: UIRenderingConfig;
-}
-
 /**
  * Check if a path type requires JavaScript animation (vs CSS transitions)
  */
@@ -1281,18 +1290,9 @@ export declare interface ResponsiveHeight {
     height: number;
 }
 
-export declare interface ResponsiveRenderingConfig {
-    breakpoints: {
-        mobile: number;
-        tablet?: number;
-        desktop?: number;
-    };
-    mobileDetection: () => boolean;
-}
-
 declare type ShadowPreset = 'none' | 'sm' | 'md' | 'lg' | 'glow';
 
-export declare interface SharedLoaderConfig {
+declare interface SharedLoaderConfig {
     validateUrls?: boolean;
     validationTimeout?: number;
     validationMethod?: 'head' | 'simple' | 'none';
@@ -1482,12 +1482,16 @@ export declare interface TransformParams {
     scale?: number;
 }
 
-export declare interface UIRenderingConfig {
+export declare interface UIConfig {
     showLoadingSpinner: boolean;
     showImageCounter?: boolean;
     loadingElement?: string | HTMLElement;
     errorElement?: string | HTMLElement;
     counterElement?: string | HTMLElement;
+    showNavButtons?: boolean;
+    prevButtonElement?: string | HTMLElement;
+    nextButtonElement?: string | HTMLElement;
+    showFocusOutline?: boolean;
 }
 
 /**

package/dist/react.d.ts

@@ -552,7 +552,7 @@ declare interface FocusInteractionConfig {
  * Minimal functional CSS required for the library to work.
  * Injected automatically - no external CSS file needed.
  */
-export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.fbn-ic-image {\n  position: absolute;\n  cursor: pointer;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0.6s;\n  will-change: transform;\n  user-select: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n.fbn-ic-image.fbn-ic-focused {\n  z-index: 1000;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0s;\n  will-change: auto;\n}\n\n.fbn-ic-counter {\n  position: fixed;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10001;\n  pointer-events: none;\n}\n\n.fbn-ic-hidden {\n  display: none !important;\n}\n";
+export declare const FUNCTIONAL_CSS = "\n.fbn-ic-gallery {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  perspective: 1000px;\n}\n\n.fbn-ic-image {\n  position: absolute;\n  cursor: pointer;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0.6s;\n  will-change: transform;\n  user-select: none;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n}\n\n.fbn-ic-image.fbn-ic-focused {\n  z-index: 1000;\n  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),\n    filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    outline 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    z-index 0s 0s;\n  will-change: auto;\n}\n\n.fbn-ic-counter {\n  position: fixed;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 10001;\n  pointer-events: none;\n}\n\n.fbn-ic-gallery:focus,\n.fbn-ic-gallery.fbn-ic-has-focus {\n  outline: 2px solid rgba(147, 197, 253, 0.8);\n  outline-offset: -4px;\n}\n.fbn-ic-gallery.fbn-ic-suppress-outline:focus {\n  outline: none;\n}\n.fbn-ic-gallery.fbn-ic-suppress-outline.fbn-ic-has-focus {\n  outline: 2px solid rgba(99, 102, 241, 0.6);\n  outline-offset: -4px;\n}\n\n.fbn-ic-nav-btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 10001;\n  cursor: pointer;\n  border: none;\n  background: none;\n  padding: 0;\n  line-height: 1;\n}\n.fbn-ic-nav-btn-prev {\n  left: 12px;\n}\n.fbn-ic-nav-btn-next {\n  right: 12px;\n}\n\n.fbn-ic-hidden {\n  display: none !important;\n}\n";
 
 export declare type GalleryConfig = ImageCloudConfig;
 
@@ -805,6 +805,10 @@ declare class ImageCloud {
     private errorElAutoCreated;
     private counterEl;
     private counterElAutoCreated;
+    private prevButtonEl;
+    private nextButtonEl;
+    private prevButtonElAutoCreated;
+    private nextButtonElAutoCreated;
     constructor(options?: ImageCloudOptions);
     /**
      * Create image filter based on shared loader config
@@ -828,6 +832,8 @@ declare class ImageCloud {
     private createDefaultLoadingElement;
     private createDefaultErrorElement;
     private createDefaultCounterElement;
+    private createDefaultPrevButtonElement;
+    private createDefaultNextButtonElement;
     private setupEventListeners;
     /**
      * Navigate to the next image (Right arrow)
@@ -865,6 +871,10 @@ declare class ImageCloud {
     private hideError;
     private updateCounter;
     private hideCounter;
+    private showFocusIndicator;
+    private hideFocusIndicator;
+    private showNavButtons;
+    private hideNavButtons;
     /**
      * Destroy the gallery and clean up resources
      */
@@ -880,7 +890,7 @@ export declare interface ImageCloudConfig {
     layout: LayoutConfig;
     animation: AnimationConfig;
     interaction: InteractionConfig;
-    rendering: RenderingConfig;
+    ui: UIConfig;
     styling?: ImageStylingConfig;
 }
 
@@ -893,7 +903,11 @@ export declare interface ImageCloudOptions {
     layout?: Partial<LayoutConfig>;
     animation?: Partial<AnimationConfig>;
     interaction?: Partial<InteractionConfig>;
-    rendering?: Partial<RenderingConfig>;
+    ui?: Partial<UIConfig>;
+    /** @deprecated Use `ui` instead of `rendering.ui` */
+    rendering?: {
+        ui?: Partial<UIConfig>;
+    };
     styling?: Partial<ImageStylingConfig>;
 }
 
@@ -1253,11 +1267,6 @@ export declare class RandomPlacementLayout implements PlacementLayout {
     private random;
 }
 
-declare interface RenderingConfig {
-    responsive: ResponsiveRenderingConfig;
-    ui: UIRenderingConfig;
-}
-
 /**
  * Check if a path type requires JavaScript animation (vs CSS transitions)
  */
@@ -1281,18 +1290,9 @@ export declare interface ResponsiveHeight {
     height: number;
 }
 
-export declare interface ResponsiveRenderingConfig {
-    breakpoints: {
-        mobile: number;
-        tablet?: number;
-        desktop?: number;
-    };
-    mobileDetection: () => boolean;
-}
-
 declare type ShadowPreset = 'none' | 'sm' | 'md' | 'lg' | 'glow';
 
-export declare interface SharedLoaderConfig {
+declare interface SharedLoaderConfig {
     validateUrls?: boolean;
     validationTimeout?: number;
     validationMethod?: 'head' | 'simple' | 'none';
@@ -1482,12 +1482,16 @@ export declare interface TransformParams {
     scale?: number;
 }
 
-export declare interface UIRenderingConfig {
+export declare interface UIConfig {
     showLoadingSpinner: boolean;
     showImageCounter?: boolean;
     loadingElement?: string | HTMLElement;
     errorElement?: string | HTMLElement;
     counterElement?: string | HTMLElement;
+    showNavButtons?: boolean;
+    prevButtonElement?: string | HTMLElement;
+    nextButtonElement?: string | HTMLElement;
+    showFocusOutline?: boolean;
 }
 
 /**