@source-bug/magic-design-react/dist/umd/index.js

A component library that can achieve magic effects

var __vite_style__=document.createElement("style");__vite_style__.innerHTML=`._element-2d_tm8h5_1,._element-3d_tm8h5_1,._corner-swiper_tm8h5_1{transform-style:preserve-3d}._element-2d_tm8h5_1,._element-3d_tm8h5_1,._swiper-container_tm8h5_5{transition:transform .36s ease,transform-origin .36s ease,width .36s ease,-webkit-clip-path .36s ease;transition:transform .36s ease,clip-path .36s ease,transform-origin .36s ease,width .36s ease;transition:transform .36s ease,clip-path .36s ease,transform-origin .36s ease,width .36s ease,-webkit-clip-path .36s ease}._corner-swiper_tm8h5_1{flex-shrink:0;overflow:visible}._element-2d_tm8h5_1{transform-origin:var(--position) var(--position) 0}._element-3d_tm8h5_1{display:-webkit-box;width:var(--position);transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) translate(1px);transform-origin:right}._element-2d_tm8h5_1{-webkit-clip-path:polygon(var(--position) 0,100% 0,100% 100%,var(--position) 100%);clip-path:polygon(var(--position) 0,100% 0,100% 100%,var(--position) 100%);transform:rotateX(var(--rotate-x))}@-webkit-keyframes _move_18iyn_1{50%{transform:translate(-10px)}}@keyframes _move_18iyn_1{50%{transform:translate(-10px)}}._cloud_18iyn_6{position:absolute;top:5%;left:70%;width:60px;height:20px;background-color:#81d4fa;border-radius:10px;box-shadow:1px 1px 30px #0097a7;-webkit-animation:_move_18iyn_1 3s infinite linear;animation:_move_18iyn_1 3s infinite linear}._cloudx_18iyn_18{position:absolute;top:23%;left:55%;width:60px;height:20px;background-color:#81d4fa;border-radius:10px;-webkit-animation:_move_18iyn_1 3s infinite linear;animation:_move_18iyn_1 3s infinite linear}@-webkit-keyframes _meteor_w4lpv_1{10%{opacity:1}80%{top:75%;left:10%;opacity:0}}@keyframes _meteor_w4lpv_1{10%{opacity:1}80%{top:75%;left:10%;opacity:0}}._night_w4lpv_11 li{position:absolute;width:3px;height:3px;list-style:none;background-color:#fff;border-radius:100%;transform:rotate(45deg)}._night_w4lpv_11 li:nth-child(1){top:30%;left:65%}._night_w4lpv_11 li:nth-child(2){top:35%;left:53%}._night_w4lpv_11 li:nth-child(3){top:20%;left:75%;width:2px;height:2px;opacity:0;-webkit-animation:_meteor_w4lpv_1 1.5s infinite linear;animation:_meteor_w4lpv_1 1.5s infinite linear;-webkit-animation-delay:.6s;animation-delay:.6s}._night_w4lpv_11 li:nth-child(4){top:5%;left:50%}._night_w4lpv_11 li:nth-child(5){top:20%;left:55%;width:1px;height:15px;opacity:0;-webkit-animation:_meteor_w4lpv_1 1.5s infinite linear;animation:_meteor_w4lpv_1 1.5s infinite linear}._moon_w4lpv_50{position:absolute;top:-10%;left:65%;width:70px;height:70px;background:rgb(255,241,118);border-radius:100%;box-shadow:1px 1px 30px #e0e0e0}._spot1_w4lpv_61{position:absolute;top:0%;left:85%;width:10px;height:10px;background-color:#777;border-radius:100%}._spot2_w4lpv_71{position:absolute;top:30%;left:75%;width:5px;height:5px;background-color:#777;border-radius:100%}@-webkit-keyframes _rainy-flash_1dkxs_1{48%{background-color:#607d8b}50%{background-color:#fff}55%{background-color:#607d8b}57%{background-color:#fff}}@keyframes _rainy-flash_1dkxs_1{48%{background-color:#607d8b}50%{background-color:#fff}55%{background-color:#607d8b}57%{background-color:#fff}}@-webkit-keyframes _fall_1dkxs_1{10%{opacity:.8}50%{opacity:1;transform:translate(-10px,30px)}to{transform:translate(-25px,70px)}}@keyframes _fall_1dkxs_1{10%{opacity:.8}50%{opacity:1;transform:translate(-10px,30px)}to{transform:translate(-25px,70px)}}._rainy_1dkxs_27 li{position:absolute;width:2px;height:7px;list-style:none;background-color:#eee;border-radius:10%;opacity:0;transform:rotate(25deg);-webkit-animation:_fall_1dkxs_1 3s infinite linear;animation:_fall_1dkxs_1 3s infinite linear}._rainy_1dkxs_27 li:nth-child(1){top:10%;left:95%}._rainy_1dkxs_27 li:nth-child(2){top:5%;left:83%;-webkit-animation-delay:.3s;animation-delay:.3s}._rainy_1dkxs_27 li:nth-child(3){top:4%;left:87%;-webkit-animation-delay:.6s;animation-delay:.6s}._rainy_1dkxs_27 li:nth-child(4){top:15%;left:70%;-webkit-animation-delay:1s;animation-delay:1s}._rainy_1dkxs_27 li:nth-child(5){top:10%;left:75%}._rainy-cloud_1dkxs_62{position:absolute;top:5%;left:60%;width:60px;height:20px;background-color:#597180;border-radius:10px;box-shadow:1px 1px 30px #4d636f;-webkit-animation:_rainy-flash_1dkxs_1 1.5s infinite linear;animation:_rainy-flash_1dkxs_1 1.5s infinite linear}@-webkit-keyframes _fall_yom2l_1{10%{opacity:.8}50%{opacity:1;transform:translate(-10px,30px)}to{transform:translate(-25px,70px)}}@keyframes _fall_yom2l_1{10%{opacity:.8}50%{opacity:1;transform:translate(-10px,30px)}to{transform:translate(-25px,70px)}}._snowy_yom2l_13 li{position:absolute;width:5px;height:5px;list-style:none;background-color:#777;border-radius:100%;box-shadow:1px 1px 30px #555;opacity:0;-webkit-animation:_fall_yom2l_1 3s infinite linear;animation:_fall_yom2l_1 3s infinite linear}._snowy_yom2l_13 li:nth-child(1){top:0%;left:100%}._snowy_yom2l_13 li:nth-child(2){top:5%;left:90%}._snowy_yom2l_13 li:nth-child(3){top:-10%;left:80%;-webkit-animation-delay:2s;animation-delay:2s}._snowy_yom2l_13 li:nth-child(4){top:10%;left:100%;-webkit-animation-delay:2s;animation-delay:2s}._snowy_yom2l_13 li:nth-child(5){top:20%;left:80%;-webkit-animation-delay:.5s;animation-delay:.5s}._snowy_yom2l_13 li:nth-child(6){top:35%;left:70%;background-color:#bbb;-webkit-animation-delay:.5s;animation-delay:.5s}._snowy_yom2l_13 li:nth-child(7){top:23%;left:60%;background-color:#bbb;-webkit-animation-delay:.8s;animation-delay:.8s}._snowy_yom2l_13 li:nth-child(8){top:5%;left:70%;background-color:#bbb;-webkit-animation-delay:.8s;animation-delay:.8s}._snowe_yom2l_66{position:absolute;top:58%;left:42%;width:40px;height:40px;background-color:#ddd;border-radius:60px}._snowex_yom2l_76{position:absolute;top:50%;left:50%;width:15px;height:15px;background-color:#bbb;border-radius:15px}._stick_yom2l_86{position:absolute;top:60%;left:40%;z-index:-1;width:3px;height:15px;background-color:#333;transform:rotate(-45deg)}._stick2_yom2l_97{position:absolute;top:60%;left:70%;z-index:-1;width:3px;height:15px;background-color:#333;transform:rotate(45deg)}@-webkit-keyframes _inex_14k97_1{50%{opacity:.4}60%{opacity:1}}@keyframes _inex_14k97_1{50%{opacity:.4}60%{opacity:1}}._sun_14k97_9{position:absolute;top:-10%;left:65%;width:50px;height:50px;background:linear-gradient(to bottom left,rgb(255,235,59) 0%,rgb(249,168,37) 90%);border-radius:100%;box-shadow:1px 1px 30px #ffa000;-webkit-animation:_inex_14k97_1 3s infinite linear;animation:_inex_14k97_1 3s infinite linear}._sunx_14k97_21{position:absolute;top:30%;left:45%;width:10px;height:10px;background-color:#fff;border-radius:100%;opacity:.2}._weather-container_r2qa2_1{position:relative;z-index:1;width:150px;height:150px;border-radius:40%;transition:background-color var(--animate-duration) ease,box-shadow var(--animate-duration) ease}._weather-sunny_r2qa2_10{background:linear-gradient(to top right,rgba(255,87,34,0),rgb(251,140,0));background-color:#ff5722;box-shadow:1px 1px 30px #ff6e00}._weather-cloudy_r2qa2_16{background:linear-gradient(to top right,rgba(63,81,181,0),rgb(3,155,229) 40%);background-color:#3f51b5;box-shadow:1px 1px 30px #0277bd}._weather-rainy_r2qa2_22{background:#91cb56 linear-gradient(to top right,rgba(145,203,86,0),#43c1d4 50%);background-color:#91cb56;box-shadow:1px 1px 30px #43c0d4}._weather-snowy_r2qa2_28{background:linear-gradient(to top right,rgba(117,117,117,0),rgb(33,33,33) 90%);background-color:#757575;box-shadow:1px 1px 30px #212121}._weather-nighty_r2qa2_34{background:linear-gradient(to bottom right,rgba(63,81,181,0),rgb(171,71,188) 70%);background-color:#3f51b5;box-shadow:1px 1px 30px #512da8}
(function(a,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],r):(a=typeof globalThis!="undefined"?globalThis:a||self,r(a.magicDesign={},a.React))})(this,function(a,r){"use strict";`;document.head.appendChild(__vite_style__);function W(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var h=W(r),y={"element-2d":"_element-2d_tm8h5_1",element2d:"_element-2d_tm8h5_1","element-3d":"_element-3d_tm8h5_1",element3d:"_element-3d_tm8h5_1","corner-swiper":"_corner-swiper_tm8h5_1",cornerSwiper:"_corner-swiper_tm8h5_1","swiper-container":"_swiper-container_tm8h5_5",swiperContainer:"_swiper-container_tm8h5_5"},g={exports:{}},f={};/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var z=h.default,M=Symbol.for("react.element"),D=Symbol.for("react.fragment"),U=Object.prototype.hasOwnProperty,Y=z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,B={key:!0,ref:!0,__self:!0,__source:!0};function $(t,n,i){var o,l={},d=null,_=null;i!==void 0&&(d=""+i),n.key!==void 0&&(d=""+n.key),n.ref!==void 0&&(_=n.ref);for(o in n)U.call(n,o)&&!B.hasOwnProperty(o)&&(l[o]=n[o]);if(t&&t.defaultProps)for(o in n=t.defaultProps,n)l[o]===void 0&&(l[o]=n[o]);return{$$typeof:M,type:t,key:d,ref:_,props:l,_owner:Y.current}}f.Fragment=D,f.jsx=$,f.jsxs=$,g.exports=f;const e=g.exports.jsx,s=g.exports.jsxs,H=270,J=({current:t,children:n,className:i="",position:o=.2,rotateX:l="0deg",rotateY:d="-45deg",defaultCurrent:_=0,defaultMargin:u=!0,perspective:x="1000px",perspectiveOriginX:b="50%",perspectiveOriginY:k="50%"})=>{const[Q]=r.useState(_),V=t!=null?t:Q,v=r.useMemo(()=>{const A=Array.isArray(n)?n:[n];return u?A.map(N=>h.default.cloneElement(N,{...N.props,className:`${N.props.className||""} mg-mr-5`})):A},[n,u]),p=e("div",{className:`mg-w-full mg-h-full mg-flex-row mg-flex mg-flex-nowrap ${i}`,children:v}),L=V/v.length,F=`${(o+L)*100}%`,Z=h.default.cloneElement(p,{...p.props,className:`mg-absolute mg-top-0 mg-left-0 mg-overflow-hidden ${y["element-3d"]} ${p.props.className}`,style:{"--position":F,"--rotate-x":l,"--rotate-y":d}}),ee=h.default.cloneElement(p,{...p.props,className:` mg-relative ${y["element-2d"]} ${p.props.className}`,style:{"--position":F,"--rotate-x":l}});return e("div",{className:`${y["swiper-container"]}`,style:{transform:`translatex(${-L*H*v.length}px)`},children:s("div",{className:`mg-w-full mg-h-full mg-relative ${y["corner-swiper"]}`,style:{perspective:x,perspectiveOrigin:`${b} ${k}`},children:[Z,ee]})})},S=({children:t,className:n="",...i})=>e("div",{className:`mg-w-full mg-h-full ${n}`,...i,children:t});S.displayName="SwiperItem";var C={cloud:"_cloud_18iyn_6",move:"_move_18iyn_1",cloudx:"_cloudx_18iyn_18"};const q=({className:t=""})=>s("div",{className:t,children:[e("div",{className:C.cloud}),e("div",{className:C.cloudx})]});var w={night:"_night_w4lpv_11",meteor:"_meteor_w4lpv_1",moon:"_moon_w4lpv_50",spot1:"_spot1_w4lpv_61",spot2:"_spot2_w4lpv_71"};const E=({className:t=""})=>e("div",{className:t,children:s("div",{className:w.night,children:[e("span",{className:w.moon}),e("span",{className:w.spot1}),e("span",{className:w.spot2}),s("ul",{children:[e("li",{}),e("li",{}),e("li",{}),e("li",{}),e("li",{})]})]})});var O={rainy:"_rainy_1dkxs_27",fall:"_fall_1dkxs_1","rainy-cloud":"_rainy-cloud_1dkxs_62",rainyCloud:"_rainy-cloud_1dkxs_62","rainy-flash":"_rainy-flash_1dkxs_1",rainyFlash:"_rainy-flash_1dkxs_1"};const j=({className:t=""})=>s("div",{className:`${O.rainy} ${t}`,children:[s("ul",{children:[e("li",{}),e("li",{}),e("li",{}),e("li",{}),e("li",{})]}),e("span",{className:O["rainy-cloud"]})]});var m={snowy:"_snowy_yom2l_13",fall:"_fall_yom2l_1",snowe:"_snowe_yom2l_66",snowex:"_snowex_yom2l_76",stick:"_stick_yom2l_86",stick2:"_stick2_yom2l_97"};const I=({className:t=""})=>s("div",{className:`${m.snowy} ${t}`,children:[s("ul",{children:[e("li",{}),e("li",{}),e("li",{}),e("li",{}),e("li",{}),e("li",{}),e("li",{}),e("li",{})]}),e("span",{className:m.snowe}),e("span",{className:m.snowex}),e("span",{className:m.stick}),e("span",{className:m.stick2})]});var R={sun:"_sun_14k97_9",inex:"_inex_14k97_1",sunx:"_sunx_14k97_21"};const T=({className:t})=>s("div",{className:t,children:[e("div",{className:R.sun}),e("div",{className:R.sunx})]});function X(t){const n=r.useRef();return r.useEffect(()=>{n.current=t},[t]),n.current}const G=t=>{const[n,i]=r.useState(t);return[n,o=>{if(o instanceof Object){i({...n,...o});return}i(o)}]};var c={"weather-container":"_weather-container_r2qa2_1",weatherContainer:"_weather-container_r2qa2_1","weather-sunny":"_weather-sunny_r2qa2_10",weatherSunny:"_weather-sunny_r2qa2_10","weather-cloudy":"_weather-cloudy_r2qa2_16",weatherCloudy:"_weather-cloudy_r2qa2_16","weather-rainy":"_weather-rainy_r2qa2_22",weatherRainy:"_weather-rainy_r2qa2_22","weather-snowy":"_weather-snowy_r2qa2_28",weatherSnowy:"_weather-snowy_r2qa2_28","weather-nighty":"_weather-nighty_r2qa2_34",weatherNighty:"_weather-nighty_r2qa2_34"};const P={sunny:{class:c["weather-sunny"],component:T},cloudy:{class:c["weather-cloudy"],component:q},rainy:{class:c["weather-rainy"],component:j},snowy:{class:c["weather-snowy"],component:I},nighty:{class:c["weather-nighty"],component:E}},K=({type:t,duration:n=3600,iconDuration:i,className:o=""})=>{const{class:l,component:d}=P[t],_=X(t),{component:u}=P[_||t],[x,b]=G({preClassName:"",curClassName:""});r.useEffect(()=>{!_||b({preClassName:"animate__fadeOut",curClassName:"animate__fadeIn"})},[_,t,b]);const k={"--animate-duration":`${i!=null?i:n/2}ms`};return s("div",{className:`${c["weather-container"]} ${l} ${o}`,style:k,children:[_?e(u,{className:`animate__animated ${x.preClassName}`}):null,e(d,{className:`animate__animated ${x.curClassName}`})]})};a.Cloudy=q,a.CornerSwiper=J,a.Nighty=E,a.Rainy=j,a.Snowy=I,a.Sunny=T,a.SwiperItem=S,a.Weather=K,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});