@shohojdhara/atomix 0.3.3 → 0.3.5

package/dist/heavy.d.ts

@@ -0,0 +1,636 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { ReactNode, HTMLAttributes } from 'react';
+
+/**
+ * Displacement mode for glass effect
+ */
+type DisplacementMode = 'standard' | 'polar' | 'prominent' | 'shader';
+/**
+ * Mouse position coordinates
+ */
+interface MousePosition {
+    x: number;
+    y: number;
+}
+/**
+ * OverLight configuration - can be boolean, 'auto', or object with settings
+ *
+ * @example
+ * // Boolean - explicit control
+ * overLight={true}
+ *
+ * @example
+ * // Auto-detection - automatically detects background brightness
+ * overLight="auto"
+ *
+ * @example
+ * // Object config - auto-detection with custom settings
+ * overLight={{
+ *   threshold: 0.8,
+ *   opacity: 0.6,
+ *   contrast: 1.8,
+ *   brightness: 1.0,
+ *   saturationBoost: 1.5
+ * }}
+ */
+type OverLightConfig = boolean | 'auto' | OverLightObjectConfig;
+/**
+ * OverLight object configuration
+ *
+ * When using object mode, the component will auto-detect background brightness
+ * and apply the custom settings. All properties are optional and will use
+ * sensible defaults if not provided.
+ *
+ * @example
+ * // Minimal config - only threshold
+ * overLight={{ threshold: 0.8 }}
+ *
+ * @example
+ * // Full config with all properties
+ * overLight={{
+ *   threshold: 0.75,
+ *   opacity: 0.6,
+ *   contrast: 1.8,
+ *   brightness: 1.1,
+ *   saturationBoost: 1.5
+ * }}
+ */
+interface OverLightObjectConfig {
+    /**
+     * Luminance threshold for auto-detection (0.1 - 1.0)
+     *
+     * Backgrounds with average luminance above this threshold will be
+     * considered "light" and trigger overLight mode.
+     *
+     * @default 0.7
+     * @minimum 0.1
+     * @maximum 1.0
+     *
+     * @example
+     * // More sensitive detection (triggers on lighter backgrounds)
+     * threshold: 0.6
+     *
+     * @example
+     * // Less sensitive detection (only very light backgrounds)
+     * threshold: 0.85
+     */
+    threshold?: number;
+    /**
+     * Base opacity for overLight layers (0.1 - 1.0)
+     *
+     * Controls the opacity of the base and overlay layers when overLight
+     * mode is active. This value is multiplied by hover/active intensity
+     * multipliers for dynamic effects.
+     *
+     * @default 0.5 (dynamic, depends on hover/active state)
+     * @minimum 0.1
+     * @maximum 1.0
+     *
+     * @example
+     * // Subtle overlay
+     * opacity: 0.3
+     *
+     * @example
+     * // Strong overlay
+     * opacity: 0.7
+     */
+    opacity?: number;
+    /**
+     * Contrast enhancement multiplier (0.5 - 2.5)
+     *
+     * Increases the contrast of the glass effect for better visibility
+     * on light backgrounds. Higher values create more dramatic effects.
+     *
+     * @default 1.4 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 2.5
+     *
+     * @example
+     * // Subtle contrast boost
+     * contrast: 1.2
+     *
+     * @example
+     * // High contrast for maximum visibility
+     * contrast: 2.0
+     */
+    contrast?: number;
+    /**
+     * Brightness adjustment multiplier (0.5 - 2.0)
+     *
+     * Adjusts the overall brightness of the glass effect. Values above 1.0
+     * brighten the effect, while values below 1.0 darken it.
+     *
+     * @default 0.85 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 2.0
+     *
+     * @example
+     * // Neutral brightness
+     * brightness: 1.0
+     *
+     * @example
+     * // Brighter effect
+     * brightness: 1.2
+     */
+    brightness?: number;
+    /**
+     * Saturation boost multiplier (0.5 - 3.0)
+     *
+     * Enhances color saturation for more vibrant glass effects on light
+     * backgrounds. This works in conjunction with the base saturation prop.
+     *
+     * @default 1.3 (dynamic, includes mouse influence)
+     * @minimum 0.5
+     * @maximum 3.0
+     *
+     * @example
+     * // Moderate saturation boost
+     * saturationBoost: 1.2
+     *
+     * @example
+     * // High saturation for vivid effects
+     * saturationBoost: 2.0
+     */
+    saturationBoost?: number;
+}
+/**
+ * AtomixGlass component props interface
+ */
+interface AtomixGlassProps {
+    children: React.ReactNode;
+    displacementScale?: number;
+    blurAmount?: number;
+    saturation?: number;
+    aberrationIntensity?: number;
+    elasticity?: number;
+    cornerRadius?: number;
+    globalMousePosition?: MousePosition;
+    mouseOffset?: MousePosition;
+    mouseContainer?: React.RefObject<HTMLElement | null> | null;
+    className?: string;
+    padding?: string;
+    style?: React.CSSProperties;
+    overLight?: OverLightConfig;
+    mode?: DisplacementMode;
+    onClick?: () => void;
+    /**
+     * Shader variant for shader mode
+     */
+    shaderVariant?: 'liquidGlass' | 'premiumGlass';
+    /**
+     * Accessibility props
+     */
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    role?: string;
+    tabIndex?: number;
+    /**
+     * Performance and accessibility options
+     */
+    reducedMotion?: boolean;
+    highContrast?: boolean;
+    disableEffects?: boolean;
+    enableLiquidBlur?: boolean;
+    enableBorderEffect?: boolean;
+    enableOverLightLayers?: boolean;
+    /**
+     * Performance monitoring
+     */
+    enablePerformanceMonitoring?: boolean;
+    /**
+     * Debug mode for cornerRadius extraction
+     */
+    debugCornerRadius?: boolean;
+    /**
+     * Debug mode for overLight detection and configuration
+     *
+     * When enabled, logs detailed information about:
+     * - Auto-detection results (luminance values, threshold comparison)
+     * - Final overLight configuration values
+     * - Detection timing and performance
+     *
+     * Useful for debugging auto-detection issues and fine-tuning thresholds.
+     *
+     * @default false
+     *
+     * @example
+     * <AtomixGlass overLight="auto" debugOverLight={true}>
+     *   Content
+     * </AtomixGlass>
+     */
+    debugOverLight?: boolean;
+}
+/**
+ * Base component properties interface
+ */
+interface BaseComponentProps {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Component disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Component children
+     */
+    children?: ReactNode;
+    /**
+     * Inline style for the component root element
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * VideoPlayer component properties
+ */
+interface VideoQuality {
+    label: string;
+    src: string;
+    resolution?: string;
+}
+interface VideoSubtitle {
+    label: string;
+    src: string;
+    srcLang: string;
+    default?: boolean;
+}
+interface VideoChapter {
+    title: string;
+    startTime: number;
+    endTime?: number;
+}
+interface VideoPlayerProps extends BaseComponentProps {
+    /**
+     * Video source URL or YouTube video ID
+     */
+    src: string;
+    /**
+     * Video player type
+     */
+    type?: 'video' | 'youtube';
+    /**
+     * YouTube video ID (alternative to src for YouTube videos)
+     */
+    youtubeId?: string;
+    /**
+     * Poster image URL
+     */
+    poster?: string;
+    /**
+     * Whether video should autoplay
+     */
+    autoplay?: boolean;
+    /**
+     * Whether video should loop
+     */
+    loop?: boolean;
+    /**
+     * Whether video should be muted
+     */
+    muted?: boolean;
+    /**
+     * Whether to show custom controls
+     */
+    controls?: boolean;
+    /**
+     * Video preload setting
+     */
+    preload?: 'none' | 'metadata' | 'auto';
+    /**
+     * Video width
+     */
+    width?: string | number;
+    /**
+     * Video height
+     */
+    height?: string | number;
+    /**
+     * Aspect ratio (e.g., '16:9', '4:3')
+     */
+    aspectRatio?: string;
+    /**
+     * Available playback rates
+     */
+    playbackRates?: number[];
+    /**
+     * Available video qualities
+     */
+    quality?: VideoQuality[];
+    /**
+     * Available subtitles
+     */
+    subtitles?: VideoSubtitle[];
+    /**
+     * Video chapters for navigation
+     */
+    chapters?: VideoChapter[];
+    /**
+     * Thumbnail images for scrubbing
+     */
+    thumbnails?: string[];
+    /**
+     * Whether to show download button
+     */
+    showDownload?: boolean;
+    /**
+     * Whether to show share button
+     */
+    showShare?: boolean;
+    /**
+     * Whether to show settings menu
+     */
+    showSettings?: boolean;
+    /**
+     * Enable ambient mode (YouTube-like background glow)
+     */
+    ambientMode?: boolean;
+    /**
+     * Glass morphism variant configuration
+     * - true: Enable with default settings
+     * - false/undefined: Disable glass effect
+     * - object: Custom glass configuration
+     */
+    glass?: boolean | {
+        displacementScale?: number;
+        blurAmount?: number;
+        saturation?: number;
+        aberrationIntensity?: number;
+        elasticity?: number;
+        cornerRadius?: number;
+        mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+        overLight?: boolean;
+    };
+    /**
+     * Glass overlay opacity (0-1) when glass variant is enabled
+     * @default 0.3
+     */
+    glassOpacity?: number;
+    /**
+     * Custom content to display over the glass layer
+     */
+    glassContent?: React.ReactNode;
+    /**
+     * Play event handler
+     */
+    onPlay?: () => void;
+    /**
+     * Pause event handler
+     */
+    onPause?: () => void;
+    /**
+     * Ended event handler
+     */
+    onEnded?: () => void;
+    /**
+     * Time update event handler
+     */
+    onTimeUpdate?: (currentTime: number) => void;
+    /**
+     * Volume change event handler
+     */
+    onVolumeChange?: (volume: number) => void;
+    /**
+     * Fullscreen change event handler
+     */
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+    /**
+     * Error event handler
+     */
+    onError?: (error: Event) => void;
+}
+/**
+ * PhotoViewer component properties
+ */
+/**
+ * Interface for image objects used in PhotoViewer
+ */
+interface ImageType {
+    src: string;
+    alt?: string;
+    thumbnail?: string;
+    title?: string;
+    description?: string;
+    date?: string;
+    author?: string;
+    tags?: string[];
+}
+interface PhotoViewerProps extends BaseComponentProps {
+    /**
+     * Array of image URLs or image objects to display in the viewer
+     */
+    images: (string | ImageType)[];
+    /**
+     * Index of the image to show first
+     * @default 0
+     */
+    startIndex?: number;
+    /**
+     * Additional className for the root element
+     */
+    className?: string;
+    /**
+     * Whether the viewer is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Enable keyboard navigation (arrow keys, escape)
+     * @default true
+     */
+    enableKeyboardNavigation?: boolean;
+    /**
+     * Enable touch gestures for mobile devices
+     * @default true
+     */
+    enableGestures?: boolean;
+    /**
+     * Enable fullscreen mode
+     * @default true
+     */
+    enableFullscreen?: boolean;
+    /**
+     * Position of thumbnails
+     * @default 'bottom'
+     */
+    thumbnailPosition?: 'bottom' | 'top' | 'left' | 'right' | 'none';
+    /**
+     * Callback when image changes
+     */
+    onImageChange?: (index: number) => void;
+    /**
+     * Callback when viewer is closed
+     */
+    onClose?: () => void;
+}
+
+/**
+ * AtomixGlass - A high-performance glass morphism component with liquid distortion effects
+ *
+ * Features:
+ * - Hardware-accelerated glass effects with SVG filters
+ * - Mouse-responsive liquid distortion
+ * - Dynamic border-radius extraction from children CSS properties
+ * - Automatic light/dark theme detection via overLight prop
+ * - Accessibility and performance optimizations
+ * - Multiple displacement modes (standard, polar, prominent, shader)
+ * - Design token integration for consistent theming
+ * - Focus ring support for keyboard navigation
+ * - Responsive breakpoints for mobile optimization
+ * - Enhanced ARIA attributes for screen readers
+ *
+ * Design System Compliance:
+ * - Uses design tokens for opacity, spacing, and colors
+ * - Follows BEM methodology for class naming
+ * - Implements focus-ring mixin for accessibility
+ * - Supports reduced motion and high contrast preferences
+ *
+ * @example
+ * // Basic usage with dynamic border-radius extraction
+ * <AtomixGlass>
+ *   <div style={{ borderRadius: '12px' }}>Content with 12px radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Manual border-radius override
+ * <AtomixGlass cornerRadius={20}>
+ *   <div>Content with 20px glass radius</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Interactive glass with click handler
+ * <AtomixGlass onClick={() => console.log('Clicked')} aria-label="Glass card">
+ *   <div>Clickable content</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Boolean mode (explicit control)
+ * <AtomixGlass overLight={true}>
+ *   <div>Content on light background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Auto-detection mode
+ * <AtomixGlass overLight="auto">
+ *   <div>Content with auto-detected background</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // OverLight - Object config with custom settings
+ * <AtomixGlass
+ *   overLight={{
+ *     threshold: 0.8,
+ *     opacity: 0.6,
+ *     contrast: 1.8,
+ *     brightness: 1.0,
+ *     saturationBoost: 1.5
+ *   }}
+ * >
+ *   <div>Content with custom overLight config</div>
+ * </AtomixGlass>
+ *
+ * @example
+ * // Debug mode for overLight detection
+ * <AtomixGlass overLight="auto" debugOverLight={true}>
+ *   <div>Content with debug logging enabled</div>
+ * </AtomixGlass>
+ */
+declare function AtomixGlass({ children, displacementScale, blurAmount, saturation, aberrationIntensity, elasticity, cornerRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer, className, padding, overLight, style, mode, onClick, shaderVariant, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, role, tabIndex, reducedMotion, highContrast, disableEffects, enableLiquidBlur, enableBorderEffect, enableOverLightLayers, enablePerformanceMonitoring, debugCornerRadius, debugOverLight, }: AtomixGlassProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Advanced Video Player Component
+ */
+declare const VideoPlayer: React$1.ForwardRefExoticComponent<VideoPlayerProps & React$1.RefAttributes<HTMLVideoElement>>;
+
+interface MasonryGridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content to be rendered within the masonry grid
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Number of columns at extra small breakpoint (default)
+     */
+    xs?: number;
+    /**
+     * Number of columns at small breakpoint
+     */
+    sm?: number;
+    /**
+     * Number of columns at medium breakpoint
+     */
+    md?: number;
+    /**
+     * Number of columns at large breakpoint
+     */
+    lg?: number;
+    /**
+     * Number of columns at extra large breakpoint
+     */
+    xl?: number;
+    /**
+     * Number of columns at extra extra large breakpoint
+     */
+    xxl?: number;
+    /**
+     * Gap between items (in pixels)
+     */
+    gap?: number;
+    /**
+     * Whether to animate item transitions
+     */
+    animate?: boolean;
+    /**
+     * Whether to handle image loading to prevent layout shifts
+     * When true, items will be shown immediately and positions updated as images load
+     */
+    imagesLoaded?: boolean;
+    /**
+     * Callback fired when all images are loaded and layout is complete
+     */
+    onLayoutComplete?: () => void;
+    /**
+     * Callback fired each time an image loads and layout is updated
+     */
+    onImageLoad?: (loadedCount: number, totalCount: number) => void;
+}
+/**
+ * MasonryGrid component for creating a responsive masonry layout.
+ * Uses JavaScript to position items optimally based on available vertical space,
+ * similar to how a mason fits stones in a wall.
+ *
+ * @example
+ * ```tsx
+ * <MasonryGrid xs={1} sm={2} md={3} lg={4}>
+ *   <MasonryGridItem>Item 1</MasonryGridItem>
+ *   <MasonryGridItem>Item 2</MasonryGridItem>
+ *   <MasonryGridItem>Item 3</MasonryGridItem>
+ * </MasonryGrid>
+ * ```
+ */
+declare const MasonryGrid: React$1.ForwardRefExoticComponent<MasonryGridProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * PhotoViewer component - A comprehensive image viewer with zoom, pan, navigation, and metadata display
+ *
+ * Features:
+ * - Image navigation with keyboard support
+ * - Zoom and pan functionality
+ * - Touch gestures for mobile devices
+ * - Fullscreen mode
+ * - Image rotation
+ * - Download and share capabilities
+ * - Thumbnail navigation
+ * - Image metadata display
+ * - Responsive design
+ *
+ * @param props - PhotoViewerProps
+ * @returns JSX.Element
+ */
+declare const PhotoViewer: React$1.FC<PhotoViewerProps>;
+
+export { AtomixGlass, MasonryGrid, PhotoViewer, VideoPlayer };
+export type { AtomixGlassProps, MasonryGridProps, PhotoViewerProps, VideoPlayerProps };