@unicity/design-system/dist/MotionAnimation-WecGIetv.cjs

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

var __defProp=Object.defineProperty;var __name=(target,value)=>__defProp(target,"name",{value,configurable:!0});Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const index=require("./index-2aYpps03.cjs"),material=require("@mui/material"),iconsMaterial=require("@mui/icons-material"),reactI18next=require("react-i18next"),MotionAnimation=__name(({compact=!1,onEvent})=>{const{t}=reactI18next.useTranslation(),{settings,updateSettings,resolvedMode}=index.useTheme(),accessibilityMode=settings.accessibilityMode,isDarkModeHighContrast=resolvedMode==="dark"&&accessibilityMode==="high-contrast",motion=settings.motion,onMotionChange=__name((field,value)=>{updateSettings({...settings,motion:{...motion,[field]:value}})},"onMotionChange");return index.jsxs(index.Box,{children:[index.jsxs(index.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",borderColor:"divider",borderRadius:1,backgroundColor:"background.paper",mb:3,gap:1.5},children:[index.jsx(index.Box,{sx:__name(theme=>({p:.75,borderRadius:1,backgroundColor:"primary.main",color:"primary.contrastText",display:"flex",alignItems:"center",justifyContent:"center","& .MuiSvgIcon-root":{fill:`${theme.palette.primary.contrastText} !important`,color:`${theme.palette.primary.contrastText} !important`,filter:isDarkModeHighContrast?"brightness(0)":resolvedMode==="dark"?"brightness(0) invert(0)":"brightness(0) invert(1)"}}),"sx"),children:index.jsx(iconsMaterial.Animation,{fontSize:"small"})}),index.jsxs(index.Box,{sx:{flex:1},children:[index.jsx(index.Typography,{sx:{fontSize:"calc(14px * var(--unicity-font-scale, 1))",fontWeight:600},children:t("motion_animation.title")}),index.jsx(index.Typography,{sx:{fontSize:"calc(12px * var(--unicity-font-scale, 1))",color:"text.secondary",mt:.25},children:t("motion_animation.description")})]}),index.jsx(index.Tooltip,{title:t("motion_animation.tooltip"),placement:"left",arrow:!0,children:index.jsx(index.IconButton,{size:"small",sx:{alignSelf:"flex-start"},children:index.jsx(iconsMaterial.Info,{fontSize:"small"})})})]}),index.jsx(index.Box,{sx:{p:3,border:"1px solid",borderColor:"divider",borderRadius:1,backgroundColor:"background.paper",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.08)",mb:3},children:index.jsxs(material.Stack,{spacing:3,children:[index.jsxs(index.Box,{sx:{p:2.5,border:"1px solid",borderColor:motion.reduceMotion?"success.main":"divider",borderRadius:2,backgroundColor:motion.reduceMotion?"success.50":"transparent",transition:"all 0.2s ease-in-out"},children:[index.jsxs(index.Box,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",mb:1},children:[index.jsxs(index.Box,{sx:{flex:1},children:[index.jsx(index.Typography,{variant:"h6",fontWeight:600,color:motion.reduceMotion?"success":"textPrimary",children:t("motion_animation.reduce_motion")}),index.jsx(index.Typography,{variant:"body2",color:"textSecondary",sx:{mt:.5},children:t("motion_animation.reduce_motion_description")})]}),index.jsx(index.Switch,{checked:motion.reduceMotion,onChange:__name(checked=>onMotionChange("reduceMotion",checked),"onChange"),name:"reduceMotion"})]}),motion.reduceMotion&&index.jsx(index.Box,{sx:{mt:2,p:1.5,backgroundColor:"success.100",borderRadius:1,border:"1px solid",borderColor:"success.200"},children:index.jsx(index.Typography,{variant:"caption",color:"success",fontWeight:500,children:t("motion_animation.reduce_motion_on")})})]}),index.jsxs(index.Box,{sx:{p:2.5,border:"1px solid",borderColor:"divider",borderRadius:2,backgroundColor:"background.paper"},children:[index.jsx(index.Typography,{variant:"h6",fontWeight:600,mb:1,children:t("motion_animation.animation_speed")}),index.jsx(index.Typography,{variant:"body2",color:"textSecondary",mb:2.5,children:t("motion_animation.animation_speed_description")}),index.jsx(index.Box,{sx:{display:"flex",gap:1,mb:2},children:[{value:"off",label:t("motion_animation.speed_labels.off"),duration:t("motion_animation.disabled"),description:t("motion_animation.speed_descriptions.off"),icon:index.jsx(iconsMaterial.PowerSettingsNew,{fontSize:"small"})},{value:"slow",label:t("motion_animation.speed_labels.slow"),duration:"",description:t("motion_animation.speed_descriptions.slow"),icon:index.jsx(iconsMaterial.SlowMotionVideo,{fontSize:"small"})},{value:"normal",label:t("motion_animation.speed_labels.normal"),duration:"",description:t("motion_animation.speed_descriptions.normal"),icon:index.jsx(iconsMaterial.Speed,{fontSize:"small"})},{value:"fast",label:t("motion_animation.speed_labels.fast"),duration:"",description:t("motion_animation.speed_descriptions.fast"),icon:index.jsx(iconsMaterial.RocketLaunch,{fontSize:"small"})}].map(speed=>index.jsx(index.Box,{onClick:__name(()=>onMotionChange("animationSpeed",speed.value),"onClick"),sx:{flex:1,p:2,border:"2px solid",borderColor:motion.animationSpeed===speed.value?"primary.main":"divider",borderRadius:1.5,backgroundColor:motion.animationSpeed===speed.value?"primary.50":"background.paper",cursor:"pointer",transition:"all 0.2s ease-in-out",textAlign:"left","&:hover":{borderColor:motion.animationSpeed===speed.value?"primary.dark":"primary.light",backgroundColor:motion.animationSpeed===speed.value?"primary.100":"action.hover"}},children:index.jsxs(index.Box,{sx:{display:"flex",alignItems:"center",gap:1.25},children:[index.jsx(index.Box,{sx:{color:motion.animationSpeed===speed.value?"primary.dark":"text.secondary",display:"flex",alignItems:"center"},children:speed.icon}),index.jsxs(index.Box,{children:[index.jsx(index.Typography,{variant:"body1",fontWeight:600,sx:{color:motion.animationSpeed===speed.value?"primary.dark":"text.primary"},children:speed.label}),index.jsx(index.Typography,{variant:"caption",sx:{color:motion.animationSpeed===speed.value?"primary.main":"text.secondary",display:"block",mt:.25},children:speed.duration}),index.jsx(index.Typography,{variant:"caption",color:"textSecondary",sx:{display:"block",fontSize:"0.7rem",mt:.25},children:speed.description})]})]})},speed.value))})]}),index.jsxs(index.Box,{sx:{p:2.5,border:"1px solid",borderColor:motion.autoPlay?"warning.main":"divider",borderRadius:2,backgroundColor:motion.autoPlay?"warning.50":"transparent",transition:"all 0.2s ease-in-out"},children:[index.jsxs(index.Box,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",mb:1},children:[index.jsxs(index.Box,{sx:{flex:1},children:[index.jsx(index.Typography,{variant:"h6",fontWeight:600,color:motion.autoPlay?"warning":"textPrimary",children:t("motion_animation.auto_play")}),index.jsx(index.Typography,{variant:"body2",color:"textSecondary",sx:{mt:.5},children:t("motion_animation.auto_play_description")})]}),index.jsx(index.Switch,{checked:motion.autoPlay,onChange:__name(checked=>onMotionChange("autoPlay",checked),"onChange"),name:"autoPlay"})]}),!motion.autoPlay&&index.jsx(index.Box,{sx:{mt:2,p:1.5,backgroundColor:"info.100",borderRadius:1,border:"1px solid",borderColor:"info.200"},children:index.jsx(index.Typography,{variant:"caption",color:"info",fontWeight:500,children:t("motion_animation.autoplay_off")})})]})]})}),!compact&&index.jsxs(index.Box,{mt:2,p:2,children:[index.jsx(index.Typography,{variant:"caption",fontWeight:500,mb:1.5,color:"textSecondary",sx:{fontSize:"0.75rem"},children:t("motion_animation.preview_guidelines")}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("motion_animation.animation_demo")}),index.jsxs(index.Box,{sx:{display:"flex",gap:2,flexWrap:"wrap",alignItems:"center"},children:[index.jsx(index.Box,{sx:{width:50,height:50,backgroundColor:"primary.main",borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",transition:motion.animationSpeed==="off"?"none":`all ${motion.animationSpeed==="slow"?"0.8s":motion.animationSpeed==="normal"?"0.3s":motion.animationSpeed==="fast"?"0.1s":"0s"} ease`,"&:hover":motion.animationSpeed!=="off"?{transform:motion.reduceMotion?"scale(1.05)":"scale(1.1) rotate(5deg)",backgroundColor:"primary.dark"}:{}},children:index.jsx(index.Typography,{variant:"caption",color:"white",fontWeight:"bold",children:t("common.hover")})}),index.jsx(index.Typography,{variant:"body2",color:"textSecondary",children:t("motion_animation.hover_to_see_speed",{speed:motion.animationSpeed,reduced:motion.reduceMotion?t("motion_animation.reduced_motion_suffix"):""})})]})]}),index.jsxs(index.Box,{mb:3,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("motion_animation.autoplay_demo")}),index.jsxs(index.Box,{sx:{width:"100%",height:60,backgroundColor:"background.paper",border:"1px solid",borderColor:"divider",borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden"},children:[motion.autoPlay?index.jsx(index.Box,{sx:{width:20,height:20,backgroundColor:"success.main",borderRadius:"50%",animation:motion.animationSpeed!=="off"&&!motion.reduceMotion?`pulse ${motion.animationSpeed==="slow"?"2s":motion.animationSpeed==="normal"?"1s":"0.5s"} infinite`:"none","@keyframes pulse":{"0%":{transform:"scale(1)",opacity:1},"50%":{transform:"scale(1.2)",opacity:.7},"100%":{transform:"scale(1)",opacity:1}}}}):index.jsx(index.Box,{sx:{width:20,height:20,backgroundColor:"text.disabled",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center"},children:index.jsx(index.Box,{sx:{width:0,height:0,borderLeft:"6px solid white",borderTop:"4px solid transparent",borderBottom:"4px solid transparent",ml:.25}})}),index.jsx(index.Typography,{variant:"body2",sx:{ml:2},children:motion.autoPlay?t("motion_animation.auto_playing_content"):t("motion_animation.click_to_play")})]})]}),index.jsxs(index.Box,{mb:2,children:[index.jsx(index.Typography,{variant:"body2",fontWeight:500,mb:1.5,children:t("common.accessibility_guidelines")}),index.jsxs(index.Box,{sx:{pl:1},children:[motion.reduceMotion&&index.jsx(index.Alert,{severity:"success",sx:{mb:1},children:index.jsx(index.Typography,{variant:"body2",children:t("motion_animation.reduce_motion_on")})}),motion.animationSpeed==="off"&&index.jsx(index.Alert,{severity:"info",sx:{mb:1},children:index.jsx(index.Typography,{variant:"body2",children:t("motion_animation.animations_off")})}),!motion.autoPlay&&index.jsx(index.Alert,{severity:"info",sx:{mb:1},children:index.jsx(index.Typography,{variant:"body2",children:t("motion_animation.autoplay_off")})}),index.jsxs(index.Typography,{variant:"caption",color:"textSecondary",children:[index.jsxs("strong",{children:[t("motion_animation.speed_guidelines"),":"]}),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("motion_animation.speed_labels.slow"),":"]})," ",t("motion_animation.slow_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("motion_animation.speed_labels.normal"),":"]})," ",t("motion_animation.normal_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("motion_animation.speed_labels.fast"),":"]})," ",t("motion_animation.fast_guideline"),index.jsx("br",{}),"• ",index.jsxs("strong",{children:[t("motion_animation.speed_labels.off"),":"]})," ",t("motion_animation.off_guideline")]})]})]}),index.jsxs(index.Typography,{variant:"caption",color:"textSecondary",sx:{display:"block"},children:[index.jsxs("strong",{children:[t("common.current_settings"),":"]})," ",t("motion_animation.animation_speed"),": ",motion.animationSpeed," •",t("motion_animation.reduce_motion"),": ",motion.reduceMotion?t("common.on"):t("common.off")," •",t("motion_animation.auto_play"),": ",motion.autoPlay?t("common.on"):t("common.off")]})]})]})},"MotionAnimation");exports.MotionAnimation=MotionAnimation;exports.default=MotionAnimation;