const{Fragment:n,jsx:e,jsxs:i}=arguments[0];function _createMdxContent(a){const d={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...a.components};return i(n,{children:[e(d.h1,{children:"ClickExpand"}),"\n",e(d.p,{children:"The ClickExpand variant transforms images into interactive modal galleries with sophisticated animations, customizable backdrops, and comprehensive accessibility support. Perfect for image galleries, portfolios, and detailed image viewing experiences."}),"\n",e(d.h2,{children:"Features"}),"\n",i(d.ul,{children:["\n",i(d.li,{children:[e(d.strong,{children:"9 Animation Types"}),": From subtle scale fades to dynamic 3D flips"]}),"\n",i(d.li,{children:[e(d.strong,{children:"5 Backdrop Effects"}),": Including blur, glass, and custom overlays"]}),"\n",i(d.li,{children:[e(d.strong,{children:"6 Modal Sizes"}),": From compact to full viewport coverage"]}),"\n",i(d.li,{children:[e(d.strong,{children:"Full Accessibility"}),": ARIA compliance, keyboard navigation, focus trapping"]}),"\n",i(d.li,{children:[e(d.strong,{children:"Performance Optimized"}),": Scroll locking, animation frame optimization"]}),"\n",i(d.li,{children:[e(d.strong,{children:"TypeScript Support"}),": Complete type definitions and IntelliSense"]}),"\n"]}),"\n",e(d.h2,{children:"Quick Start"}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'import { ReactiveImage } from "reactive-image";\n\nexport default function Gallery() {\n return (\n \n );\n}\n'})}),"\n",e(d.h2,{children:"Animation Types"}),"\n",e(d.h3,{children:"Scale & Fade Effects"}),"\n",e(d.p,{children:"Perfect for smooth, professional transitions."}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// Smooth scale with fade (default)\n\n\n// Spring-powered bounce\n\n\n// Zoom with bounce effect\n\n'})}),"\n",e(d.h3,{children:"Directional Slides"}),"\n",e(d.p,{children:"Great for storytelling and sequential content."}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// Slide from bottom\n\n\n// Slide from top\n\n\n// Slide from sides\n\n'})}),"\n",e(d.h3,{children:"3D Effects"}),"\n",e(d.p,{children:"Eye-catching animations for premium experiences."}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// 3D rotation entrance\n\n\n// 3D flip effect\n\n'})}),"\n",e(d.h2,{children:"Backdrop Effects"}),"\n",e(d.h3,{children:"Standard Backdrops"}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// Subtle dark overlay\n\n\n// Heavy dark overlay\n\n\n// No backdrop (transparent)\n\n'})}),"\n",e(d.h3,{children:"Modern Glass Effects"}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// Blur effect\n\n\n// Glassmorphism\n\n'})}),"\n",e(d.h3,{children:"Custom Backdrops"}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// Custom colored overlay\n\n\n// Advanced glassmorphism\n\n'})}),"\n",e(d.h2,{children:"Modal Sizing"}),"\n",e(d.p,{children:"Control the maximum dimensions of your modal for different use cases."}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// Compact size (400x300px max)\n\n\n// Medium size (600x450px max)\n\n\n// Large size (800x600px max)\n\n\n// Extra large (1200x800px max)\n\n\n// Full viewport (95% coverage)\n\n\n// Auto-responsive (default)\n\n'})}),"\n",e(d.h2,{children:"Captions & Styling"}),"\n",e(d.p,{children:"Add descriptions and custom styling to your modals."}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// Simple caption\n\n\n// Custom modal styling\n\n'})}),"\n",e(d.h2,{children:"Interactive Configuration"}),"\n",e(d.p,{children:"Fine-tune user interaction and behavior."}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:" console.log('Modal opened')}\n onClose={() => console.log('Modal closed')}\n onAnimationStart={() => console.log('Animation started')}\n onAnimationEnd={() => console.log('Animation completed')}\n/>\n"})}),"\n",e(d.h2,{children:"Advanced Patterns"}),"\n",e(d.h3,{children:"Gallery Grid"}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:"const galleryImages = [\n { src: '/gallery1.jpg', alt: 'Sunset landscape', caption: 'Golden hour magic' },\n { src: '/gallery2.jpg', alt: 'Mountain peak', caption: 'Summit at 3000m' },\n { src: '/gallery3.jpg', alt: 'Forest path', caption: 'Morning woodland walk' },\n];\n\nexport default function PhotoGallery() {\n return (\n

\n {galleryImages.map((image, index) => (\n \n ))}\n

\n );\n}\n"})}),"\n",e(d.h3,{children:"Portfolio Showcase"}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'export default function PortfolioItem() {\n const handleImageOpen = () => {\n // Track analytics\n analytics.track(\'portfolio_image_viewed\');\n };\n\n return (\n

\n \n

\n );\n}\n'})}),"\n",e(d.h2,{children:"Custom Hook Usage"}),"\n",e(d.p,{children:"For advanced use cases, use the underlying hook directly:"}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'import { useClickExpand } from "reactive-image/ClickExpand";\n\nexport default function CustomModal() {\n const { state, handlers, modalProps } = useClickExpand({\n closeOnEsc: true,\n closeOnBackdrop: true,\n onOpen: () => console.log(\'Custom modal opened\'),\n onClose: () => console.log(\'Custom modal closed\'),\n });\n\n return (\n

\n \n\n {state.isOpen && (\n

e.stopPropagation()}\n >\n

Custom Modal

\n Built with the ClickExpand hook for maximum flexibility.\n

\n \n

\n )}\n

\n );\n}\n'})}),"\n",e(d.h2,{children:"Accessibility Features"}),"\n",e(d.p,{children:"ClickExpand is built with accessibility in mind:"}),"\n",i(d.ul,{children:["\n",i(d.li,{children:[e(d.strong,{children:"ARIA Attributes"}),": Proper ",e(d.code,{children:"aria-modal"}),", ",e(d.code,{children:"role"}),", and labeling"]}),"\n",i(d.li,{children:[e(d.strong,{children:"Keyboard Navigation"}),": ESC to close, Enter/Space to open, Tab navigation"]}),"\n",i(d.li,{children:[e(d.strong,{children:"Focus Management"}),": Focus trapping within modal, focus restoration"]}),"\n",i(d.li,{children:[e(d.strong,{children:"Screen Readers"}),": Descriptive labels and announcements"]}),"\n",i(d.li,{children:[e(d.strong,{children:"Color Contrast"}),": Backdrop overlays ensure sufficient contrast"]}),"\n"]}),"\n",e(d.h3,{children:"Keyboard Shortcuts"}),"\n",i(d.table,{children:[e(d.thead,{children:i(d.tr,{children:[e(d.th,{children:"Key"}),e(d.th,{children:"Action"})]})}),i(d.tbody,{children:[i(d.tr,{children:[i(d.td,{children:[e(d.code,{children:"Enter"})," or ",e(d.code,{children:"Space"})]}),e(d.td,{children:"Open modal when image focused"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"Escape"})}),i(d.td,{children:["Close modal (if ",e(d.code,{children:"closeOnEsc"})," enabled)"]})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"Tab"})}),e(d.td,{children:"Navigate within modal (focus trapped)"})]})]})]}),"\n",e(d.h2,{children:"API Reference"}),"\n",e(d.h3,{children:"Props"}),"\n",i(d.table,{children:[e(d.thead,{children:i(d.tr,{children:[e(d.th,{children:"Prop"}),e(d.th,{children:"Type"}),e(d.th,{children:"Default"}),e(d.th,{children:"Description"})]})}),i(d.tbody,{children:[i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"modalAnimation"})}),e(d.td,{children:e(d.code,{children:"ModalAnimationType"})}),e(d.td,{children:e(d.code,{children:'"scaleFade"'})}),e(d.td,{children:"Animation type for modal entrance"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"backdrop"})}),e(d.td,{children:e(d.code,{children:"BackdropType"})}),e(d.td,{children:e(d.code,{children:'"dim"'})}),e(d.td,{children:"Backdrop effect style"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"caption"})}),e(d.td,{children:e(d.code,{children:"string"})}),e(d.td,{children:e(d.code,{children:"undefined"})}),e(d.td,{children:"Caption text below image"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"closeOnEsc"})}),e(d.td,{children:e(d.code,{children:"boolean"})}),e(d.td,{children:e(d.code,{children:"true"})}),e(d.td,{children:"Close modal on ESC key"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"closeOnBackdrop"})}),e(d.td,{children:e(d.code,{children:"boolean"})}),e(d.td,{children:e(d.code,{children:"true"})}),e(d.td,{children:"Close modal on backdrop click"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"modalSize"})}),e(d.td,{children:e(d.code,{children:"ModalSize"})}),e(d.td,{children:e(d.code,{children:'"auto"'})}),e(d.td,{children:"Maximum modal dimensions"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"animationDuration"})}),e(d.td,{children:e(d.code,{children:"number"})}),e(d.td,{children:e(d.code,{children:"200"})}),e(d.td,{children:"Animation duration in milliseconds"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"enableKeyboard"})}),e(d.td,{children:e(d.code,{children:"boolean"})}),e(d.td,{children:e(d.code,{children:"true"})}),e(d.td,{children:"Enable keyboard navigation"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"preventScroll"})}),e(d.td,{children:e(d.code,{children:"boolean"})}),e(d.td,{children:e(d.code,{children:"true"})}),e(d.td,{children:"Lock body scroll when modal open"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"customBackdrop"})}),e(d.td,{children:e(d.code,{children:"CSSProperties"})}),e(d.td,{children:e(d.code,{children:"undefined"})}),e(d.td,{children:"Custom backdrop styles"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"modalClassName"})}),e(d.td,{children:e(d.code,{children:"string"})}),e(d.td,{children:e(d.code,{children:"undefined"})}),e(d.td,{children:"CSS class for modal container"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"captionClassName"})}),e(d.td,{children:e(d.code,{children:"string"})}),e(d.td,{children:e(d.code,{children:"undefined"})}),e(d.td,{children:"CSS class for caption"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"onOpen"})}),e(d.td,{children:e(d.code,{children:"() => void"})}),e(d.td,{children:e(d.code,{children:"undefined"})}),e(d.td,{children:"Callback when modal opens"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"onClose"})}),e(d.td,{children:e(d.code,{children:"() => void"})}),e(d.td,{children:e(d.code,{children:"undefined"})}),e(d.td,{children:"Callback when modal closes"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"onAnimationStart"})}),e(d.td,{children:e(d.code,{children:"() => void"})}),e(d.td,{children:e(d.code,{children:"undefined"})}),e(d.td,{children:"Callback when animation starts"})]}),i(d.tr,{children:[e(d.td,{children:e(d.code,{children:"onAnimationEnd"})}),e(d.td,{children:e(d.code,{children:"() => void"})}),e(d.td,{children:e(d.code,{children:"undefined"})}),e(d.td,{children:"Callback when animation ends"})]})]})]}),"\n",e(d.h3,{children:"Types"}),"\n",e(d.pre,{children:e(d.code,{className:"language-tsx",children:'// Animation types\ntype ModalAnimationType = \n | "scaleFade"\n | "slideUp" \n | "slideDown"\n | "slideLeft"\n | "slideRight"\n | "springPop"\n | "zoomBounce"\n | "rotateIn"\n | "flipIn";\n\n// Backdrop types \ntype BackdropType = \n | "dim"\n | "blur" \n | "glass"\n | "dark"\n | "none";\n\n// Modal sizes\ntype ModalSize = \n | "sm" // 400x300px max\n | "md" // 600x450px max \n | "lg" // 800x600px max\n | "xl" // 1200x800px max\n | "full" // 95% viewport\n | "auto"; // Responsive\n'})}),"\n",e(d.h2,{children:"Performance Tips"}),"\n",i(d.ul,{children:["\n",i(d.li,{children:["Use ",e(d.code,{children:'loading="lazy"'})," for images below the fold"]}),"\n",i(d.li,{children:["Consider ",e(d.code,{children:"modalSize"})," to prevent oversized modals on mobile"]}),"\n",i(d.li,{children:["Use shorter ",e(d.code,{children:"animationDuration"})," (150-250ms) for better perceived performance"]}),"\n",i(d.li,{children:["Enable ",e(d.code,{children:"preventScroll"})," to prevent layout shifts"]}),"\n",i(d.li,{children:["Use ",e(d.code,{children:'backdrop="none"'})," if you have custom overlay handling"]}),"\n"]}),"\n",e(d.h2,{children:"Browser Support"}),"\n",i(d.ul,{children:["\n",i(d.li,{children:[e(d.strong,{children:"Modern Browsers"}),": Full support (Chrome 88+, Firefox 87+, Safari 14+)"]}),"\n",i(d.li,{children:[e(d.strong,{children:"Focus Management"}),": Supported in all modern browsers"]}),"\n",i(d.li,{children:[e(d.strong,{children:"Backdrop Filter"}),": Graceful degradation in older browsers"]}),"\n",i(d.li,{children:[e(d.strong,{children:"CSS Custom Properties"}),": Fallback values provided"]}),"\n"]}),"\n",e(d.hr,{}),"\n",e(d.p,{children:i(d.em,{children:["Need help with implementation? Check our ",e(d.a,{href:"https://github.com/poyrazavsever/reactive-image/tree/main/examples",children:"examples repository"})," or ",e(d.a,{href:"https://github.com/poyrazavsever/reactive-image/issues",children:"open an issue"}),"."]})})]})}return{default:function(n={}){const{wrapper:i}=n.components||{};return i?e(i,{...n,children:e(_createMdxContent,{...n})}):_createMdxContent(n)}};