react-image-previewer/dist/ui/index.mjs

An exquisite React photo preview component

import{b as m,c as p,d as h,f as v}from"../chunk-6RQQT5UF.mjs";import D from"styled-components";import"react";import{jsx as s,jsxs as _}from"react/jsx-runtime";var G=typeof D.default=="undefined"?D:D.default,Rt=t=>s(J,p(m({},t),{viewBox:"0 0 1024 1024",focusable:"false",width:"1em",height:"1em",fill:"currentColor",children:s("path",{d:"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"})})),b=t=>s("svg",p(m({},t),{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"currentColor",children:s("path",{d:"M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8c-16.4 12.8-16.4 37.5 0 50.3l450.8 352.1c5.3 4.1 12.9 0.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"})})),C=t=>s("svg",p(m({},t),{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"currentColor",children:s("path",{d:"M765.7 486.8L314.9 134.7c-5.3-4.1-12.9-0.4-12.9 6.3v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1c16.4-12.8 16.4-37.6 0-50.4z"})})),N=t=>s("svg",p(m({},t),{viewBox:"0 0 1024 1024",focusable:"false",width:"1em",height:"1em",fill:"currentColor",children:s("path",{d:"M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"})})),V=t=>s("svg",p(m({},t),{viewBox:"0 0 1024 1024",focusable:"false",width:"1em",height:"1em",fill:"currentColor",children:s("path",{d:"M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"})})),A=t=>_("svg",p(m({},t),{viewBox:"0 0 1024 1024",focusable:"false",width:"1em",height:"1em",fill:"currentColor",children:[s("path",{d:"M316 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8zM512 622c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39zM512 482c22.1 0 40-17.9 40-39 0-23.1-17.9-41-40-41s-40 17.9-40 41c0 21.1 17.9 39 40 39z"}),s("path",{d:"M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z"}),s("path",{d:"M648 672h60c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v304c0 4.4 3.6 8 8 8z"})]})),H=t=>_("svg",p(m({},t),{viewBox:"0 0 1024 1024",focusable:"false",width:"1em",height:"1em",fill:"currentColor",children:[s("path",{d:"M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H188V494h440v326z"}),s("path",{d:"M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-0.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7 0.4 12.6-6.1v-63.9c12.9 0.1 25.9 0.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8 11 40.7 14 82.7 8.9 124.8-0.7 5.4-1.4 10.8-2.4 16.1h74.9c14.8-103.6-11.3-213-81-302.3z"})]})),Z=t=>_("svg",p(m({},t),{viewBox:"0 0 1024 1024",focusable:"false",width:"1em",height:"1em",fill:"currentColor",children:[s("path",{d:"M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-0.4-12.6 6.1l-0.2 64c-118.6 0.5-235.8 53.4-314.6 154.2-69.6 89.2-95.7 198.6-81.1 302.4h74.9c-0.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"}),s("path",{d:"M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32z m-44 402H396V494h440v326z"})]})),I=t=>s("svg",p(m({},t),{viewBox:"0 0 1024 1024",focusable:"false",width:"1em",height:"1em",fill:"currentColor",children:s("path",{d:"M488.5 784.35l-155.8-155.9c-13.4-13.5-13.4-35.4 0.1-48.9 13.4-13.5 35.3-13.5 48.8 0l96.9 96.9V98.649c0-19.1 15.5-34.6 34.6-34.6 19.101 0 34.601 15.5 34.601 34.6V676.45l96.899-96.9c6.5-6.5 15.2-10.1 24.4-10.1s17.9 3.6 24.4 10.1c13.5 13.5 13.5 35.4 0 48.9l-155.9 155.9c-6.8 6.7-15.6 10.101-24.5 10.101s-17.8-3.401-24.5-10.101z m436.9-143.9c19.1 0 34.6 15.5 34.6 34.5v222.9c0 34.2-27.8 62.101-62.1 62.101H126.1c-34.2 0-62.1-27.8-62.1-62.101v-222.9c0-19 15.4-34.601 34.5-34.601s34.6 15.5 34.6 34.601v195.5c0 11.399 9.3 20.6 20.6 20.6h716.5c11.399 0 20.6-9.3 20.6-20.6v-195.4c0-19.1 15.5-34.6 34.6-34.6z"})})),$=t=>s("svg",p(m({},t),{viewBox:"0 0 1024 1024",focusable:"false",width:"1em",height:"1em",fill:"currentColor",children:s("path",{d:"M893.9 826c18.699 18.8 18.699 49.2 0 67.9-18.801 18.699-49.2 18.699-67.9 0l-314-314-314 314c-18.8 18.699-49.2 18.699-67.9 0-18.7-18.801-18.7-49.2 0-67.9l314-314-314-314c-18.7-18.8-18.7-49.2 0-67.9 18.8-18.699 49.2-18.699 67.9 0l314 314 314-314c18.8-18.699 49.2-18.699 67.9 0 18.699 18.801 18.699 49.2 0 67.9l-314 314 314 314z"})})),J=G("svg").withConfig({componentId:"sc-797zoe-0"})({"@keyframes spin":{to:{transform:"rotate(360deg)"}},animation:"spin 1s linear infinite"});import z from"styled-components";import{jsx as F}from"react/jsx-runtime";var K=typeof z.default=="undefined"?z:z.default,Nt=n=>{var o=n,{visible:t=!0,children:e}=o,r=h(o,["visible","children"]);return F(Q,p(m({},r),{$_css:[{position:"absolute",top:"1.25rem",right:"0.5rem",zIndex:"50",cursor:"pointer",padding:"0.5rem",fontSize:"16px","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))",opacity:"1",transitionProperty:"opacity",transitionTimingFunction:"cubic-bezier(0, 0, 0.2, 1)",transitionDuration:"150ms",transitionDelay:"200ms",":hover":{opacity:"1"},"@media (min-width: 640px)":{right:"0.75rem",padding:"0.625rem",fontSize:"20px",opacity:"0.9"},"@media (min-width: 768px)":{right:"1rem",opacity:"0.75"},"@media (min-width: 1024px)":{right:"1.25rem"}},!t&&{opacity:"0"}],children:e!=null?e:F($,{})}))},Q=K("div").withConfig({componentId:"sc-16guxl7-0"})(["",""],t=>t.$_css);import R from"styled-components";import L from"styled-components";import"react";var S=t=>{let e=document.createElement("a");e.target="_blank",e.href=t,e.download=t,e.click()};import{jsx as a,jsxs as dt}from"react/jsx-runtime";var Pt=typeof R.default=="undefined"?R:R.default,x=typeof L.default=="undefined"?L:L.default,U=x.div.withConfig({componentId:"sc-ooqigt-0"})({pointerEvents:"auto",display:"flex",alignItems:"center",borderRadius:"0.375rem","--tw-bg-opacity":"1",backgroundColor:"rgb(31 41 55 / var(--tw-bg-opacity))",paddingLeft:"0.5rem",paddingRight:"0.5rem"}),g=x.button.withConfig({componentId:"sc-ooqigt-1"})({marginTop:"0.5rem",marginBottom:"0.5rem",marginLeft:"0.375rem",marginRight:"0.375rem",cursor:"pointer",borderRadius:"0.25rem",padding:"0.25rem",fontSize:"20px",":hover":{"--tw-bg-opacity":"1",backgroundColor:"rgb(75 85 99 / var(--tw-bg-opacity))"},":disabled":{cursor:"not-allowed","--tw-text-opacity":"1",color:"rgb(75 85 99 / var(--tw-text-opacity))"},":disabled:hover":{backgroundColor:"transparent"}}),P=x(g).withConfig({componentId:"sc-ooqigt-2"})({marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",cursor:"default",fontSize:"16px",":hover":{backgroundColor:"transparent"}}),X=x.div.withConfig({componentId:"sc-ooqigt-3"})({marginLeft:"0.375rem",marginRight:"0.375rem",display:"flex",height:"1rem",alignItems:"center",justifyContent:"center",borderLeftWidth:"1px","--tw-border-opacity":"1",borderColor:"rgb(75 85 99 / var(--tw-border-opacity))"}),E=(t,e=!0)=>t<.5||!e&&t===.5?.05:t<1.5||!e&&t===1.5?.1:t<3||!e&&t===3?.25:.5,Y=({index:t,onIndexChange:e,images:r,className:n,children:o})=>{let c=r.length,i=t===0;return a(g,{disabled:i,onClick:()=>{e(i?c-1:t-1)},className:n,children:o!=null?o:a(b,{})})},tt=({index:t,images:e,className:r,children:n})=>{let o=e.length;return a(P,{className:r,children:n!=null?n:`${t+1}/${o}`})},ot=({index:t,onIndexChange:e,images:r,className:n,children:o})=>{let c=r.length,i=t===c-1;return a(g,{disabled:i,onClick:()=>{e(i?0:t+1)},className:n,children:o!=null?o:a(C,{})})},et=({className:t})=>a(X,{className:t}),rt=({scale:t,onScale:e,loading:r,className:n,children:o})=>a(g,{disabled:r,onClick:()=>{e(t-E(t,!1))},className:n,children:o!=null?o:a(V,{})}),nt=({scale:t,className:e,children:r})=>a(P,{className:e,children:r!=null?r:`${Math.round(t*100)}%`}),it=({scale:t,onScale:e,loading:r,className:n,children:o})=>a(g,{disabled:r,onClick:()=>{e(t+E(t))},className:n,children:o!=null?o:a(N,{})}),at=({onScale:t,loading:e,className:r,children:n})=>a(g,{disabled:e,onClick:()=>{t(1)},className:r,children:n!=null?n:a(A,{})}),st=({images:t,index:e,loading:r,className:n,children:o})=>a(g,{disabled:r,onClick:()=>{let{src:i}=t[e];!i||S(i)},className:n,children:o!=null?o:a(I,{})}),ct=({rotate:t,onRotate:e,loading:r,className:n,children:o})=>a(g,{disabled:r,onClick:()=>{e(t-90)},className:n,children:o!=null?o:a(H,{})}),mt=({rotate:t,onRotate:e,loading:r,className:n,children:o})=>a(g,{disabled:r,onClick:()=>{e(t+90)},className:n,children:o!=null?o:a(Z,{})}),pt={arrowLeft:Y,countText:tt,arrowRight:ot,split:et,zoomOut:rt,scaleCount:nt,zoomIn:it,oneToOne:at,download:st,rotateLeft:ct,rotateRight:mt},Kt=o=>{var c=o,{items:t=["arrowLeft","countText","arrowRight","split","zoomOut","scaleCount","zoomIn","oneToOne","split","download","split","rotateLeft","rotateRight"],children:e,className:r}=c,n=h(c,["items","children","className"]);return dt(lt,{className:r,$_css:[{pointerEvents:"none",position:"absolute",bottom:"0px",left:"0px",right:"0px",zIndex:"30",marginTop:"1.25rem",marginBottom:"2rem",display:"flex",cursor:"pointer",userSelect:"none",alignItems:"center",justifyContent:"center","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))",opacity:"1",transitionProperty:"opacity",transitionTimingFunction:"linear",transitionDuration:"150ms",transitionDelay:"200ms",":hover":{opacity:"1"}},!n.overlayVisible&&{opacity:"0"}],children:[a(U,{children:t.map((i,f)=>{if(typeof i=="string"){let w=pt[i];if(!w)return null;let u=i;return u==="split"&&(u=`split-${f}`),a(w,m({},n),u)}let d=i.component;return a(d,m({},n),i.key)})}),e]})},lt=x("div").withConfig({componentId:"sc-ooqigt-4"})(["",""],t=>t.$_css);import k from"styled-components";import T from"styled-components";import B from"styled-components";import M from"styled-components";import O from"styled-components";import{useMemo as j}from"react";import{Fragment as St,jsx as l}from"react/jsx-runtime";var oo=typeof k.default=="undefined"?k:k.default,ro=typeof T.default=="undefined"?T:T.default,io=typeof B.default=="undefined"?B:B.default,so=typeof M.default=="undefined"?M:M.default,y=typeof O.default=="undefined"?O:O.default,W=y.div.withConfig({componentId:"sc-3by9fo-0"})(({visible:t})=>[{position:"absolute",top:"0px",bottom:"0px",zIndex:"50",margin:"auto",display:"flex",height:"fit-content",width:"fit-content",cursor:"pointer",userSelect:"none",alignItems:"center",justifyContent:"center",borderRadius:"0.375rem",backgroundColor:"rgb(31 41 55 / 0.9)",padding:"0.5rem",fontSize:"16px","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))",opacity:"1",transitionProperty:"opacity",transitionTimingFunction:"linear",transitionDuration:"150ms",transitionDelay:"200ms",":hover":{opacity:"1"},"@media (min-width: 640px)":{backgroundColor:"rgb(31 41 55 / 0.6)",padding:"0.625rem",fontSize:"20px",opacity:"0.9"},"@media (min-width: 768px)":{backgroundColor:"rgb(31 41 55 / 0.3)",opacity:"0.75"}},!t&&{opacity:"0"}]),gt=y(W).withConfig({componentId:"sc-3by9fo-1"})({left:"0.5rem","@media (min-width: 640px)":{left:"0.75rem"},"@media (min-width: 768px)":{left:"1rem"},"@media (min-width: 1024px)":{left:"1.25rem"}}),ft=y(W).withConfig({componentId:"sc-3by9fo-2"})({right:"0.5rem","@media (min-width: 640px)":{right:"0.75rem"},"@media (min-width: 768px)":{right:"1rem"},"@media (min-width: 1024px)":{right:"1.25rem"}}),ut=({index:t,images:e,loop:r,onIndexChange:n,overlayVisible:o,className:c,children:i})=>{let f=e.length,d=t===0,w=()=>{n(d?f-1:t-1)},u=j(()=>v||!o?!1:r?!0:!d,[t,f,r,d]);return l(gt,{visible:u,onClick:w,className:c,children:i!=null?i:l(b,{})})},yt=({index:t,images:e,loop:r,onIndexChange:n,overlayVisible:o,className:c,children:i})=>{let f=e.length,d=t===f-1,w=()=>{n(d?0:t+1)},u=j(()=>v||!o?!1:r?!0:!d,[d,v,r,o]);return l(ft,{visible:u,onClick:w,className:c,children:i!=null?i:l(C,{})})},wt=({index:t,images:e,className:r,children:n})=>{let o=e.length;return l(vt,{className:r,children:l(bt,{children:n!=null?n:`${t+1}/${o}`})})},ht=({loading:t,images:e,index:r,className:n,children:o})=>l(Ct,{className:n,children:l(It,{disabled:t,onClick:()=>{let{src:i}=e[r];!i||S(i)},children:o!=null?o:l(I,{})})}),xt={arrowLeft:ut,arrowRight:yt,countText:wt,download:ht},uo=n=>{var o=n,{children:t,items:e=["arrowLeft","arrowRight","countText","download"]}=o,r=h(o,["children","items"]);return t||l(St,{children:e.map(c=>{let i=xt[c];return i?l(i,m({},r)):null})})},vt=y("div").withConfig({componentId:"sc-3by9fo-3"})({position:"absolute",bottom:"1.25rem",left:"0.5rem",zIndex:"30",display:"flex",alignItems:"center",justifyContent:"center","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))","@media (min-width: 640px)":{left:"0.75rem"},"@media (min-width: 768px)":{left:"1rem"},"@media (min-width: 1024px)":{left:"1.25rem"}}),bt=y("label").withConfig({componentId:"sc-3by9fo-4"})({marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",cursor:"default",borderRadius:"0.375rem",backgroundColor:"rgb(31 41 55 / 0.9)",paddingLeft:"0.5rem",paddingRight:"0.5rem",paddingTop:"0.125rem",paddingBottom:"0.125rem",fontSize:"16px",opacity:"1",transitionProperty:"opacity",transitionTimingFunction:"linear",transitionDuration:"150ms",transitionDelay:"200ms",":hover":{opacity:"1"},":disabled":{cursor:"not-allowed","--tw-text-opacity":"1",color:"rgb(75 85 99 / var(--tw-text-opacity))"},"@media (min-width: 640px)":{backgroundColor:"rgb(31 41 55 / 0.6)",paddingLeft:"0.625rem",paddingRight:"0.625rem",paddingTop:"0.25rem",paddingBottom:"0.25rem",fontSize:"20px",opacity:"0.9"},"@media (min-width: 768px)":{backgroundColor:"rgb(31 41 55 / 0.3)",opacity:"0.75"}}),Ct=y("div").withConfig({componentId:"sc-3by9fo-5"})({position:"absolute",bottom:"1.25rem",right:"0.5rem",zIndex:"30",display:"flex",alignItems:"center",justifyContent:"center",gap:"0.5rem","--tw-text-opacity":"1",color:"rgb(255 255 255 / var(--tw-text-opacity))","@media (min-width: 640px)":{right:"0.75rem"},"@media (min-width: 768px)":{right:"1rem"},"@media (min-width: 1024px)":{right:"1.25rem"}}),It=y("button").withConfig({componentId:"sc-3by9fo-6"})({margin:"0px",cursor:"pointer",borderRadius:"0.375rem",backgroundColor:"rgb(31 41 55 / 0.9)",padding:"0.5rem",fontSize:"16px",opacity:"1",transitionProperty:"opacity",transitionTimingFunction:"linear",transitionDuration:"150ms",transitionDelay:"200ms",":hover":{opacity:"1"},":disabled":{cursor:"not-allowed","--tw-text-opacity":"1",color:"rgb(75 85 99 / var(--tw-text-opacity))"},":disabled:hover":{backgroundColor:"transparent"},"@media (min-width: 640px)":{backgroundColor:"rgb(31 41 55 / 0.6)",padding:"0.625rem",fontSize:"20px",opacity:"0.9"},"@media (min-width: 768px)":{backgroundColor:"rgb(31 41 55 / 0.3)",opacity:"0.75"}});export{b as ArrowLeftIcon,C as ArrowRightIcon,Nt as CloseButton,$ as CloseIcon,I as DownloadIcon,Y as DragArrowLeft,ot as DragArrowRight,tt as DragCountText,st as DragDownload,at as DragOneToOne,ct as DragRotateLeft,mt as DragRotateRight,nt as DragScaleCount,et as DragSplit,g as DragStyledItem,P as DragStyledLabel,X as DragStyledSplit,Kt as DragToolbar,pt as DragToolbarItemDefaultComponent,it as DragZoomIn,rt as DragZoomOut,Rt as LoadingIcon,A as OneToOneIcon,H as RotateLeftIcon,Z as RotateRightIcon,ut as SlideArrowLeft,yt as SlideArrowRight,wt as SlideCountText,ht as SlideDownload,uo as SlideToolbar,xt as SlideToolbarItemDefaultComponent,N as ZoomInIcon,V as ZoomOutIcon};
//# sourceMappingURL=index.mjs.map