????
Your IP : 216.73.216.130
var __defProp=Object.defineProperty;var __name=(target,value)=>__defProp(target,"name",{value,configurable:!0});import{s as styled,k as jsxRuntimeExports,aG as Stack,ar as Typography,r as reactExports,aN as FormControl,aO as FormLabel,aP as FormHelperText,Z as React,B as Box,o as styled$1,J as Box$1,aj as Breadcrumb,ak as SimpleCard}from"./index-y1X-EiI1.js";import{S as Switch}from"./Switch-BlzK9Osj.js";import{F as FormGroup}from"./FormGroup-CEJG6asl.js";import{F as FormControlLabel}from"./FormControlLabel-DsNUWeNq.js";import"./SwitchBase-HB81Uehs.js";const MaterialUISwitch=styled(Switch)(({theme})=>({width:62,height:34,padding:7,"& .MuiSwitch-switchBase":{margin:1,padding:0,transform:"translateX(6px)","&.Mui-checked":{color:"#fff",transform:"translateX(22px)","& .MuiSwitch-thumb:before":{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent("#fff")}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`},"& + .MuiSwitch-track":{opacity:1,backgroundColor:theme.palette.mode==="dark"?"#8796A5":"#aab4be"}}},"& .MuiSwitch-thumb":{backgroundColor:theme.palette.mode==="dark"?"#003892":"#001e3c",width:32,height:32,"&:before":{content:"''",position:"absolute",width:"100%",height:"100%",left:0,top:0,backgroundRepeat:"no-repeat",backgroundPosition:"center",backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent("#fff")}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`}},"& .MuiSwitch-track":{opacity:1,backgroundColor:theme.palette.mode==="dark"?"#8796A5":"#aab4be",borderRadius:20/2}})),Android12Switch=styled(Switch)(({theme})=>({padding:8,"& .MuiSwitch-track":{borderRadius:22/2,"&:before, &:after":{content:'""',position:"absolute",top:"50%",transform:"translateY(-50%)",width:16,height:16},"&:before":{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(theme.palette.getContrastText(theme.palette.primary.main))}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,left:12},"&:after":{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(theme.palette.getContrastText(theme.palette.primary.main))}" d="M19,13H5V11H19V13Z" /></svg>')`,right:12}},"& .MuiSwitch-thumb":{boxShadow:"none",width:16,height:16,margin:2}})),IOSSwitch=styled(props=>jsxRuntimeExports.jsx(Switch,{focusVisibleClassName:".Mui-focusVisible",disableRipple:!0,...props}))(({theme})=>({width:42,height:26,padding:0,"& .MuiSwitch-switchBase":{padding:0,margin:2,transitionDuration:"300ms","&.Mui-checked":{transform:"translateX(16px)",color:"#fff","& + .MuiSwitch-track":{backgroundColor:theme.palette.mode==="dark"?"#2ECA45":"#65C466",opacity:1,border:0},"&.Mui-disabled + .MuiSwitch-track":{opacity:.5}},"&.Mui-focusVisible .MuiSwitch-thumb":{color:"#33cf4d",border:"6px solid #fff"},"&.Mui-disabled .MuiSwitch-thumb":{color:theme.palette.mode==="light"?theme.palette.grey[100]:theme.palette.grey[600]},"&.Mui-disabled + .MuiSwitch-track":{opacity:theme.palette.mode==="light"?.7:.3}},"& .MuiSwitch-thumb":{boxSizing:"border-box",width:22,height:22},"& .MuiSwitch-track":{borderRadius:26/2,backgroundColor:theme.palette.mode==="light"?"#E9E9EA":"#39393D",opacity:1,transition:theme.transitions.create(["background-color"],{duration:500})}})),AntSwitch=styled(Switch)(({theme})=>({width:28,height:16,padding:0,display:"flex","&:active":{"& .MuiSwitch-thumb":{width:15},"& .MuiSwitch-switchBase.Mui-checked":{transform:"translateX(9px)"}},"& .MuiSwitch-switchBase":{padding:2,"&.Mui-checked":{transform:"translateX(12px)",color:"#fff","& + .MuiSwitch-track":{opacity:1,backgroundColor:theme.palette.mode==="dark"?"#177ddc":"#1890ff"}}},"& .MuiSwitch-thumb":{boxShadow:"0 2px 4px 0 rgb(0 35 11 / 20%)",width:12,height:12,borderRadius:6,transition:theme.transitions.create(["width"],{duration:200})},"& .MuiSwitch-track":{borderRadius:16/2,opacity:1,backgroundColor:theme.palette.mode==="dark"?"rgba(255,255,255,.35)":"rgba(0,0,0,.25)",boxSizing:"border-box"}}));function CustomizedSwitch(){return jsxRuntimeExports.jsxs(FormGroup,{children:[jsxRuntimeExports.jsx(FormControlLabel,{control:jsxRuntimeExports.jsx(MaterialUISwitch,{sx:{m:1},defaultChecked:!0}),label:"MUI switch"}),jsxRuntimeExports.jsx(FormControlLabel,{control:jsxRuntimeExports.jsx(Android12Switch,{defaultChecked:!0}),label:"Android 12"}),jsxRuntimeExports.jsx(FormControlLabel,{control:jsxRuntimeExports.jsx(IOSSwitch,{sx:{m:1},defaultChecked:!0}),label:"iOS style"}),jsxRuntimeExports.jsxs(Stack,{direction:"row",spacing:1,alignItems:"center",children:[jsxRuntimeExports.jsx(Typography,{children:"Off"}),jsxRuntimeExports.jsx(AntSwitch,{defaultChecked:!0,inputProps:{"aria-label":"ant design"}}),jsxRuntimeExports.jsx(Typography,{children:"On"})]})]})}__name(CustomizedSwitch,"CustomizedSwitch");function FormGroupSwitch(){const[state,setState]=reactExports.useState({gilad:!0,jason:!1,antoine:!0}),handleChange=__name(name=>event=>{setState({...state,[name]:event.target.checked})},"handleChange");return jsxRuntimeExports.jsxs(FormControl,{component:"fieldset",children:[jsxRuntimeExports.jsx(FormLabel,{component:"legend",children:"Assign responsibility"}),jsxRuntimeExports.jsxs(FormGroup,{children:[jsxRuntimeExports.jsx(FormControlLabel,{label:"Gilad Gray",control:jsxRuntimeExports.jsx(Switch,{checked:state.gilad,onChange:handleChange("gilad"),value:"gilad"})}),jsxRuntimeExports.jsx(FormControlLabel,{label:"Jason Killian",control:jsxRuntimeExports.jsx(Switch,{checked:state.jason,onChange:handleChange("jason"),value:"jason"})}),jsxRuntimeExports.jsx(FormControlLabel,{label:"Antoine Llorca",control:jsxRuntimeExports.jsx(Switch,{checked:state.antoine,onChange:handleChange("antoine"),value:"antoine"})})]}),jsxRuntimeExports.jsx(FormHelperText,{children:"Be careful"})]})}__name(FormGroupSwitch,"FormGroupSwitch");function LabelledSwitch(){const[state,setState]=React.useState({checkedA:!0,checkedB:!0}),handleChange=__name(name=>event=>{setState({...state,[name]:event.target.checked})},"handleChange");return jsxRuntimeExports.jsxs(FormGroup,{row:!0,children:[jsxRuntimeExports.jsx(FormControlLabel,{label:"Secondary",control:jsxRuntimeExports.jsx(Switch,{checked:state.checkedA,onChange:handleChange("checkedA"),value:"checkedA"})}),jsxRuntimeExports.jsx(FormControlLabel,{label:"Primary",control:jsxRuntimeExports.jsx(Switch,{color:"primary",value:"checkedB",checked:state.checkedB,onChange:handleChange("checkedB")})}),jsxRuntimeExports.jsx(FormControlLabel,{control:jsxRuntimeExports.jsx(Switch,{value:"checkedC"}),label:"Uncontrolled"}),jsxRuntimeExports.jsx(FormControlLabel,{disabled:!0,control:jsxRuntimeExports.jsx(Switch,{value:"checkedD"}),label:"Disabled"}),jsxRuntimeExports.jsx(FormControlLabel,{disabled:!0,control:jsxRuntimeExports.jsx(Switch,{checked:!0,value:"checkedE"}),label:"Disabled"})]})}__name(LabelledSwitch,"LabelledSwitch");function PlacingSwitchLabel(){const[value,setValue]=React.useState("female");function handleChange(event){setValue(event.target.value)}return __name(handleChange,"handleChange"),jsxRuntimeExports.jsxs(FormControl,{component:"fieldset",children:[jsxRuntimeExports.jsx(FormLabel,{component:"legend",children:"labelPlacement"}),jsxRuntimeExports.jsxs(FormGroup,{"aria-label":"position",name:"position",value,onChange:handleChange,row:!0,children:[jsxRuntimeExports.jsx(FormControlLabel,{value:"top",control:jsxRuntimeExports.jsx(Switch,{color:"primary"}),label:"Top",labelPlacement:"top"}),jsxRuntimeExports.jsx(FormControlLabel,{value:"start",control:jsxRuntimeExports.jsx(Switch,{color:"primary"}),label:"Start",labelPlacement:"start"}),jsxRuntimeExports.jsx(FormControlLabel,{value:"bottom",control:jsxRuntimeExports.jsx(Switch,{color:"primary"}),label:"Bottom",labelPlacement:"bottom"}),jsxRuntimeExports.jsx(FormControlLabel,{value:"end",control:jsxRuntimeExports.jsx(Switch,{color:"primary"}),label:"End",labelPlacement:"end"})]})]})}__name(PlacingSwitchLabel,"PlacingSwitchLabel");function SimpleSwitch(){const[state,setState]=React.useState({checkedA:!0,checkedB:!0}),handleChange=__name(name=>event=>{setState({...state,[name]:event.target.checked})},"handleChange");return jsxRuntimeExports.jsxs(Box,{children:[jsxRuntimeExports.jsx(Switch,{value:"checkedA",checked:state.checkedA,onChange:handleChange("checkedA"),inputProps:{"aria-label":"secondary checkbox"}}),jsxRuntimeExports.jsx(Switch,{color:"primary",value:"checkedB",checked:state.checkedB,onChange:handleChange("checkedB"),inputProps:{"aria-label":"primary checkbox"}}),jsxRuntimeExports.jsx(Switch,{value:"checkedC",inputProps:{"aria-label":"primary checkbox"}}),jsxRuntimeExports.jsx(Switch,{disabled:!0,value:"checkedD",inputProps:{"aria-label":"disabled checkbox"}}),jsxRuntimeExports.jsx(Switch,{disabled:!0,checked:!0,value:"checkedE",inputProps:{"aria-label":"primary checkbox"}}),jsxRuntimeExports.jsx(Switch,{defaultChecked:!0,value:"checkedF",color:"default",inputProps:{"aria-label":"checkbox with default color"}})]})}__name(SimpleSwitch,"SimpleSwitch");const Container=styled$1("div")(({theme})=>({margin:"30px",[theme.breakpoints.down("sm")]:{margin:"16px"},"& .breadcrumb":{marginBottom:"30px",[theme.breakpoints.down("sm")]:{marginBottom:"16px"}}})),AppSwitch=__name(()=>jsxRuntimeExports.jsxs(Container,{children:[jsxRuntimeExports.jsx(Box$1,{className:"mb-sm-30",children:jsxRuntimeExports.jsx(Breadcrumb,{routeSegments:[{name:"Material",path:"/material"},{name:"Switch"}]})}),jsxRuntimeExports.jsxs(Stack,{spacing:3,children:[jsxRuntimeExports.jsx(SimpleCard,{title:"Simple Switch",children:jsxRuntimeExports.jsx(SimpleSwitch,{})}),jsxRuntimeExports.jsx(SimpleCard,{title:"Switch with Label",children:jsxRuntimeExports.jsx(LabelledSwitch,{})}),jsxRuntimeExports.jsx(SimpleCard,{title:"Switch with Form Group",children:jsxRuntimeExports.jsx(FormGroupSwitch,{})}),jsxRuntimeExports.jsx(SimpleCard,{title:"Customized Switch",children:jsxRuntimeExports.jsx(CustomizedSwitch,{})}),jsxRuntimeExports.jsx(SimpleCard,{title:"Switch with Different Label Placement",children:jsxRuntimeExports.jsx(PlacingSwitchLabel,{})})]})]}),"AppSwitch");export{AppSwitch as default};